I do internet sometimes.

Selecting an element that has a text-shadow applied can make the text look less readable. I wanted to include some detailed selection styles to remove the text shadow and add a background color that matches the colors throughout the rest of the site, so I added this to my stylesheet:


::-moz-selection,
::selection {
text-shadow: none;
background: #4F74C5;
color: #FFF;
}


I wrote that after reading these notes from Mozilla’s documentation, and I thought it would cover all browsers, but I wasn’t seeing the change applied in Firefox. After clearing the browser cache, refreshing a bunch of times, clearing the Drupal site cache and refreshing a bunch more times, I tried changing my CSS file like this:


::-moz-selection {
text-shadow: none;
background: #4F74C5;
color: #FFF;
}
::selection {
text-shadow: none;
background: #4F74C5;
color: #FFF;
}


And then it was applied in all browsers. Hm. Redundant, but OK. Why?

Because while unknown properties are ignored individually (rgba, -moz and -webkit,) selectors are ignored as a group. So if there is one selector in the comma-separated list that the browser didn’t understand it would ignore the whole group.

:)