To Binyamin: Modernizr doesn’t enable CSS3 support in any browser, it only detects IF the browser supports (some of) these things. Since IE6 & 7 don’t support anything in CSS3, their results are false.
However, a new library, CSS3PIE, does add some functionality to IE6 & 7: “CSS3 Pie”:http://css3pie.com/
To leepowell: classes on the html element are valid under HTML5. Use an HTML5 Doctype and you’ll be fine, if you really want to validate. :-)
(note: validation is not anywhere near as important as things working properly, and classes on the html element do work in every browser no matter the doctype)
Have never used Modernizr before, and your examples have illustrated how you can have more fine grained control. I’ll have to take a look for future projects.
Copy & paste the code below to embed this comment.
Rob W.
This is a great tool, and I’m giving it a try in my next project in conjunction with HTML5 Boilerplate.
One question I have is why specify both class and no-class? When writing css I would rather code for the future and specify fallbacks (i.e. only use the .js to specify no-classes), or on more conservative projects code for reliability and specify progression (use the .js to specify only working classes).
Maybe I am being a neat-freak and focusing more on human readable source code than makes sense, but is there a reasoning behind including both? Would you consider including a config in future releases to specify including class, no-class, or both?
Good writer!and I’ve translated it into Chinese in the following address:
http://osmn00.com/blog/front-end/taking-advantage-of-html5-and-css3-with-modernizr.html
that is amazing, i just came across modernizr and thought id read a bit more about it, not only is your article top notch, but modernizr is complete class!
30 Reader Comments
Back to the Articleleepowell
Great article. I’m keen to try Modernizer myself.
However, I know it’s common practice now to place classes on the HTML element. But doesn’t this make our code invalidate?
Shouldn’t elements modified through javascript still be able to validate? (Upon asking Zeldman over Twitter, his answer was yes.)
Faruk Ateş
To Binyamin: Modernizr doesn’t enable CSS3 support in any browser, it only detects IF the browser supports (some of) these things. Since IE6 & 7 don’t support anything in CSS3, their results are false.
However, a new library, CSS3PIE, does add some functionality to IE6 & 7: “CSS3 Pie”:http://css3pie.com/
To leepowell: classes on the
htmlelement are valid under HTML5. Use an HTML5 Doctype and you’ll be fine, if you really want to validate. :-)(note: validation is not anywhere near as important as things working properly, and classes on the
htmlelement do work in every browser no matter the doctype)Lisa
Have never used Modernizr before, and your examples have illustrated how you can have more fine grained control. I’ll have to take a look for future projects.
Rob W.
This is a great tool, and I’m giving it a try in my next project in conjunction with HTML5 Boilerplate.
One question I have is why specify both class and no-class? When writing css I would rather code for the future and specify fallbacks (i.e. only use the .js to specify no-classes), or on more conservative projects code for reliability and specify progression (use the .js to specify only working classes).
Maybe I am being a neat-freak and focusing more on human readable source code than makes sense, but is there a reasoning behind including both? Would you consider including a config in future releases to specify including class, no-class, or both?
osmn00
Good writer!and I’ve translated it into Chinese in the following address:
http://osmn00.com/blog/front-end/taking-advantage-of-html5-and-css3-with-modernizr.html
Saç kaynak
This wonderful article has excited me greatly to jump on the HTML5 bandwagon. Thank you Faruk, from Turkey ?
GlobuleDesign
I’ve been using an HTML5 boilertamplate powered by modernizer recently. Great way to future proof your websites
aliengfx
that is amazing, i just came across modernizr and thought id read a bit more about it, not only is your article top notch, but modernizr is complete class!
kijani
First of all, thank you for the article. Very well written with a straight forward (progression) example.
Can you explain the illustration at the top of the article? I really don’t get what it has to do with the article.
reelwebdesign
Great article! I am eager to try modernizr within future websites.