I’ve looked at Modernizr a couple of times in the past but couldn’t really see the usefulness of it as I thought if a browser didn’t support a CSS feature, it just would skip over it, but your examples have illustrated how you can have more fine grained control. I’ll have to take another closer look for future projects.
Copy & paste the code below to embed this comment.
Ritz
Faruk, the raw sample page and its simple css styled page (the first two examples) render well enough in IE 5 on the Mac. However, examples after that (sample-medium.html and forward) crash. I did isolate it down to the @font-face css rule for the sample-medium.html page so I’m going to guess the same issue applies to the other example. If it provides consolation, http://www.zeldman.com/ use of custom fonts also makes IE 5 crash.
Copy & paste the code below to embed this comment.
Matth
Great article. The control freak side of me is intrigued by the power of Modernizr to control the small details of the user experience in various browsers.
But it all reminds me of browser sniffing in 2002. we added chunks of code that were essentially hacks, and were rendered useless in short time as MS browsers slowly began adhering to standards. Will Modernizr be the same when IE8 or IE9 comes out, and presumably won’t require a shiv for HTML5, and will render CSS3 correctly (again, presumably.)
Earlier in the article, you reminded us that “Websites don’t need to look exactly the same in every browser.” Having no interest in repeating the ugly kludges of a decade ago, I will stick to that mantra: “Websites don’t need to look exactly the same in every browser,” and revel in the simplicity and beauty of standards-compliant code.
Well I’ll leave the title, but after a bit of poking and prodding I’ve changed my stance…
Originally I was going to ask about the increase in size of the CSS, download times of the ttf, and overall heavier load on our servers, but here’s the stats (Chrome 5.0):
Plane Jane version (v1): 3kb
Styled, square corners: 6.9kb
Styled, round corners, font: 8.33kb
Finished site, animation, font: 9.03kb (though on one fresh load the fonts came through at 88kb – not sure what happened there. Anyone have thoughts?)
So an extra 6kb for a font, nicely rounded corners and a drop shadow – not bad at all! The sprite you’d need for that as well as the CSS positioning would account for at least that much, but be a way bigger P.I.T.A.!
The only problem of course is when a browser doesn’t support, say for instance, the rounded corners, you would have to use CSS sprites or the like anyways – if you have that client who must have things perfect. So this may not be an option for a little while. However, as the link in the article so convincingly pointed out, websites don’t have to look the same in all browsers :)
To Seanh: fonts are typically between 50 and 200 kb, but that’s a tradeoff a lot of people will want to make because richer typography is an important part of branding. Having the font in a text format that can be adjusted and reused easily is tremendously valuable. However, font files are typically cached after the first load, so from then on it will be much faster.
As for the rest, it’s as you say: only IF the client must have things perfect. But guess what: if they do, you can charge them more money because it means more time and more work. So, you either stand to make more, or you won’t have to. Win-win for everyone except people stuck on older browsers (who you can at least cater to nicely with Modernizr).
Copy & paste the code below to embed this comment.
Binyamin
Latest Modernizr does not render any CSS3 for IE6 and IE7.
For example http://www.alistapart.com/d/taking-advantage-of-html5-and-css3-with-modernizr/sample-advanced.html CSS3 is not working on IE6 and IE7 at all.
Does anyone have some solution?
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 ArticleJohn Faulds
I’ve looked at Modernizr a couple of times in the past but couldn’t really see the usefulness of it as I thought if a browser didn’t support a CSS feature, it just would skip over it, but your examples have illustrated how you can have more fine grained control. I’ll have to take another closer look for future projects.
Ritz
Faruk, the raw sample page and its simple css styled page (the first two examples) render well enough in IE 5 on the Mac. However, examples after that (sample-medium.html and forward) crash. I did isolate it down to the @font-face css rule for the sample-medium.html page so I’m going to guess the same issue applies to the other example. If it provides consolation, http://www.zeldman.com/ use of custom fonts also makes IE 5 crash.
tintation
Seriously… These are some real, quality, unique, and useful articles you got here, and this tool sounds very helpful, thanks a lot.
Faruk Ateş
So it would appear that IE5/mac crashes when using @font-face. I guess that’s one way to eradicate any last remnants of use that browser has.
Thanks for reporting, Ritz.
Matth
Great article. The control freak side of me is intrigued by the power of Modernizr to control the small details of the user experience in various browsers.
But it all reminds me of browser sniffing in 2002. we added chunks of code that were essentially hacks, and were rendered useless in short time as MS browsers slowly began adhering to standards. Will Modernizr be the same when IE8 or IE9 comes out, and presumably won’t require a shiv for HTML5, and will render CSS3 correctly (again, presumably.)
Earlier in the article, you reminded us that “Websites don’t need to look exactly the same in every browser.” Having no interest in repeating the ugly kludges of a decade ago, I will stick to that mantra: “Websites don’t need to look exactly the same in every browser,” and revel in the simplicity and beauty of standards-compliant code.
Thank you for the thought-provoking article.
billcornor
I guess Internet Explorer is our adopted child.
But the example is not working for IE (I’ve tried on 6, 7 and 8)
dreamtime214
This is a great tool to use! I have a site that could directly benefit from Modernizr. Thanks!
seanh
Well I’ll leave the title, but after a bit of poking and prodding I’ve changed my stance…
Originally I was going to ask about the increase in size of the CSS, download times of the ttf, and overall heavier load on our servers, but here’s the stats (Chrome 5.0):
Plane Jane version (v1): 3kb
Styled, square corners: 6.9kb
Styled, round corners, font: 8.33kb
Finished site, animation, font: 9.03kb (though on one fresh load the fonts came through at 88kb – not sure what happened there. Anyone have thoughts?)
So an extra 6kb for a font, nicely rounded corners and a drop shadow – not bad at all! The sprite you’d need for that as well as the CSS positioning would account for at least that much, but be a way bigger P.I.T.A.!
The only problem of course is when a browser doesn’t support, say for instance, the rounded corners, you would have to use CSS sprites or the like anyways – if you have that client who must have things perfect. So this may not be an option for a little while. However, as the link in the article so convincingly pointed out, websites don’t have to look the same in all browsers :)
Faruk Ateş
To Seanh: fonts are typically between 50 and 200 kb, but that’s a tradeoff a lot of people will want to make because richer typography is an important part of branding. Having the font in a text format that can be adjusted and reused easily is tremendously valuable. However, font files are typically cached after the first load, so from then on it will be much faster.
As for the rest, it’s as you say: only IF the client must have things perfect. But guess what: if they do, you can charge them more money because it means more time and more work. So, you either stand to make more, or you won’t have to. Win-win for everyone except people stuck on older browsers (who you can at least cater to nicely with Modernizr).
Binyamin
Latest Modernizr does not render any CSS3 for IE6 and IE7.
For example http://www.alistapart.com/d/taking-advantage-of-html5-and-css3-with-modernizr/sample-advanced.html CSS3 is not working on IE6 and IE7 at all.
Does anyone have some solution?
leepowell
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.