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.
Use of the new @supports at-rule or 'feature check' allows your browser to check if a specific CSS property or feature, and its value, is supported in the user's browser. The problem is very few older and even newer browsers support the @supports CSS trick.
To group selectors, separate each selector with a comma.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With