CODEWITHSUNDEEP
csscross-browsermodernizr
FoxKllD
FoxKllD

Reputation: 1051

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?

Upvotes: 3

Views: 4551

Answers (1)

Rob W
Rob W

Reputation: 349032

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/

Upvotes: 3

Related Questions