Mordernizr and Web Development
If you’re a Web Developer then you probably know that one of the biggest issues is the lack of a standard between browsers and HTML/CSS support.
And although HTML5/CSS3 use has grown increasingly among web designers, this issue has yet to be addressed properly, and support from some vendors is inexistent.
Lately, I’ve been using Modernizr to provide an alternative experience for browsers that don’t support CSS3 properties , and it makes development much easier.
How it works
To setup Moderizr, download the file from this page. Then, on your site’s head tag, add a link to the file:
<script src="js/modernizr-1.0.min.js"></script>
Then include the class “no-js” on your html tag:
<html class="no-js">
Why add this tag?
Because if javascript isn’t on then Modernizr will not work (and probably a lot of other features in your site wont work either) , so it’s good to have a fall back just incase.
if javascript is indeed enabled, then once the page is loaded that class will be replaced dynamically and will 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 is this?
In this case the page was opened in Firefox 3.5 and it doesn’t support multiple backgrouns, css gradiants, or css transforms. Therefore, Modernizr outputs "no-multipebgs", "no-cssgradients", and "no-csstransforms". On the other hand it does support canvas and border-radius. So basically Modernizr puts up a list of what is and is not supported by the browser.
How to use this treasured information?
without Modernizr your CSS would look like this:
#nice {
background: url(background-one.png) top left repeat-x,
url(background-two.png) bottom left repeat-x;
}
and with Mordernizr it would instead look like :
#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;
}
}
Depending on browser support with modernizr you have a fall back to work with.
javascript
You can also detect features using Modernizr in your JavaScript, using this syntax:
if (Modernizr.geolocation){
}
To wrap things up
In a perfect world there would be one standard in browsers / Html and CSS3 support but we don’t live in a perfect world. But Modernizr is a tool that helps bridge the gap with browser support when using CSS3 Techniques.