Why use Modernizr if browsers ignore CSS they don't understand?

Question

I've been working with Modernizr and it is a wonderful resource, just a great project. However, the way I've been using it is:

• Design with baseline (IE) CSS
• Enhance with CSS3 effects for advanced browsers

Unless I was going to completely replace the styles based on behavior, why shouldn't I just add styles such as box shadows, gradients and border radii to the stylesheet? If the browser doesn't understand a rule, it will just ignore it, correct? And if JavaScript is off, I can't use it anyway.

Should I be using the above method in the typical case, and Modernizr for advanced cases? Or is there something wrong with relying on browsers to ignore what they don't understand?

Answer 1

You can use (html 5) elements that some browsers do not support yet. Also you can specify fallback styling.

A lot of browsers create their own CSS rules for things like text-transform. With Modernizr you can write one rule and Modernizr makes it happen for multiple browsers.

I think it's just convenience.

Answer 2

You're totally right that older browsers completely disregard much of what's in CSS3.

Because of that, I do my css3 in my basic selectors.. but often make use of the modernizr's no-feature classes to handle the older browser case:

div.box { 
         height:50px; 
         -moz-box-shadow: 3px 3px 5px #555; 
         -webkit-box-shadow: 3px 3px 5px #555; }

div.box span.fakeshadow { 
         display:none; 
}

.no-boxshadow div.box span.fakeshadow { 
         display:block; background: url('fakeshadowbg.png'); 
}

I hope that makes it more clear.