Remove Style if CSS3 Support - css

Question

Is it possible to remove a style in the case that browser specific CSS 3 items (drop shadows, rounded corners, etc.)? For example:
.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

It's better if you don't remove style rules, but only apply them when CSS3 is enabled. You could use this fancy piece of Javascript for it, called Modernizr.
Let me give you a quick example of how you could 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, which tells you what browser functionalities are enabled.

Answer 2

CSS doesn't do conditionals. In any version.
What you can do is dynamically serve up different stylesheets for browsers that support CSS3.

Answer 3

Since CSS3 is style-markup, and not a programming language, you can't do true "if-else"--however you could design your CSS3 styles to override the CSS2 styles, and the end result would be CSS3 where supported with CSS2 as a fallback.
In terms of practicality however, this approach will likely be more painful than dynamically serving CSS3 stylesheets to supported browsers.

Answer 4

One means -though given the patchy nature of css adoption/implementation it might/will not work exhaustively- is to 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 in that the selector has to explicitly target all the odd and even .fancy elements, I'd prefer a neater solution but it does work (certainly in Chrome/Linux). Demo at: http://jsbin.com/ezako3