3

I'm working on a site that has a large number of color styles, around 250 lines of CSS to define one of 7 color schemes, so it's important that I keep the various color rules grouped as best I can.

The newest RC of Firefox 4 is behaving badly when I try and stack selectors relating to the deprecated CSS3 ::selection pseudo element.

This works:

.green ::-moz-selection {
    /* 'Pure Hue' Color */
    background-color: #62BA21;
    color: white;
}

But once I try and share the rule with the selector for webkit it breaks.

Does not work for FireFox:

.green ::selection, .green ::-moz-selection {
    /* 'Pure Hue' Color */
    background-color: #62BA21;
    color: white;
}

I understand they might not be addressing the bug since ::selection is no longer present in the working draft, but I'd prefer if I didn't have to bloat my CSS any more than it already is for this quirk.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Graham Conzett
  • 8,344
  • 11
  • 55
  • 94
  • 1
    `::selection` wasn't deprecated, per se. It was just removed from the selectors spec. Not sure if it's been dropped altogether or something, but it is very well-implemented across modern versions of browsers nevertheless. I'll have to check with the CSS WG on this. – BoltClock Jan 11 '12 at 19:39
  • 2
    [It's gone from CSS3 :(](http://www.w3.org/TR/css3-ui/#changes-list) – BoltClock Feb 10 '12 at 08:05
  • So, I was kinda wrong — its implementation across browsers is flaky and very inconsistent at best. I'm not sure if vendors are actively addressing any tickets related to `::selection` anymore at this point pending a redefinition in a future spec (UI level 4?). – BoltClock Sep 29 '12 at 11:28

1 Answers1

9

Firefox appears to simply not understand ::selection (hence necessitating the vendor-prefixed ::-moz-selection), so it ignores the entire rule on encountering an unrecognized selector per the spec.

The common workaround for a browser not understanding one or more selectors in a group is to split/duplicate the rule set:

/* Firefox sees this */
.green ::-moz-selection {
    background-color: #62BA21;
    color: white;
}

/* Other browsers see this */
.green ::selection {
    background-color: #62BA21;
    color: white;
}

In fact, in this case it's the only thing you can do, i.e. you will have to put up with this slight bit of bloat.

jsFiddle demo

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Interesting, I knew that was the behavior if it encountered an unrecognized selector, but I thought putting it first or having the comma separating the two would allow it to function, but I didn't know this (form the portion of the Working Draft you linked): "CSS 2.1 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future updates of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS 2.1." Thanks for your help! – Graham Conzett Mar 14 '11 at 18:03