Html5-boilerplate: ::selection background color default

[necolas]

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]

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]

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]

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

[necolas]

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

[kevinansfield]

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]

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]

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]

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]

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]

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

Case closed.

[roblarsen]

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]

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

[mathiasbynens]

+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 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]

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]

pink is wicked hot.

[bencollier]

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]

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]

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

[gf3]

Hot Pink++

[retlehs]

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

[gavinblair]

Hot Pink FTW.

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

[mathiasbynens]

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

[SeanJA]

Well... that is settled

[limeb]

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]

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

[limeb]

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]

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

[SeanJA]

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]

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]

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

[paulrobertlloyd]

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]

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]

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]

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]

"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]

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

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

[adeelejaz]

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]

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]

@sturobson I've added a comment along those lines: https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L42

[paulrobertlloyd]

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]

and.... scene!

[innovandrew]

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]

@innovandrew thumbs up!