How to use Modernizr

10 November 2009, in CSS, HTML, Tools | 134 comments »

There is a tool that came to make our lives as progressive web designers a bit easier: Modernizr. In this short tutorial, learn how to apply this handy script to maximum effect on your sites.

An overview

Although CSS3’s use has been increasing among web designers, browser support for some of its features is still inexistent.

Lately, I’ve been using Modernizr more and more to cater for those browsers that don’t support specific CSS3 properties—for example, on my site—, and it makes the development much easier because I know I’m providing these lesser browsers with an alternative experience, rather than just ignoring them.

Bear in mind (and this is even splashed on Modernizr’s front page), that Modernizr doesn’t actually magically enable these properties for browsers that don’t support them. It just tells the page whether that feature is supported on the browser the visitor is using or not.

How it works

To install Modernizr, download the file from this page. Then, on your site’s head tag, add a link to the file. For example:

<script src="js/modernizr-1.0.min.js"></script>

The second step is to include on your html tag a class of “no-js”:

<html class="no-js">

Why add this tag?
Because that will be the default state of the page. If JavaScript (js) isn’t on, then Modernizr won’t work at all (and probably other features of your site won’t work either…), so it’s good that we have a fallback for that case.

If JavaScript is indeed enabled, once that page is loaded on the browser, that class will be replaced dynamically and it may look something like this:

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

What does this mean? 
Let’s take a look, shall we?

In this case, I opened the page on Firefox 3.5. This browser (sadly) doesn’t support multiple backgrounds, CSS gradients or CSS transforms, therefore, Modernizr outputs “no-multipebgs“, “no-cssgradients” and “no-csstransforms“. On the other hand, it does support canvas and border-radius, which explains “canvas” and “borderradius“. Etc.

How to use this (precious) information?

So what can you actually do with this? How does that help you in any way?, you might ask.

Let’s look at an example:

Multiple backgrounds

Your site’s background has been carefully built and you’re using the multiple background technique to make it simpler (and faster!) to code. Your CSS may look like this:

#nice {
	background: url(background-one.png) top left repeat-x,
	url(background-two.png) bottom left repeat-x;
}

And a nice browser will render this:

modernizr-safari

Using Modernizr, your CSS will look instead like this:

#nice {
	background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
	background: url(background-one.png) top left repeat-x,
	url(background-two.png) bottom left repeat-x;
}

This is what your visitors will get, depending on which browser they have:

modernizr-safari modernizr-opera

This is a very simplified use of Modernizr, but hopefully it’s enough to show you what you can do with it.

HTML5

Modernizr also allows you to use the new HTML5 elementsheader, hgroup, section, footer, video, etc.—and style them.

This doesn’t mean that some of these elements will start working on Internet Explorer, but that you can style them and that IE will understand them and not ignore them.

JavaScript

You can also detect features using Modernizr in your JavaScript, using this syntax:

if (Modernizr.geolocation) {
}

Conclusion

I hope that I managed to explain the usefulness of Modernizr. While we can’t rely on the fact that browsers support the full spectrum of features we want to use, this is the best tool out there to provide for both worlds.

Do you use Modernizr too? How? If not, how do you deal with some browsers not supporting some features (assuming you are using the latest CSS3 techniques)?

There are 134 comments:

  1. Pete says:

    Modernizr is certainly a useful tool. But it isn’t always needed, depending on what you’re trying to do.

    The simple multiple backgrounds effect in your post for example can be achieved without it. In one css rule you can declare the widely supported CSS2.1 single image background style, then directly afterward declare the advanced CSS3 rule with multiple images.

    Like this:

    #nice {
    background: url(background-one.png) top left repeat-x;
    background: url(background-one.png) top left repeat-x,
    url(background-two.png) bottom left repeat-x;
    }

    Older browsers will not understand the second statement and so ignore it, CSS3 supporting browsers will use the cascade and apply the second rule. Your page is progressively enhanced and no js is required.

    • Yaili says:

      That is very true, in fact that is what I do on my own website for multiple backgrounds :)

      But the point here is to show how Modernizr is used with a simple example.

      Thanks for your input though.

      • Ashish says:

        Yaili,

        lets use this trick http://css3pie.com

        • cHao says:

          PIE is kinda spiffy, considering…but it’s no replacement for native CSS support. If you use it on a CSS3-heavy site, it can bring IE to a crawl. It works by attaching behaviors and inserting VML elements for all the stuff IE doesn’t know how to render…and the more of each of those you have, the worse it gets. I’ve seen it on a big page…the slowdown was unbearable in IE 6-8, and the browser’s behavior started getting wacky.

    • wimal says:

      Pete, I am glad u had mentioned a way to use mulitple backgrounds without js. But I want to know wheather we can use the same technique(without js)for box shadow and rounded-corners. I mean to write it in a way so that browsers that dont support it will ignore it.

      Thanx a lot

      • Yaili says:

        Hi wimal,

        Browsers that don’t support box-shadow and rounded corners will ignore them already, no need for an extra script for that.

        • chandan says:

          i do this without js multiple bg on ie7, 8, 9 and all browsers

          thanks for thouhts

          background: url(images/2.jpg) center top no-repeat,

          url(images/1_small.jpg) bottom fixed repeat-x;
          url(images/2_small.jpg) center left repeat-x,
          url(images/2_small.jpg) bottom right no-repeat;

          filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=’1_small.jpg’, sizingMethod=’crop’); /* IE6-7 */
          -ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/3_small.jpg’, sizingMethod=’crop’)”; /* IE7 only */

          thanks for all

        • Chandan Kumar says:

          yalli use for round corner
          in i.e

          behavior:url (border-radius.htc);
          file

    • KarSho says:

      Nice one. It’s excitement.

  2. Sunny Singh says:

    Very cool and I found myself needing something like this sometimes, but I don’t like how you have to add a class to the HTML tag. Does that even validate? I would really rather add one to the body, and what modernizer could do is simply add the “js” tag and that’s it.

    Also once CSS3 becomes more widely accepted and someday even in IE, you will have to do a lot of fixing up in your stylesheets.

    • Okonomiyaki3000 says:

      If you want to avoid the need to update your stylesheets when CSS3 becomes standard and widespread, the solution is simple. Don’t use any CSS3 now or then.

      Personally, I see no reason not to use it now.

    • Marco says:

      The first thing I did when I saw the html-tag class was to check whether or not this is vaild. If You try to use such a class while havin a HTML or XHTML Doctype it won’t validate. But if You use the HMTL5 Doctype declaration there is issue on that. AND if You have a look into the HTML5 secification You will find that the class attribute is allowed on the html element.

  3. Modernizr works without adding the no-js class to your HTML tag– then you have no fallback fro JS being unavaliable or disabled, but you can still use its many other features. For instance, I’m using it on a site now to detect support for @font-face and provide a Cufon fallback for browsers that don’t support @font-face.

  4. Zachariah says:

    The @font-face and cufon fallback was exactly what I envisioned. Also, I have in the past used javascript (jquery) to add extra div-wraps with different backgrounds for background and pseudo image border effects; with this I could make that code conditional (in fact, a lot of styling javascript hacks could be conditional).

  5. Alfy says:

    Post very useful and easy to understand. But if I wanted apply Modernizr to the tag h1 ?

    Ex.
    if it is supported the shadow show it, otherwise not show the shadow .

  6. Vali says:

    Good to point out that after activating Modernizr on your page, if you view your browser source code you don’t see the new classes that Modernizr has added – but they are there! I spent an hour or two trying to ‘fix’ this when all the time it was working.

    So have confidence and go ahead and try making use of these new classes to define what is displayed for HTML5 ready browsers and what’s not.

    Vali

    • reve says:

      when you view the source, most browsers show you the source sent from the server, they wont show you the current source that may have been changed by javascript/ajax.

      firefox dev toolbar allows you to see the current source.

  7. The classes are visible when you view source using Webkit’s Web Inspector (included in the Safari’s “Develop” menu, for instance) or Firebug.

  8. Vali says:

    Thanks John, forgot to mention that’s how I spotted the classes!

    V

  9. Daniël says:

    How do I style the html5 elements to work with IE?

  10. To style HTML elements for IE you just need to code them like you normally do then open your car door, stick your had in and close it as hard as you can. :)

  11. Paul says:

    Thanks for this – very nicely written & should be part of Modernizr’s standard documentation.

  12. Pallavi says:

    I added Modernizr’s in my html5 page but its not work in IE.

    So Sad :(

  13. michel says:

    Great getting started!
    realy missed this on the modernizer site itself…

    Thanks very much!

  14. Tarun says:

    If you only want to use modernizr to deduct HTML5 elements in old IE browser, the you can do it by simple java script are below:

    document.createElement(‘header’);
    document.createElement(‘footer’);
    document.createElement(‘section’);
    document.createElement(‘aside’);
    document.createElement(‘nav’);
    document.createElement(‘article’);
    document.createElement(‘hgroup’);

    for CSS3 like multiple backgrounds, shadow, round corner etc. already mention above in comments by other designers.

    Ya but some cases modernizr is very useful, for example i have white background and a div have white background with shadow. In that case it will look good in browsers support css3 but in other it will match your div with background. Now i want to separate it with border for the browsers not support css3 in that case modernizr is very helpful

  15. Beglinger says:

    Works like a charm! Changed my small personal page into HTML5 now (Using modernizr 2.0).

    When i take a look at the source of Modernizr.com, i see:

    What about the id? Is there some reason to use it?

  16. Beglinger says:

    Sorry, the copy paste went wrong cause i used html in my command i suppose. Another try:
    html lang=”en” dir=”ltr” id=”modernizrcom” class=”no-js”

  17. chethan says:

    Hi guys,

    i have one doubt…
    correct me if i was wrong..

    does this Modernizr will work on html 4 also…??? can we use Modernizr in site which is not done in HTML5/Css3…???

    • Tarun says:

      Why you want to use Modernizr if you not need CSS3 and HTML5?

      • chethan says:

        Hey Tarun,

        Correct me if i am wrong….

        i just attended Microsoft event their i got to know abt Modernizr… and also i saw the how the page will look like in different versions of IE.

        I have some clients. We are facing some Browser compatiblity issues… so i thought of using Modernizr….

  18. Tarun says:

    Hi Chethan,

    Modernizer is for only to support HTML5 tag in IE older browser, to apply CSS according to condition (if browser support css3 shadow then or if not then…, and for some HTML5 DOM like videos(display video according to browsers support), canvas etc.

    For different cross browsers solution you should use css reset and there are some tricks too, like set ‘zoom: 1;’ for tags for IE, define declaration fully (IE not automatically support every thing like other browsers for example. If you define float: left; all browser’s display div’s width according to content. But in IE div will display 100% width of browser)

    So there are some logic to use css for cross-browsers and you should solve that problem with that. like CSS reset, CSS hacks, use jquery for selectors (like ever, odd)etc.

  19. Jed says:

    hello guys! I started using modernizr but the text-shadow is still not working on IE9! please help! I installed moderinzr 2 correct within the head tags, please help!

    • Tarun says:

      hye buddy,

      As i sent comment before modernizr not do any magic for browsers if they do not support any property (text-shadow, round corner etc.). It’s just a javascript library to help us to apply condition that if browser support any property then do something, and if not then something else.

      • Jed says:

        ohh i see.. oh men!.. ok then, thanks! i better do something else then.. (T_T)

        • Tarun says:

          buddy if you like to support css3 for IE browsers then you can see some other java script library like http://css3pie.com/

          But it’s create gradient’s shadow etc. by java script that’s why it’s slow in IE browsers.

          So in my opinion you can leave browser’s not support CSS3. Because in my understanding to load website faster is more important then display CSS3 property in non supporting browsers. At least they do have they original formatting(User can read content too in non-css supporting browsers)

          • Jed says:

            yah, I already use that, but im having trouble also using that library.. (T_T) its still not working on me also.. i tried to read also in their issues using their library.. but still no luck.. :(

  20. Tarun says:

    Ok got it, In that case you have to use modernizr for example.

    .yourclass {
    same property other then textshadow(text shadow not be there
    }

    .textshadow .yourclass {
    properties you are using
    }

    All other latest browser will work fine other then IE.

    you can also try

    .yourclass {
    same property you are using now
    }

    .no-textshadow {
    reset you text shadow to none
    }

    This is because if you define text shadow normally then IE9 not support is well, also i notice when you use it inside button then you button shadow will also not render because of textshadow.

    Actually IE browser is totally shit.

  21. Jed says:

    I got one question, why is it that modernizr claims itself that text-shadow is implemented on their library? i tried their customized js from their site, i saw on their options it has a text-shadow option, but still no luck.. yes its true.. IE sucks.. gave me a lot of headaches in cross-browser compatibilities

  22. Tarun says:

    read my comments i write before. Modernizr is use to fix HTML5 support in older browser and deduct whether any css3 property support by browser or not(drop shadow not supported in IE6) etc.

    They allow you to create classes apply according to support for browsers Like in your case

    .yourclass {
    //declarations goes here
    }

    .no-textshadow .yourclass {
    //declarations goes here
    }

    First class will execute if your browser support css3 textshadow and second if they not support.

    They claim they implement it because you can use there conditions for textshadow too.

    Also they support some html5 API read it’s help for more information.

    I am big fan of modernizr becase it’s very small in size and very useful some time

  23. Jed says:

    ohh.. ok then, oh yeah, where should I insert the script tag of modernizr? is it after the link reference of our css files?

  24. Tarun Sharma says:

    Ya you should and also add a class in html tag

    it’s not necessary but to make sure it will work fine you should do it.

  25. Jed says:

    Hey Buddy! have you tried using this slideshow? http://www.htmldrive.net/items/show/661/The-Most-Awesome-Image-Slider-with-jQuery-and-CSS3

    If you tried it, then I got one question for this kind of slideshow, i have included the JQ=jQuery.noConflict(true) and changed all the $ and jQuery to JQ. The slideshow works, but when I tried clicking on the arrows and thumbnails for more than 4 times,, the slideshow suddenly STOPS! There is a problem on the jQuery.conflict when I am not using that script, the slideshow works even a hundred clicks! Is there a way how to fix this kind of bug?

  26. Tarun Sharma says:

    i not use it till now. Normally i try to create plug-in myself for my site. But whenever i got time i will check your problem and send you solution.

    But if it’s conflicting problem then it may solve to wrap your code inside

    (function($){
    // Your code goes here
    })(jQuery);

  27. Jed says:

    ok thanks! but unfortunately, it is not in conflicting problem.. the slideshow works after using a jQuery.noconflict but the problem is, the slideshow stops after clicking a couple of times on the navigation arrows on the menus, anyway, thanks again! I’ll wait for your response about this bug. take care for now

  28. Ricardo says:

    Hello,

    Nice and interesting article to help us understand how and why to use Modernizr.

    However, this seems contradictory:

    “This doesn’t mean that some of these elements will start working on Internet Explorer, but that you can style them and that IE will understand them and not ignore them.”

    These two parts are what throws me off:

    First: “This doesn’t mean that some of these elements will start working on Internet Explorer.”

    Seconds: “…IE will understand them and not ignore them.”

    Doesn’t ‘understanding them and not ignoring them’ mean they would work? o_O

    If you could clarify, that’d be great.

    Thanks again.

    • Tarun Sharma says:

      Question: This doesn’t mean that some of there elements will start work on Internet Explorer

      Answer: There some of elements means css3 properties. For example box-shadow not working on IE6, IE7 old browser of opera and other old browsers too.

      In that case you can create 2 different CSS for that for example your background color of a box is matching by it’s parent’s background. You apply box-shadow in you box so if browser support css3 box-shadow then your box will look fine. But if it’s not then your box will match with it’s background (it will become hard to highlight your box from other content). So you can create a second class in which you can define border in box for the browsers not support CSS3 box-shadow to highlight that box.

      Modernizer help us to do that. We can create different classes one for css3 supporting browser and other if browser not support css3.

      div.yourclass {
      //declarations goes here
      }

      .no-boxshadow div.yourclass {
      //declarations goes here
      }

      Qestion: IE will understand them and not ignore them

      Answer: IE6, IE7, IE8 not support HTML5 elements like header, footer, article, aside etc. Mostly we use Google script to support that elements.

      Modernizr also work for that. If you are using modernizr then you not need to include any other script to support html5 tags. Any of script you use to support HTML5 tags will apply java script below for that:

      document.createElement(‘header’);
      document.createElement(‘footer’);
      document.createElement(‘section’);
      document.createElement(‘aside’);
      document.createElement(‘nav’);
      document.createElement(‘article’);
      document.createElement(‘hgroup’);

      It’s only say to browser that ‘Hye header is a element don’t ignore it’. And you have to set a CSS reset for all of them for example

      footer, header, aside, nav { display: block; }

      It’s because every element have some by default behavior for that, but your browser not support HTML5 element that’s mean they don’t have any by default CSS for it too. You browser Identifying your element by java-script. That’s why you also need to create a CSS for it’s default behavior.

  29. Aldin says:

    Very nice article Yaili! :-)

  30. Brian says:

    Hi guys,

    Really useful article and in principal I can see the idea behind it… saying that I reckon I’m missing some fundamentals here. I get that IE won’t work off the bat once you include modernizr in your code and that you need to include two sets of codes as per the comment above


    div.yourclass {
    //declarations goes here
    }

    .no-boxshadow div.yourclass {
    //declarations goes here
    }

    but what I don’t get is where do you get the “.no-boxshadow” code from??

    Am I supposed to be looking for a separate list of classes somewhere to incorporate into my style sheets?

    in my case, just as an example I am trying to incorporate border radius to a simple div and then display that in IE9.

    Cheers in advance guys :)

  31. Tarun Sharma says:

    hye Brian!

    It’s a simple trick. Modernizr add classes in your HTML tag. You can check it by firebug in your html tag.

    You can find class name for Modernizr manual or just use firebug to see it. It’s name is user friendly, so you will got idea which class is use for which purpose.

    if you need more clarification you can comment there or can email me at tarunsharma20@gmail.com

    also you can’t target any specific browser by modernizr. you need to use conditional comment in your HTML for IE or if you need i create a plugin for that help me to target any specific browser by css without using css hacks

  32. Edson says:

    Gosh! I didn’t know the meaning of “no-js” on the HTML tag.

    But what about that sibling class “oldie” in the HTML5 Boilerplate header? Tks!

    • Tarun Sharma says:

      You not need to use “no-js”

      I not suggest anyone HTML5 Boilerplate header. Instead of that if you like i can send you my own jQuery plugin.

      By use of this plugin you not need to define condition for different browsers of ie.

      And god thing is that you can define different CSS for almost all browser, browsers versions, iPod, iPad, iPhone etc.

      you just need to add prefix like .ie, ie6, iPad etc before your CSS

  33. POL says:

    Anyone know if background-size works well in all browsers?

    thanks!

  34. mascali says:

    About wordpress implementation: I need to manual code php files? and what?

    Thanks

  35. Ali says:

    I want to use Modernizr to enable png images on the IE6 Browser. I tried DD_Belated, that didn’t work.

    How do I enable this in my HTML5 document?

  36. Tarun Sharma says:

    Ali,

    have a look

    http://24ways.org/2007/supersleight-transparent-png-in-ie6

    It’s a most popular, and excellent article for IE6 PNG fix

  37. Ali says:

    Thank You Tarun!

    I checked out your Website, it’s really good. It helped me fix the problem :D

    Before I was temporarily using a separate css for IE6 to point to GIF versions of the image instead.

    Now I can get it to display the original png file.

    Thanks again mate.

    • Tarun Sharma says:

      No problem Ali :)

      Ya that website is really cool, but it’s not mine.

      And you not need to use different css for IE6 or any other browser at all :)

  38. Ashish says:

    The single question is, if A BROWSER doesn’t supports the CSS3, will never support by using modernizr.js too. And if A BROWSER is already supporting this, will keep supporting these CSS3 properties. then why to add modernizr.js?

    • Tarun Sharma says:

      Modernizr test conditions and apply CSS accordingly or return true or false in javascript for support of HTML5 APIs. It’s save your time to find that browser support any css or HTML5 API or not.

      It’s help in some conditions for example you want to apply shadow in a div have same color as background. It’ll look cool in browsers support box-shadow, But what about the browsers not support it?

      In that case you can use condition if your browser support box-shadow then apply shadow and if not then apply a border in it, so that at-least it not merge with your background

  39. Ashish says:

    @Tarun, thanks for you kind comment. But this all can be done by CSS as well, right? Then why we need to add the modernizr.js?

    I am still not getting this….

  40. Tarun Sharma says:

    @Ashish, I think you not read my comment carefully. Can you tell me how can you do same thing as in my example above by only CSS

    • Ashish says:

      I think we can do this using conditional CSS only. But you are right, this will be very lengthy. Thanks, I got it now a little bit…

      Will work more on it. thanks tarun!!

  41. Tarun Sharma says:

    No problem Ashish :)

    Go to modernizr official site and read it’s manual it’s really cool :)

    Now i can’t start any project without implement it. It’s very light weight you can include script according to your needs( not need to use all bundle like other APIs). Also they including some cool scripts like yapnope.js etc.

    And Best think is coding standard for example when you use in your script

    element {
    background: image // for browser not support gradients
    background: gradients // for browser not support gradient
    }

    with modernizr

    element {

    }

    .no-cssgradients element {
    background: image
    }

  42. Tarun Sharma says:

    element {
    background: image // for browser not support gradients
    background: gradients // for browser not support gradient
    }

    with modernizr a cool way and easy to understand when you or any other modify your CSS someday

    element {
    background: gradient
    }

    .no-cssgradients element {
    background: image
    }

  43. Bjarni Wark says:

    Hi There,

    When you say:

    ” Using Modernizr, your CSS will look instead like this:”

    Do you mean you need to write your css like that to make use of the Modernizr hooks or does Modernizr do it for you (sounds nice)?

    • Tarun says:

      Hye Bjarni Wark!!

      Modernizr is a javascript library. It’s major work to check your browser compatibility and add class in your tag accordingly for example:

      If your browser not support CSS gradients. Modernizr will add a class no-cssgradients in your tag.

      Now you need to define CSS according to that you not need to use a fallback deceleration( use background two time first if it’ll not support and second if support then overwrite first one). you can create two different classes as below:

      .class { } /* for browsers support gradient */
      .no-cssgradients .class { } /* for browsers not support gradient */

      So as you can see now it’s look more meaning full. Anyone or you can easily understand it if need to modify CSS in future.

      Modernizr also add Javascript for browsers not support HTML5 elements, now you can add any CSS and javascript in runtime because modernizr come with yepnope js. Also Modernizr help to reduce your code when you work on canvas, video, audio or any other HTML5 APIs

  44. Jay says:

    Any problems using multiple selectors?

    i.e
    .cssgradients #example1, #example2 {
    some css3 gradient;
    }
    .no-cssgradients #example1, #example 2 {
    background-image:url(‘url’);
    }

    Don’t know know why I can’t use multiple selectors.

  45. Tarun Sharma says:

    Hi Jay,

    You should have to use

    .cssgradients #example1,
    .cssgradients #example2 {
    some css3 gradient;
    }
    .no-cssgradients #example1,
    .no-cssgradients #example 2 {
    background-image:url(‘url’);
    }

    • Jay says:

      Hey, thanks. Worked nicely.

      Defering Modernizr loading a bad idea?

      • Tarun Sharma says:

        Jay,

        I not got what you want to ask? Can you make your question more clear?

        • Jay says:

          Thanks for replying. I was just wondering if putting Modernizr javascript in the footer, just before , is ok? I’m trying to defer as many javascripts to the bottom of the page to increase page loading speed. 

          it’s recommended to let browsers parse CSS file first and then javascipt last if possibble. But, in the case of Modernizer it seems logical to load before css or the browser won’t parse or know what to do with Modernizr selectors. I know very little javascipt or the internal workings of Modernizer.

  46. Jay says:

    Just before tag*

    For some reason that diidn’t post.

  47. Jay says:

    Body tag, sheesh. Sorry about this.

  48. Tarun Sharma says:

    I suggest to put it below CSS in head tag, Because it’s not very big in size also they have some functions need to call at beginning.

    For example, for IE old version Modernizr try to create HTML5 elements. Because IE do not have already. So you should put it in head.

  49. okan özkan says:

    Thanks for this – very nicely written & should be part of Modernizr’s standard documentation.

  50. David Kartuzinski says:

    Hi! Can you explain the difference between Modernizr and Selectivizr. It seems to me, that Modernizr would do everything that Selectivr does without the need to load two separate Javascript files? I am asking because I see that the people at 320 and Up, are using both in their framework and am trying to figure why? (I am still getting into this, but I am now trying to create my own base responsive template for wordpress and that is why I have this question.)
    Thanks. by the way, this is the best explanation of Modernizr I have seen!
    -DK

    • Tarun Sharma says:

      Hye David!!

      Both libraries are totally different. Selectivizr use to support selectors for old browsers, and Modernizr use for HTML5 and CSS3.

      Selectivizr use to support tags for example.

      #something > div:nth-child(2n) {
      }

      Now as you may know ‘>’ and ‘nth-child’ not support in IE6, but by Selectivizr it’ll start work on IE6 too.

      Modernizr use to support HTML5 tags : header, footer, section, in old browsers by googlesim script. Modernizr also use for conditions to check if any particular HTML5 API, or any CSS3 support in any browser or not. For example:

      .no-boxshadow #something {
      // declaration goes here will apply only in browser boxshadow not support
      }

      or you can check in javascript:

      if(Modernizr.video) {
      // Modernizr.video return true only if browser support HTML5 video
      }

      • David Kartuzinski says:

        Thank you. Seems obvious now, but for some reason I was seeing this. Would agree that there would be very little reason to add Selectivizr unless you HAD to support the lower IE 6-8 and were coding structural things with the various selectors?

        Do you use Selectivizr in your websites?

        Thanks, again.

        -DK

        • Tarun Sharma says:

          Yep you are right, Selectivizr is only to support lower browser.

          Ya i use it because i want my design should look as closer as possible in modern browser and in old browsers.

          for example: suppose we do have a section where i do have 3 rows 5 columns created by and we need 5px right margin in it.

          In that case we need to use nth-child to remove margin from every in 5th(last) column.

          Selectivizr make my work easy otherwise i do need to put a class in every in 5th column and in case if it’s dynamic. Then you can imagine it’s not good way to add class manually :)

          Thanks

          • David Kartuzinski says:

            Thanks for your answer. I appreciate your time on this.

            I will check by often!

            -DK

  51. cis says:

    Sorry, this is not clear enough for me.
    I don’t get a sense of how to put these code snippets together in a simple script even.
    I would have liked to see a full, small example.

    • Tarun Sharma says:

      it’s very simple. Download modernizr script file from http://modernizr.com/ Also you can read there a very good manual http://modernizr.com/docs/.

      Add script file in your HTML

      Now you are ready to use it. For HTML5 API you can check it in manual.

      For CSS3, you can open your website in firefox or any browser after add script tag. View your code in Firebug or in developer tool. In HTML tag you will see some classes added automatically.

      Now in CSS you can use any class from it.

      For example if your browser support box-shadow. So in your HTML tag there should be a class boxshadow, and you can use it in your CSS as below:

      .boxshadow div.yourclass { … }

      If your browser do not support box-shadow there should be a class no-boxshadow in your CSS, and you can use it as below:

      .no-boxshadow div.yourclass { … }

      So logic is you can define two different CSS

      .boxshadow div.yourclass { … }
      .no-boxshadow div.yourclass { … }

      It will work according to your browser if it support boxshadow then your first CSS will work or if it’s not then Second one will work

  52. this is a really very helpful article. i am new to web design and Modernizr as well.But i thought Modernizr was a library that provided
    patch solutions to older browsers that lacked
    support for HTML5 and CSS3 feature.Although a fallback is necessary, where do polyfills come in?

  53. DeFliGra says:

    Why care about people that hasn’t java enabled? It’s like driving a car on sunflower oil… you won’t get far!

    • Mike_W says:

      The reason why you should care about Javascript availabity is because an inconsiderate developer can ruin your browser experience. Not all browsers support Javascript and some organisations disable it as a security risk.

      Developers should code to be inclusive and not to their preferences. Use progressive enhancement to develop a base point that works for all and then add additional functionality where useful for specific user needs or expectations. That way your content degrades gracefully according to the environment it is used in.

  54. algomeysa says:

    Ok, just getting my feet in HTML5, and the book I bought (HTML GAMES by Jacob Seidelin) recommends using this modernizer.js. So I got it, and I’m trying what seems like the simplest example imaginable:

    http://algomeysa2.home.mindspring.com/html5test/test7-modernizr.html

    It should be testing if Modernizer.localstorage is available (via the modernizer.js library), and either document.write-ing “Yep!” or “Nope!”

    Also, if I’m reading the above correctly, it should be dynamically changing the class “no-js” into a whole bunch of stuff, that modernizer.js is detecting. What am I doing wrong?

  55. algomeysa says:

    Ok, I’ve solved my problem. Entirely due to me having it as Modernizer.localstorage instead of Modernizr.localstorage. (That is, I added the “e.”) As Boromir might say, “It is a strange fate that we should suffer so over so small a thing. Such a little thing.”

    In any event, this makes my previous reply, kind of pointless. I’d delete it (and this) if I could, but I can’t. So if the moderator here feels like doing so, go to it!

  56. In case anyone is using Twitter Bootstrap, here is a good resource for building a boilerplate template using Modernizer and Twitter Bootstrap.

    http://www.initializr.com/

  57. Elbert says:

    Hi are using WordPress for your blog platform?
    I’m new to the blog world but I’m trying to get started and create my own.
    Do you require any coding expertise to make your own blog?

    Any help would be really appreciated!

  58. kamoze says:

    I have installed the Modernizr html5 wodpress theme on my website, now I have to figure out how to use CSS3 to customize it a little bit.

    Is there some resourcers or some documentation on this website where I can begin to modify my site?
    :)

  59. I was looking for a simple theme in html5, and when I found modernizr, I knewed that this is the one that I have to use.
    It was like love at first side.
    Now I have to just learn a few css and php to edit id good.

  60. Microsoft please make browsers that go with the World . Every browser supports CSS3 and HTML 5 but IE :(

  61. Yudha PH says:

    I agree with M.Saeed. I suggest to named it ‘ModernIE’ rather than ‘Modernizr’ :D’

  62. Jeevi says:

    Hi

    Can Modernizr detect type of browser and its version.

    Thanks
    Jeevi

  63. Jeevi says:

    Hi

    Can Modernizr detect browser type and its browser version.

    Thanks
    Jeevi

  64. Thomas says:

    If javascript is turned off, what could be a clever fallback? The page is using HTML5 markup and we cannot use JavaScript to change the markup.

    I think it whould be more safe to use HTML4/XHTML markup with a class attribute with the name of semantic markup it will replace. E.g. and than I would use javascript to replace with .

    But also kind of slow make changes like that…

    What are the possible fallbacks, what are you doing?

    Thanks
    Thomas

  65. Thomas says:

    E.g. <div class=”article” > is replaced by <article>

    Hope this is readable ; )

  66. rgovind says:

    Thomas,
    Good idea. I can use this here : http://www.rekonsult.com . Thanks a ton for the idea. Readable indeed. How about using XSLT for this.

    • Thomas says:

      Yeah you could use XSLT even ; ) I don’t have the option for this in my current project.

      But maybe a little wrong to hack code for new browsers to support old ones. But I will take it for a spin – and see how it works out.

      Maybe I will make a project on gitHub ; ) If it is any good.

  67. Thank you for this very informative article. It really made the usage of modernizr very clear. At first i thought it would make HTML5 and CSS3 to work in all browsers.. but it turns out it would only give you a fall back to control the CSS of non supporting browser.

    I learned a lot from the comments of other users too. Thanks!

  68. bootstrap says:

    I was using modernizr with twitter bootstrap and jquery easing script. It was not working well due to easing script. So i had to write manual script. Is there any quick solution to make both of them work together?

    • Tarun Sharma says:

      I don’t think there are any relation between all of them. All should work properly. Can you send any link or reply in brief, what kinda problem you are you facing?

  69. Crucible says:

    Hey guys, just stumbled onto the thread. I’m looking for a talented developer that knows Modernizr and can update a landing page project, it’s in the Health niche.

    I’m not a coder, just a boring client, looking for some skilled help.

    Let me know if anyone is open for freelance, ping me on skype at crucible_67

    Cheers!

  70. f1ss1on says:

    Modernizer is cool, but adding the classes into the html tag causes IE to go into quirks mode. Now because of that, viewport meta won’t work correctly.

    Solution would be to use css3Pie. I use it on my site, and it is just as good.

  71. murtaza says:

    Modernizer is very helpful

    I will be using for mainly ie implementations

    Thanks

  72. Parvez says:

    Thanks Yaili for sharing this article! Its very useful to get hands on with basics before start using Modernizer

  73. nour says:

    that’s great … but i try to use in IE , but it not work again ….. i want to understand how it work in IE with css3 ….

  74. ted says:

    Sorry for the dumb questions, but is this required for IE 9 & 10? or only IE < 9. Do chrome and firefox need this as well?

    • Riad Kilani says:

      ted, there are no dumb questions, so here is your answer.

      Modernizer is primarily for versions of IE under 9.

      As far as Chrome/Safari, Firefox and newer versions of IE, they handle CSS3 elements very nice, and don’t rely on Modernizer to render CSS3.

    • Tarun says:

      For CSS purpose NO. But for javascript API you can use it. But it’s not that much useful now because mostly browser get updated.

  75. Lionela says:

    Hice todos los pasos como dice ahi, me descargue modernizer, lo cargue en el directorio de mi pagina, en la seccion head introduje la primer linea de codigo del paso uno (cambie la direccion a donde esta ubicado mi modernizer)
    y dentro de la etiqueta html puse la linea del paso dos que aqui se describe.
    Pero no funciona, mi pagina sigue sin funcionar el contenedor que centre la pagina, con margenes y section y header no se muestra los fondos con sombras y degrade. AYUDA!!

  76. Tarun says:

    puedes mostrar el código para que yo pueda ver lo que es el problema

  77. Lionela says:

    CODIGO HTML

    document.createElement(“nav”);
    document.createElement(“header”);
    document.createElement(“footer”);
    document.createElement(“section”);
    document.createElement(“article”);
    document.createElement(“aside”);
    document.createElement(“hgroup”);

    Pintur ♦ El Arte de los Distinto ♦ Gerardo Gareta

    <!–
    body {
    background-color: #750000;
    margin-left: 0px;
    margin-top: 15px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url();
    background-repeat: repeat;
    }

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

    ga(‘create’, ‘UA-44659730-1′, ‘pintur.com.ar’);
    ga(‘send’, ‘pageview’);

    Cada persona tiene una forma distinta de pintar, hay quienes lo hacen vigorosamente, otras con delicadeza. Esto es tanto más cierto, sin lugar a dudas, cuantos más intervienen los acabados y técnicas; abriendo un campo más amplio a la individualidad y la creatividad.
    Algunas personas son tradicionales en su forma de concebir un trabajo, mientras que otras hacen gala de una amplia interpretación apoyándose en sus conocimientos, experiencias y habilidades, a los que añaden su estilo y técnicas particulares.
    No somos iguales o parecidos a los demás, somos distintos.
    Pintur El Arte de lo Distinto

    Para una mejor visualización del sitio resolución: 1024 X 768px.
    © 2013 Pintur Gerardo Gareta – Todos los Derechos Reservados -Tel.: 03402 15447461 – Alvarez | Diseño Web: Click Diseños

    CODIGO CSS

    @charset “utf-8″;
    .contenedor {
    height: 90%;
    width: 75%;
    margin-left:auto;
    margin-right:auto;
    }
    section {
    /*navegadore sin soporte*/
    background: black url(fondodegradee.jpg) no-repeat;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#DCDCC8));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(top, #FFF, #DCDCC8);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #FFF, #DCDCC8);
    /* Opera 11.10+ */
    background: -o-linear-background(top, #FFF, #DCDCC8);
    /* IE 10 */
    background: -ms-linear-background(top, #FFF, #DCDCC8);
    box-shadow: 2px 2px 70px #000;
    -moz-box-shadow: 2px 2px 70px #000;
    -webkit-box-shadow: 2px 2px 70px #000;
    -o-webkit-box-shadow: 2px 2px 70px #000;
    font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;
    vertical-align: middle;
    height: 40%;
    width: 60%;
    position: relative;
    color: #000;
    background-color: linear-background;
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 13px;
    background-color: #FFF;
    padding: 5%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    }
    .tablacontacto {
    font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;
    font-size: 12px;
    color: #000;
    padding: 1%;
    margin: auto;
    position: relative;
    height: 30%;
    width: 50%;
    }
    header {
    background-color: #FFF;
    height: 25%;
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    }
    footer
    {
    background-color: rgba(255,255,255,0.5);
    height: 15%;
    width: 60%;
    float:inherit;
    clear:both;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    padding: 0.15%;
    text-align: center;
    font-size: 11px;
    }
    galeria {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 20px -30px 50px #000;
    -moz-box-shadow: 7px 5px 5px #666;
    -webkit-box-shadow: 2px 2px 70px #000;
    -o-webkit-box-shadow: 20px 10px 10px #666;

    }

  78. Lionela says:

    alguna novedad respecto a mi consulta??

  79. Cale says:

    Is it okay to add the script at the bottom of the page? right before the closing tag?

    If I add it in the header google page speed insites sees at as a content blocking script.

  80. vasanthan says:

    i used modernizr
    and i cont not get box shadow: in ie8
    my code

    var{border:1px solid #ccc;
    box-shadow: 6px 6px 15px #111111;
    -webkit-box-shadow: #666 6px 6px 15px;
    -moz-box-shadow: #666 6px 6px 15px; }

    box shadow testing

  81. Jonatan says:

    It would have been a good idea to be a little more clear about what the modernizr classes are in terms of boolean values. And how to use this in a broader sense. You don’t provide much background to your examples and the possibility to use them as equivalents for if else statements in your css. You point out the no-js class can be used as a fallback but don’t exemplify how this can be achieved which makes your post confusing to newcomers. This post is assuming a lot from the readers.

  82. Ashish says:

    Modernizer is something which let you know if anything new in CSS3 or HTML5 is being supported by the browser or not. If not supported, this gives you capability to write alternative option for that. It’s simple…

Leave a comment: