How to use Modernizr classes?

问题

I am new to modernizr. I read some documentation on modernizr, and I wanted to set border: none if browser doesn't support CSS3 box-sizing: border-box. I tried:

li { border-right: 1px solid #eee }
.css-boxsizing li { border: none }

But it didnt work out. Can any1 suggest something?

回答1:

In Modernizr, supported features are added as a class name to the root element. After inspecting the list of classes at http://modernizr.github.com/Modernizr/test/, I've found the correct class name to be boxsizing:

.boxsizing li { border: none }

In the default build, the boxsizing class seems not to be added. This can manually be 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/

来源：https://stackoverflow.com/questions/10057660/how-to-use-modernizr-classes