Comment out the hot pink selection and tap highlight?

[aseemk]

Hey there,

Awesome work on H5BP! I absolutely love it. Just one request: could y'all comment out the hot pink selection and tap highlight rules by default? (I have nothing against removing the text-shadow on selection by default; that makes sense.)

I ask this for two reasons:

1. I feel this goes against the "vibe" of default H5BP rules --- unobtrusive and helpful optimizations only, rather than subjective style preferences. ;)
2. If one doesn't want to modify the base stylesheet itself (so that it can be freely upgraded to newer versions without worries of conflicts), instead only adding their styles in a new stylesheet, there's no way to "undo" that hot pink selection color back to the browser's default. I tried auto, inherit, default, etc., to no avail. (I was able to reset the tap highlight via auto.)

In general, I'm a big fan of native look-and-feel on each platform, and changing the selection and tap highlight colors by default prevents that.

Hope you're open to this. Thanks again for the great project!

Cheers, Aseem

[irae]

Oh, come on! It's soooo looovely! All the interweb should be hot pink!

Just kidding...

I don't really know the reasons behind this piece of code (besides that Paul Irish loves pink). But I can come up with two good reasons not to remove it:

1. There are usability issues across browsers and OSs. I use a mac, and some sites the selected text is not readable due to the fonts being color:skyblue; or similar colors. AFAIK this is true to some linux window managers too. And windows can be affected to. Some users modify the OS colors very heavily, and I'm not talking about power users, children also love changing colors. The hot pink in h5bp is a reminder to us that this colors should be set.
2. Having the properties is very educational. Many developers are using h5bp as a first contact with new browser technologies and best practices. You can learn a lot reading all the comments on it's code and having it place is great for demonstrations purposes.
3. Git is our friend here. Maintaining local copies are very easy, since when you pull the changes, unless this very lines are changed, your local (committed) modifications will persist.

I am in favor of keeping it, and maybe even adding some comments to justify it on the code itself.

Any designer or usability expert here to back me up? I'm only a developer who thinks to much of my design skills ;)

[aseemk]

Hey just to clarify, I'm not requesting its removal — I'm requesting it being commented out. #2 above is thus not an issue; there are plenty of great things in H5BP that are commented out, which I love.

I appreciate and understand #3 but I don't think it's a very user-friendly stance to take. You almost never need to go in and modify jQuery; you can make your tweaks on top of it. I love libraries like that, and I would love H5BP to be in that style as well.

I don't really have expertise on #1 so won't say much except that I would think the OS and browsers would be much smarter by default at handling a variety of color schemes (especially native color schemes) than a default hot pink. ;) Also, are you really optimizing for the common case or the edge case w/ an explicit style?

Thanks for the quick response. =)

Cheers, Aseem

[roblarsen]

I should point out it's really in the spirit of H5BP to edit the project as you see fit when starting out with new work, So don't be afraid to change things if you need to. It's definitely NOT a 1:1 correlation to something like jQuery where something is terribly wrong if you're editing jQuery source code for your project. With H5BP if you're not using something- delete it. If you don't like the way something is structured- change it. While people put a lot of time and effort into coming up with smart defaults and the whole project is chock full of best practices not every one of them is right for every project.

Personally, I keep an edited branch for project work.

[irae]

@aseemk the problem with text colors and selection colors are not edge cases. I see it a lot. The most common case are blogs that use online wysiwyg editors autputting <p style="color:[foo];">. You end up with light color text on light selection background (same for dark colors). If you add the selection color and background manually, this won't happen. IMHO this is a browser bug that should be reset actively by default.

[adamjmcintyre]

I vote that we get as many people as we can to change the ::selection color to whatever they'd like and then submit pull requests to piss off Paul.

[roblarsen]

I vote that Adam is onto something.

[zachwill]

+1 for Adam's idea.

[adamjmcintyre]

I told Paul my suggestion and he stopped talking to me on IM. :(

[roblarsen]

The clarity of your idea stunned him into silence.

[getconor]

I agree with the points raised by roblarsen and lrae. We should keep the pink, and developers are encouraged to customize the project files to fit their needs and then maintain their customizations with Git.

Edited to add that developers now have the option to keep some customizations per project with the new build script anyway.

[adamyonk]

I agree with mhutchin. Dev'rs should be making it their own anyway, and for projects where it's OK to leave in a little nugget of surprise, the pink is a showing of your H5BP colors.

[yahelc]

I kind of like it. I'm a compulsive highlighter, so if I see that distinctive pink, I immediately know that the site is using H5BP. It's like a shibboleth for forward thinking web developers.

[Calvein]

Hey, #ff5e99 is for pussies, I use #BADA55 like a real man.

[Gavrisimo]

I am against removing/commenting out that part. It is a clear reminder that you can change selection bg color per project, which is something i am doing.

For example, if project have some color as it's main color, #ff0000 in this example, then i usually put ::selection to be that same color.

So for me hot pink is a good thing, it reminds me that i can set ::selection color to what i need for the given project.

Even in my h5bp branch i am keeping hot pink just for the reasons i stated above, cant think of any other color that would be such clear reminder to set ::selection in every project... :)

Except maybe, like Calvein said, #bada55! If there was ever a vote to change hot pink to #bada55 - i would vote #bada55!

Also maybe set default font to comic sans? :)

[paulirish]

I never thought this day would come!

Well, hot pink is my favoritest thing ever.

And while it certainly is not very professional, it's a little bit of sparkle that gives this project some sassy personality.

So it's not going anywhere, but hey feel free to tweak this. Maybe we could add a color picker to the builder (with a few strongly suggested values.. ;)

♥

[Calvein]

Actually GaVrA is right. The hot pink is a way to recognize H5BP project or a way to encourage people to use another one (#BADA55 is way better, and Sniglet is also better than Comic Sans but nevermind).

[andrewstaffell]

well, I would argue it is no more or less professional than any other colour – that's 100% subjective. it's also conspicuous over almost any colour scheme I've seen and tried it with, which is exactly what it's supposed to be. ergo, +1 it stays. forever. win.

[irae]

 _                
| |           _   
| |__   ___ _| |_ 
|  _ \ / _ (_   _)
| | | | |_| || |_ 
|_| |_|\___/  \__)

       _       _     
      (_)     | |    
 ____  _ ____ | |  _ 
|  _ \| |  _ \| |_/ )
| |_| | | | | |  _ ( 
|  __/|_|_| |_|_| \_)
|_|                  
       _            
      (_)           
 _ _ _ _ ____   ___ 
| | | | |  _ \ /___)
| | | | | | | |___ |
 \___/|_|_| |_(___/ 

[andrewstaffell]

ahhh yeah.

[aseemk]

I admit I'm disappointed — what other CSS style is there in h5bp that can't be easily overridden back to the default? This is of course not a big deal, so I won't continue fighting it. =) Thanks for listening, and thanks for the great work Paul!

[getconor]

aseemk, I think you should pursue the idea of adding this somehow to the builder as Paul mentioned.

Just a comment about pink not being a "professional" color. The London Financial Times has printed the entire newspaper on salmon pink stock since 1893, and even printed a single edition on white stock to celebrate the 100th anniversary of the change to pink stock 100 years earlier. Many "white" newspapers use a similar shade of pink for their own financial sections. There are many more examples of pink being used in business going back over a hundred years, including the old pink slip in the United States.

If you Google "pink websites" you'll find lots of examples of pink, even hot pink, being used in a big way on major business sites, and I expect that will only increase as businesses learn that 1) they are no longer tied down to black, blue, white or shades of gray as they often were on paper due to the economics of printing, and 2) they can use color to their advantage to stand out from the competition.

[roblarsen]

Q: Has anyone had a bug report filed because of the pink? A: Yes, that would be me.

Which will just remind me to adjust it based on the site design next time...

One more bit of pink/business... since they sponsor my favorite bike race, I'm obliged to mention that La Gazzetta Dello Sport, the Italian sports daily, is another pink proponent (and was recently featured in The Economist for bucking the newspapers-are-dying trend.)

[valpackett]

Anyone forgot that "delete-key friendly" thing?

[digitalsurgeons]

hotpinkforlife

[franciscolourenco]

"Professionalism is for amateurs" by someone I can't remember

[monokrome]

+1 for hot pink