CODEWITHSUNDEEP
css
Kevin Sylvestre
Kevin Sylvestre

Reputation: 38032

Remove Style if CSS3 Support

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;
}

Upvotes: 4

Views: 894

Answers (4)

David Thomas
David Thomas

Reputation: 253318

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

Upvotes: 1

STW
STW

Reputation: 46376

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.

Upvotes: 1

Harmen
Harmen

Reputation: 22438

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.

Upvotes: 3

Ben S
Ben S

Reputation: 69342

CSS doesn't do conditionals. In any version.

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

Upvotes: 2

Related Questions