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::         


        

Answer 1

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.

Answer 2

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.

Answer 3

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