Another awesome feature of Modernizr is Modernizr's classes
When Modernizr detected browser feature, it also added classes to the root element ()
Modernizr adds class for each feature when it is supported, and adding it with a no- prefix when it is not (ex. video or .no-video)
Let's get to the example for a better picture...
Suppose that I want to apply some border-radius which is CSS3 feature
However, I also want my website to appear the same on older browsers that do not support CSS3 as well (ex. IE8 or below)
Here is my webpage that already have a div with border-radius applied
If I switch the browser mode to IE8, you'll see that border-radius is gone
Let's look at the code...
Here we got a simple HTML with a div
Next, I'm going to add Modernizr to this page
Pick the border-radius at the Modernizr download page
and make sure "Add CSS classes" was checked before you click Build!
save .js file and include it to your page
OK, now Modernizr is ready. Let's see how it works!
I'll change browser mode back to IE10
from the DOM Explorer, you'll see that "borderradius" class was added to html element. This means border-radius is supported by the browser
I'll change the browser mode back to IE8
Now, the class was changed to "no-borderradius" which means border-radius is not supported
So you know that our page will now have two states, you can write CSS to cover both cases
The first case is when border-radius is supported
Another is when border-radius is not supported.
We'll have to use rounded corner rectangular image as background instead
Now, everything is ready! Let's see them in action!
OK, IE10 is working as it should. What about IE8?
Yep!
You can see that our CSS rule for each case are working perfectly
Thanks for watching! Subscribe for more tips and tutorials :)