Remove style if CSS3 support

Question

Is it possible to remove the style when the browser uses CSS elements (shadows, rounded corners, etc.)? For instance:

.fancy { /* only display if no drop shadow support */ border: thin solid #888; box-shadow: 0px 1px 4px #888; -webkit-box-shadow: 0px 1px 4px #888; -moz-box-shadow: 0px 1px 4px #888; } 

Answer 1

CSS does not follow conventions. In any version.

What you can do is dynamically serve different stylesheets for browsers that support CSS3.

Answer 2

It’s better if you don’t remove the style rules, but only apply them when you enable CSS3. You can use this fancy piece of Javascript for it called Modernizr .

Let me give you a quick example of how you can use it in your stylesheet:

 .boxshadow .fancy { border: thin solid #888; box-shadow: 0px 1px 4px #888; -webkit-box-shadow: 0px 1px 4px #888; -moz-box-shadow: 0px 1px 4px #888; } 

Modernizr adds classes to the HTML element that tells you which browser features are enabled.

Answer 3

Since CSS3 is a style markup, not a programming language, you cannot do the if-else truth - however, you can create CSS3 styles to override CSS2 styles, and the end result is CSS3, which supports CSS2 as a reserve.

In terms of practicality, however, this approach is likely to be more painful than dynamically serving CSS3 styles for supported browsers.

Answer 4

One way - although, given the heterogeneous nature of css implementation / implementation, it may / will not work exhaustively: use

 .fancy { border: thin solid #888; } .fancy:nth-of-type(odd), .fancy:nth-of-type(even) { border: 0 none transparent; box-shadow: 0px 1px 4px #888; -webkit-box-shadow: 0px 1px 4px #888; -moz-box-shadow: 0px 1px 4px #888; } 

This is a bit messy, because the selector should explicitly target all the odd and even .fancy , I would prefer a .fancy solution, but it really works (of course, in Chrome / Linux). Demo at: http://jsbin.com/ezako3