How to use Modernizr
CSS, HTML, Tools | November 10th, 2009
Photo by Stéfan
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:
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:
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 elements—header, 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)?
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.
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.
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
Hi wimal,
Browsers that don’t support box-shadow and rounded corners will ignore them already, no need for an extra script for that.
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.
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.
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.
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.
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).
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 .
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
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.
Update: Firebug also detects the additional classes added by Modernizr.
The classes are visible when you view source using Webkit’s Web Inspector (included in the Safari’s “Develop” menu, for instance) or Firebug.
Thanks John, forgot to mention that’s how I spotted the classes!
V
How do I style the html5 elements to work with IE?
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. :)
Thanks for this – very nicely written & should be part of Modernizr’s standard documentation.
I added Modernizr’s in my html5 page but its not work in IE.
So Sad :(
Great getting started!
realy missed this on the modernizer site itself…
Thanks very much!
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
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?
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”
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…???
Why you want to use Modernizr if you not need CSS3 and HTML5?
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….
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.
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!
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.
ohh i see.. oh men!.. ok then, thanks! i better do something else then.. (T_T)
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)
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.. :(
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.
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
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
ohh.. ok then, oh yeah, where should I insert the script tag of modernizr? is it after the link reference of our css files?
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.
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?
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);
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
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.
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.
Very nice article Yaili! :-)
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 :)
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
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!
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
Anyone know if background-size works well in all browsers?
thanks!
About wordpress implementation: I need to manual code php files? and what?
Thanks
Hye Mascali!!
Can you please specify in detail what you need to do in wordpress or in PHP?
I wanna use in wordpress: is it possible?
Thanks
ya of course it is :)
If you find any issue like jQuery conflict, you can use .noConflict()
for reference:
http://www.mkyong.com/jquery/jquery-is-not-working-in-wordpress-solution/
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?
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
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.
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 :)
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?
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
@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….
@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
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!!
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
}
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
}