How do I use the Modernizr classes?
I am new to modernization. I read some modernizr documentation and I wanted to install border: none
if the browser doesn't support CSS3 box-sizing: border-box
. I tried:
li { border-right: 1px solid #eee }
.css-boxsizing li { border: none }
But it didn't work. Can anyone suggest something?
source to share
In Modernizr, the supported features are added as a class name to the root element. After checking the list of classes http://modernizr.github.com/Modernizr/test/ I found the correct class name boxsizing
.boxsizing li { border: none }
In the default assembly, the class boxsizing
doesn't seem to be added. This can be manually added using Modernizr.addTest
:
// The first argument is the class name
Modernizr.addTest("boxsizing", function() {
return Modernizr.testAllProps("boxSizing") && (document.documentMode === undefined || document.documentMode > 7);
});
Demo: http://jsfiddle.net/eGjwZ/
source to share