CODEWITHSUNDEEP
css
Hello World
Hello World

Reputation: 1129

display elements in css3 only?

I'm creating a css3-heavy site and want to have a little message for people who are using older browsers, as well as alternate versions of the content. I'm wondering if I could do something like:

#old {display:-webkit-none;}
#new {display:none; display:-webkit-block;}

so that the #old div will only be visible in non-css3 compatible browsers.

Upvotes: 0

Views: 65

Answers (2)

kevinAlbs
kevinAlbs

Reputation: 1124

Well, CSS3 compatibility is different in each browser. It isn't a black and white thing like some browsers support CSS3 and some don't. Most browsers at least implement some features of CSS3 but some more than others, and I'm fairly certain none support all features of CSS3. You can check which browsers support which features like so: http://caniuse.com/

You can use Modernizr http://modernizr.com/ to use different styles based on what CSS3 features the browser supports.

For example, if you wanted to show a message on browsers that don't support border radius:

.no-borderradius #old
{
    display: block;
}

Upvotes: 2

sandeep
sandeep

Reputation: 92793

You can use IE conditional comments. Write like this:

<!--[if IE]>
  <style>
    #old {display:none;}
  </style>
<![endif]-->

For more brief read this http://www.quirksmode.org/css/condcom.html

Upvotes: 1

Related Questions