Why can I not group browser-specific CSS-selectors for different browsers?

Question

I just tried to write the following rule to style the input placeholder for browsers that support it:

#main input::-webkit-input-placeholder,
#main input:-moz-placeholder
{
    color: #888;
    font-style: italic;
}

The problem is that the rule isn't applied. However, if I break it up like this instead it works just fine:

#main input::-webkit-input-placeholder
{
    color: #888;
    font-style: italic;
}
#main input:-moz-placeholder
{
    color: #888;
    font-style: italic;
}

Why can I not group browser-specific selectors, or is there another way to do it? It doesn't feel right to repeat the same attributes twice for the same element.

Update:

Just found this resource stating that it cannot be done, but so far no information on why. It seems odd that the browser should have to discard the entire rule just because it doesn't recognize one of the selectors.

score 8 · Accepted Answer · edited May 23 '12 at 22:04

8

If one selector in a group of selectors is invalid, the browser must treat the entire rule as invalid. Or at least so says the W3C.

I'm not sure why this behaviour is mandated, but at a push, I'd guess it's because an invalid selector could break general CSS syntax, making it impossible for a browser to reliably guess where the invalid selector ends and valid elements begin.

edited May 23 '12 at 22:04

Christofer Eliasson

32,939
7
74
103

answered May 23 '12 at 22:01

Jimmy Breck-McKye

2,923
1
22
32

Thanks for the source, that explains why it is invalidated! I guess it makes sense to ignore the entire rule, when you put it like that. This is a bit of a corner-case, so I guess it's okay, but it feels a bit messy that you have to repeat your code. – Christofer Eliasson May 23 '12 at 22:08
@boltclock Thanks for the additional read, the interesting thing though is that I debugged this particular code in Chrome, and it did not apply the rule in my first example. Have WebKit started to obey this rule? – Christofer Eliasson May 24 '12 at 06:48
@Christofer Eliasson: Hmmm, it turns out [WebKit's behavior](http://stackoverflow.com/questions/8317954/ignoring-webkit-specific-css-selector-in-firefox) might not be intentional after all. I just discovered that it doesn't work in your case because WebKit only selectively ignores prefixed pseudo-elements (like `::-moz-selection`), but not prefixed pseudo-classes (like `:-moz-placeholder` in your example), and [one of the Chrome devs and CSSWG members just told me that it doesn't seem intentional](https://twitter.com/tabatkins/status/285038809375182848). – BoltClock Dec 29 '12 at 15:19

score 0 · Answer 2 · answered May 23 '12 at 21:49

0

Most likely, some browsers discard the entire definition because they don't consider the selector valid.

answered May 23 '12 at 21:49

lanzz

42,060
10
89
98

score 0 · Answer 3 · answered May 23 '12 at 22:12

0

If you are willing to use JavaScript, check out the -prefix-free script. It allows you to leave off the vendor specific prefixes (e.g. -webkit- or -moz-) for CSS properties like these.

answered May 23 '12 at 22:12

Grezzo

2,220
2
22
39

Haven't used it before, are you sure it works for browser-specific selectors as well? The documentation only mentions CSS-properties from what I can see. – Christofer Eliasson May 23 '12 at 22:22

Why can I not group browser-specific CSS-selectors for different browsers?

3 Answers3

Linked