New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

::selection background color default #610

Closed
necolas opened this Issue Jul 19, 2011 · 44 comments

Comments

Projects
None yet
@necolas
Member

necolas commented Jul 19, 2011

The issue of the ::selection styles has been brought up again, this time in tweets from Paul Lloyd and Stu Robson (unless that last tweet is actually about the old tap-highlight-color style).

As far as I can tell, their concerns seem to be about the default background pink being a poor default colour. Hopefully they can provide any further descriptions and suggestions.

In terms of colour contrast, last time I checked, the "hot pink" is no better or worse than the default blue used by browsers - 3.0:1. I think the removal of text-shadow when text is highlighted is a good improvement, so the only alternative I can see it to switch the background to using the default blue - #3297FD - and/or to include a comment alongside the rule to say something.

@bencollier

This comment has been minimized.

bencollier commented Jul 19, 2011

I love selecting text on a website and seeing it's hot pink and knowing they used the boilerplate.

I vote it stays hot pink; if anything that's more of an encouragement for people to change it, if it was just the default blue then everyone wouldn't notice it and just leave it then we'd have boring sites once again.

@paulrobertlloyd

This comment has been minimized.

paulrobertlloyd commented Jul 19, 2011

Thank-you for filing this issue Nicolas.

I think hot pink is a poor choice for the text selection as it's so apparent, and often doesn’t fit with the design of many websites--text selection on sites where this value hasn’t been changed can be quite jarring. I’d encourage the use of a more neutral colour; blues or greys are usually good choices, but maybe a pale yellow might work too.

I guess this relates to the underlying issue of people not studying the contents of the boilerplate and using it wholesale without customisation. There may be limits as to how much you can encourage people to be less lazy (and perhaps this goes against the ethos of a boilerplate) but I’d like to see more communication around customising and adapting the files. Maybe that needs to be filed in a different issue ;-)

Finally, I’ve heard a few people give the same reason as Ben for using hot pink. I’d counter this argument by asking who are you developing your website for? Is it for other developers, or the users of your website? I’m sure for most people seeing a bright pink colour on text selection would confuse rather than entertain them.

@abitgone

This comment has been minimized.

abitgone commented Jul 19, 2011

Can someone explain why the ::selection background colour even needs to be overridden in the first place?

@necolas

This comment has been minimized.

Member

necolas commented Jul 19, 2011

@abitgone Because you cannot simply remove text-shadow on highlight without existing browsers also killing the default highlight background color.

@kevinansfield

This comment has been minimized.

kevinansfield commented Jul 19, 2011

I'm with Paul here, I've yet to see a website where the hot pink text selection fits with the design and doesn't appear shocking. Is there any particular reason it's been changed from the browser/OS default that users would expect?

@abitgone

This comment has been minimized.

abitgone commented Jul 19, 2011

So ::selection { text-shadow: none } doesn't work? Even if that's the case, surely that's not a strong enough reason to change the default selection background colour?

@paulrobertlloyd

This comment has been minimized.

paulrobertlloyd commented Jul 19, 2011

Does the default colour vary across browsers/platforms? In which case, there may be a case for providing a background colour, but that default should be a neutral, considered choice.

@ghost

This comment has been minimized.

ghost commented Jul 19, 2011

I'm not even sure why this is an issue.

We can't hold the hands of every web developer and tell them to change the default styles of everything. I think the pink is a good color to remind you that, oh yeah, you should probably change that.

@paulrobertlloyd

This comment has been minimized.

paulrobertlloyd commented Jul 19, 2011

Yet, people aren’t changing it, so as a reminder it fails. Do bare in mind the effect of this style isn’t immediately apparent. Much better to have a sensible default, surely?

@miketaylr

This comment has been minimized.

miketaylr commented Jul 19, 2011

+1 for leaving it as is. Change it if the color pink offends you, leave it alone if it doesn't.

Case closed.

@roblarsen

This comment has been minimized.

Member

roblarsen commented Jul 19, 2011

If the intent is to move away from the hot pink then education + the default blue is probably the best bet. There's no magical color choice that is going to "work" for every site. A more neutral color might not look as bad as the hot pink on some sites, but the closer we get to business colors the more likely it is we'll create disappearing text on ::selection.

(forgot to add:)
Personally I'm for leaving it and figuring some way to educate people on it as a design element they need to consider when building a site. Getting people to design it on a per-site basis is better than giving them a less-bad default.

@ralphholzmann

This comment has been minimized.

ralphholzmann commented Jul 19, 2011

The stylesheet isn't read only. Change it if it offends you. Personally, I like the pink.

@mathiasbynens

This comment has been minimized.

Member

mathiasbynens commented Jul 19, 2011

+1 for leaving it as is. The entire Boilerplate is delete key–friendly. If you don’t like the pink text selection, pick a different color, or just remove the rule(s) altogether.

@ahume

This comment has been minimized.

ahume commented Jul 19, 2011

This is not about what you 'like', surely. It's about sensible defaults being used in a boilerplate.

I don't like seeing the pink highlight because 90% of the time it's a mistake that it's been left in there, or the developer hasn't known how to change it. The boilerplate code can help reduce the impact of this by using a more suitable and neutral default, that doesn't undermine the visual design.

@SeanJA

This comment has been minimized.

SeanJA commented Jul 19, 2011

Seriously? If you can't figure out how to change it from pink... perhaps you shouldn't be using it before you learn more about css?

@shichuan

This comment has been minimized.

Member

shichuan commented Jul 19, 2011

pink is wicked hot.

@bencollier

This comment has been minimized.

bencollier commented Jul 19, 2011

Yeah it's a boilerplate to get you started; why not throw the towel in and include an entire template with it!

I think the hot pink adds some character and an 'easter egg' highlighting developers that don't test their site properly.

@necolas

This comment has been minimized.

Member

necolas commented Jul 19, 2011

As I mentioned before, existing browsers don't let you reset just text-shadow in ::selection (this is something they should probably fix). Highlighted text can look a mess if it also has text shadows of certain colours or sizes. So if you want to avoid the text-shadow-when-highlighted problem then you have to declare a ::selection background and color.

If those who think this is an issue could move towards presenting test cases and proposing alternatives (as code), that would be great. At the moment, we have nothing else concrete to evaluate other than redeclaring the default blue instead of using hot pink because pink isn't considered "neutral" enough.

@SlexAxton

This comment has been minimized.

Contributor

SlexAxton commented Jul 19, 2011

Personally I find blue to be an offensive default. Pink forever.

@gf3

This comment has been minimized.

gf3 commented Jul 19, 2011

Hot Pink++

@retlehs

This comment has been minimized.

Contributor

retlehs commented Jul 19, 2011

leave the pink, h5bp shouldn't be changed just because some choose not to update the selection color

@gavinblair

This comment has been minimized.

gavinblair commented Jul 19, 2011

Hot Pink FTW.

Perhaps someone should fork the boilerplate, with the only change being the default select colour?

@mathiasbynens

This comment has been minimized.

Member

mathiasbynens commented Jul 19, 2011

Looks like these guys disagree the selection color should be changed:

@SeanJA

This comment has been minimized.

SeanJA commented Jul 19, 2011

Well... that is settled

@limeb

This comment has been minimized.

limeb commented Jul 19, 2011

I would definitely prefer blue... -1 for hot pink. It never ever goes with anything, well unless you building a site with scrolling text, Pink text on a yellow background, blinking animated gifs....Oh wait were aren't using HTML4/3 anymore nor are we in the 1990s.

@SlexAxton

This comment has been minimized.

Contributor

SlexAxton commented Jul 19, 2011

Like you want us to believe that you don't prefer limeblack?

@limeb

This comment has been minimized.

limeb commented Jul 19, 2011

Last time I checked limeblack isn't a color. If it is, it would be a cross between heaven and awesomeness. :D

I don't know it just feels like we are trying to leave a personal touch from the colorific past. I mean other than being an accident, why would someone want pink?

@roblarsen

This comment has been minimized.

Member

roblarsen commented Jul 19, 2011

::-moz-selection { background: #000; color: #0F0; text-shadow: none; }
::selection { background: #000; color: #0F0; text-shadow: none; }
@SeanJA

This comment has been minimized.

SeanJA commented Jul 20, 2011

I only wish this worked...

::selection { background: linear-gradient(left, #0f0 0%,#000 100%); color: #fff; text-shadow: none; }

Then we would have lime black

@sturobson

This comment has been minimized.

sturobson commented Jul 21, 2011

Being the other person that has raised the issue along with Paul. I've finally gotten around to leaving my comments.

My issue is not the colour choice. My issue is the laziness of the people that use the boilerplate and don't edit the colour so that it fit's with the rest of the site. Surely you would want it to tie in with the rest of your site, right?

My request is simple. Add a comment above/below this line of CSS reminding people that it should/could be changed to fit the 'design' of the site. Like the 'don't forget to redefine the outline' you'd get on a CSS reset file.

This would hopefully stop the designer/developer being lazy and just cutting and pasting code verbatim.

@necolas

This comment has been minimized.

Member

necolas commented Jul 21, 2011

Thanks Stu, I think that's a perfectly reasonable idea.

@paulrobertlloyd

This comment has been minimized.

paulrobertlloyd commented Jul 21, 2011

Actually, later versions of Eric Meyer reset actually moved away from just adding a comment. Here's Eric's thoughts on leaving the default value for the :focus rule:

…defining an invisible focus was the biggest blunder of the original reset. In hindsight, it’s really a obvious unforced error, but when I published the reset I literally had no conception that it would be just copied (or, worse, hotlinked) blindly in a thousand sites and frameworks. I did say right in the style sheet that one should define a focus style… by taking everything to a “plain baseline”, the thoughtful craftsperson would be reminded to define the focus style that made most sense for their site’s design. Instead, focus outlines were obliterated wholesale as lots and lots of people, not all of them craftsmen, just copied the reset and built on top of it without thinking about it.

In the latest version of the reset, Eric uses the following notation, commenting out the whole rule and using ????? as a placeholder that can be replaced:

/* remember to define visible focus styles! 
:focus {
    outline: ?????;
} */

Maybe the same approach can be used here?

@necolas

This comment has been minimized.

Member

necolas commented Jul 21, 2011

The original outline removal in Eric Meyer's reset was destructive because it introduced significant accessibility problems (a failing of the default reset). Using a different color for ::selection background doesn't have that problem.

@frankpf

This comment has been minimized.

Contributor

frankpf commented Jul 26, 2011

The ::selection color declaration should be avoided IMO. It kills window inactive styling (http://css-tricks.com/9288-window-inactive-styling/), which is already a reason by itself.

@necolas

This comment has been minimized.

Member

necolas commented Jul 26, 2011

Yeah we know this. But it's quite likely that the issue of text-shadow in highlighting is a bigger problem for users than inactive selection styling. For me, the issue is where the balance is between including this by default, even if there is no text-shadow use in the site (in order to save users where there is text-shadow on a site), or moving it to 'make it better'.

Worth noting that this has been in the boilerplate (and in the wild) for some time and the only reason an issue exists is because I created it. So, it's probably not a massive deal either way.

@frankpf

This comment has been minimized.

Contributor

frankpf commented Jul 26, 2011

"Highlighted text can look a mess if it also has text shadows of certain colours or sizes. So if you want to avoid the text-shadow-when-highlighted problem then you have to declare a ::selection background and color."

Well, we can't prevent people from doing bad design decisions. text-shadow, most of the times, shouldn't be used for body copy.

Although, if you still want to go that route, I'd suggest using the browser default color.

@sturobson

This comment has been minimized.

sturobson commented Jul 28, 2011

My thinking in the CSS as mentioned previously would look something like this though

/-- REMEMBER to change this color to suit YOUR design --/

@adeelejaz

This comment has been minimized.

Contributor

adeelejaz commented Aug 1, 2011

First: +1 for leaving it in.

Rest of my comment is mainly for people who brought the issue up (so that will be @necolas and @sturobson):

No one can judge what is the correct colour for selection highlight. If this discussion is valid, then one can debate that we should also discuss the "ideal" colour for anchor tags (a separate can of worms).

The point is: This is totally design dependant thing and should be maintained/updated by the designer, just like anchor tags.

I love hot pink! But for anyone out there who hates it, please add and update these rules at the bottom of your CSS file:

::-moz-selection { background: #fe57a1; color: #fff; }
::selection { background: #fe57a1; color: #fff; }
@necolas

This comment has been minimized.

Member

necolas commented Aug 1, 2011

I only logged the issue on Paul Lloyd's behalf.

But the discussion is perfectly valid. The default boilerplate link colors have actually been normalized to match modern browser defaults.

@necolas

This comment has been minimized.

Member

necolas commented Aug 3, 2011

@paulrobertlloyd

This comment has been minimized.

paulrobertlloyd commented Aug 3, 2011

I expect the addition of that comment to have zero impact, but at least it’s a step in the right direction. Thanks for following up on this issue Nicolas.

The default boilerplate link colors have actually been normalized to match modern browser defaults.

Which begs the question, why not normalise the selection colour in the same way? The way in which hot pink is being worn as some sort of 'badge of honour' is a pretty sad state of affairs.

@paulirish

This comment has been minimized.

Member

paulirish commented Aug 3, 2011

and.... scene!

@paulirish paulirish closed this Aug 3, 2011

necolas added a commit that referenced this issue Apr 22, 2012

R.I.P. Hot pink text-selection highlight
Replace hot pink with a more neutral selection background color: the
default found on OS X.

A number of high-profile sites have failed to customize the hot pink
default that HTML5 Boilerplate used to include. People should be able to
trust the project to include sensible defaults. Keeping hot pink in
there by default breaks the "no surprises" expectation of amateur and
professional developers.

Ref #610
Ref #969

drublic added a commit to drublic/h5bp-stylus that referenced this issue Apr 23, 2012

@innovandrew

This comment has been minimized.

innovandrew commented Dec 13, 2015

I have probably lost 80 hours of my life changing this back to hot pink.

Every time I have to find this thread to get the color code.

I don't care why I shouldn't be setting it, selection will always be pink damnit!

@andremiguelaa

This comment has been minimized.

andremiguelaa commented Dec 15, 2015

@innovandrew thumbs up!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment