Taking Advantage of HTML5 and CSS3 with Modernizr

by Faruk Ateş

30 Reader Comments

Back to the Article
  1. This is a wonderful article. It has excited me greatly to jump on the HTML5 bandwagon. I’ve been hesitant with wanting to start using HTML5 and CSS3 for this exact reason. I don’t like having to play with CSS hacks and alternate stylesheets for detecting what kind of a browser the person is using. This will save a lot of hassle and using the term “gracefully degrading” is spot on. Thanks so much for the post.

    Copy & paste the code below to embed this comment.
  2. Is it just me or is anyone else seeing the page flash every time it loads? Kind of annoying no?

    Copy & paste the code below to embed this comment.
  3. I hate to be the one to say this, but I do take issue with the font choice. “Beautiful ES” looks, smells, walks and talks like a vector-for-vector rip of Bickham Script, a typeface that isn’t free.

    This is not uncommon on Fontsquirrel, sadly, and it does not improve the state of web fonts if piracy (or at least blatant copying) is condoned by the sites that help fuel the movement. I also realise this is not the right podium, perhaps, but it is a matter that will become more and more relevant as people optimise their typefaces for the screen.

    I’m not faulting you, Faruk. I love this article. Especially the part about the @font-face rule, to set a different font size depending on the ability to show a different font. It’s supremely useful. In light of such generous qualities, using a rip-off is a blemish I think it could do without.

    (Reasons I think it’s a rip-off: vectors are one-for-one overlay-checked rips; if you have the implied drawing skills to make this TrueType font work, how come the metrics are so horribly off? It doesn’t compute. It’s a rip.)

    Copy & paste the code below to embed this comment.
  4. @*comet*: I’m happy to hear that! This is precisely the goal of Modernizr, to make starting with HTML5 and CSS3 more tenable.

    *catchmyfame*:  what page are you talking about, the article or one of the sample pages? If you mean the sample page with the font-face inclusion, that could well be because the browser loads fonts asynchronously and thus may start rendering the page and change it once the font is loaded. It’s not ideal, but browsers have opted this mechanic to prevent pages from feeling like they load really slowly, hanging on a font to download first.

    @*Rob*: I didn’t know that, and that is a shame. I merely picked “Beautiful ES” because it is both a unique typeface with no comparable equivalent that comes pre-installed on people’s systems, and because it’s such a size distortion (needing a very different font-size setting to appear similar in size to fallback fonts).

    It is indeed unhelpful with this being commonplace (on Fontsquirrel or just the web itself), but unless there’s an easy way for people to know or find out about these things, it’s hard to combat. I’m no type aficionado (I appreciate good type design, but I don’t have a vast knowledge of it), and so I wasn’t aware that “Beautiful ES” was a rip. That is unfortunate.

    Note to future commentators:

    Some small notes on the Modernizr use in this article: it is limited to introducing the basics of fine-grained control over the look & feel of a website, and examples were kept rudimentary and clean for simplicity’s sake. For a more robust and complete font-face implementation method, I recommend you read “Bulletproof font-face syntax”:http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ by Paul Irish, who is also the biggest contributor to Modernizr these days.

    Modernizr is also particularly useful for handling fallbacks to HTML5 features in JavaScript, but the scope of the article just couldn’t support going into depth on that at all. Perhaps that part will be an article of its own one day.

    Copy & paste the code below to embed this comment.
  5. I guess Internet Explorer is our adopted child.
    But the example is not working for IE (I’ve tried on 6, 7 and 8)
    And @font thing is fully supported in IE since version 4!
    So… modernizr isn’t such a good library, and we, as front end developers, have still some work to do :)

    Copy & paste the code below to embed this comment.
  6. It’s as simple as that. My customers can’t afford to pay me to fix browser incompatibilities. They all support tables … so tables it is. When they all support CSS columns, then I’ll use them.

    I’m not a designer … can you tell? I’m a developer who’s interested in functionality with merely adequate aesthetics. My customers hire me to create complex back-end workflow solutions. If they want pretty too then we have to hire the pretty.

    But I keep reading these articles and hoping things will improve. When I can create equal height columns in CSS simply (meaning no floats and huge negative margins hacks) then I’ll stop using tables and start using CSS for this.

    Peace,

    Rob:-]

    Copy & paste the code below to embed this comment.
  7. To tomasdev: the custom font not working in Internet Explorer is correct; the examples have been kept super simple to keep the complexity of the article down. As such, the example code used to do the font excludes an .eot font, thus it won’t work in IE.

    Read the aforelinked “Bulletproof font-face syntax”:http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ to get the full details on working with fonts and full cross-browser compatibility. It’s an article all by itself!

    To RobShaver: well, you can use CSS columns now. IE doesn’t support them, but the latest Firefox does, so do Chrome and Webkit (and latest Opera if you care about that). Using tables for layout is hurting not just yourself but also your customers, though, so if you’re more a back-end guy perhaps what they need is to pay at least enough for you to work with a front-end developer.

    Copy & paste the code below to embed this comment.
  8. Once again, another excellent article. Also, I have been watching and waiting on Modernizr for a while waiting specifically for SVG detection support. So, to find a new article on my favorite magazine talking specifically about Modernizr along with news about version 1.5? I could not be more delighted.

    For my own personal projects I have become obsessed with HTML5, CSS3 and using them in conjunction with progressive enhancement. I’ve been daydreaming about how awesome SVG implementation could be if I could control it with something like Modernizr. So, thank you for this article!

    On an aside, your example page causes Mac IE5 to crash. Not that I support it or expect others to do so but just fyi.

    Cheers!

    Copy & paste the code below to embed this comment.
  9. To Ritz: which example page in particular causes the crash? Because as much as we doubt many people in the world at all are still supporting IE5/Mac, making it crash is perhaps worth investigating.

    Copy & paste the code below to embed this comment.
  10. As everyone else has said, what a great article – this looks like a really useful way of getting all these HTML5+ features onto our sites with minimum pain. Thanks.

    A tangential note: Chrome’s aliasing on transformed images is just plain ugly, but nicely anti-aliased on Firefox. Also, the first time I loaded the sample page on Firefox it was rendering as if it didn’t have @font-face, even though it showed up in the list of features. A quick F5 fixed that though.

    Copy & paste the code below to embed this comment.
  11. 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.
  12. 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.
  13. Seriously… These are some real, quality, unique, and useful articles you got here, and this tool sounds very helpful, thanks a lot.

    Copy & paste the code below to embed this comment.
  14. 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.

    Copy & paste the code below to embed this comment.
  15. 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.

    Copy & paste the code below to embed this comment.
  16. I guess Internet Explorer is our adopted child.
    But the example is not working for IE (I’ve tried on 6, 7 and 8)

    Copy & paste the code below to embed this comment.
  17. This is a great tool to use! I have a site that could directly benefit from Modernizr. Thanks!

    Copy & paste the code below to embed this comment.
  18. 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 :)

    Copy & paste the code below to embed this comment.
  19. 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.
  20. 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?

    Copy & paste the code below to embed this comment.
  21. 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.)

    Copy & paste the code below to embed this comment.
  22. 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)

    Copy & paste the code below to embed this comment.
  23. 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.
  24. 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?

    Copy & paste the code below to embed this comment.
  25. 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

    Copy & paste the code below to embed this comment.
  26. This wonderful article has excited me greatly to jump on the HTML5 bandwagon. Thank you Faruk, from Turkey ?

    Copy & paste the code below to embed this comment.
  27. I’ve been using an HTML5 boilertamplate powered by modernizer recently. Great way to future proof your websites

    Copy & paste the code below to embed this comment.
  28. 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!

    Copy & paste the code below to embed this comment.
  29. 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.

    Copy & paste the code below to embed this comment.
  30. Great article! I am eager to try modernizr within future websites.

    Copy & paste the code below to embed this comment.