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.
Yaili,
lets use this trick http://css3pie.com
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.
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.
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
do you thing instead of the images we can fix with few files?
http://css3pie.com/
yalli use for round corner
in i.e
behavior:url (border-radius.htc);
file
Lets visit this site you will get all solutions
http://css3pie.com/
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.
so you mean we have to specify the width of any div(s) in order to avoid the problem with ie
Modernizr don’t have any relation with ie width, It’s only to help you in HTML5 API, and fallback CSS for not supporting CSS3 browsers. If you are looking for something like IE or any browser specific CSS. then have use https://github.com/tarunsharma20/css-helper
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
}
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)?
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
Thanks Tarun, your extended explanation was really helpful, you explained what Modernizr does, I got it now.
No problem buddy :)
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.
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’);
}
Hey, thanks. Worked nicely.
Defering Modernizr loading a bad idea?
Jay,
I not got what you want to ask? Can you make your question more clear?
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.
Just before tag*
For some reason that diidn’t post.
Body tag, sheesh. Sorry about this.
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.
Got it, thanks for all your help Tarun.
Thanks for this – very nicely written & should be part of Modernizr’s standard documentation.
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
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
}
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
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
Thanks for your answer. I appreciate your time on this.
I will check by often!
-DK
Good over view
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.
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
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?
Why care about people that hasn’t java enabled? It’s like driving a car on sunflower oil… you won’t get far!
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.
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?
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!
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/
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!
Hi Elbert, in simple yes you do if you are creating your own custom theme or requiring specific customisation but other then that you can get a free blog from WordPress http://wordpress.com/
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?
:)
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.
Microsoft please make browsers that go with the World . Every browser supports CSS3 and HTML 5 but IE :(
I agree with M.Saeed. I suggest to named it ‘ModernIE’ rather than ‘Modernizr’ :D’
Hi
Can Modernizr detect type of browser and its version.
Thanks
Jeevi
Hi
Can Modernizr detect browser type and its browser version.
Thanks
Jeevi
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
E.g. <div class=”article” > is replaced by <article>
Hope this is readable ; )
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.
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.
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!
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?
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?
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!
Sent you request in skype :)
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.
If you like to use only to add class, Then you can try https://github.com/tarunsharma20/css-helper/
Modernizer is very helpful
I will be using for mainly ie implementations
Thanks
Thanks Yaili for sharing this article! Its very useful to get hands on with basics before start using Modernizer
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 ….