by
Jay Hathaway
Jul 3rd 2009
Modernizr
is a JavaScript library by Faruk Ates that detects which functionality
a browser can support, and allows you to use if-statements to fine-tune
your fallbacks for browsers that don't support the new hotness.
Modernizr can't fix old browsers, but it can make it more practical to
support newer ones. On top of all the CSS 3 styles it can detect
support for, it also allows you to use and style HTML5 elements without
breaking your site for IE users. Not too shabby for a little bit of
JavaScript.
In
this brief tutorial we'll look at how to add Modernizr to your site and
start using it. It should be enough to get you going, but more detailed
tutorials and techniques will come in the future. When they do, they'll
be announced either on this site or, and this is more likely, on the Modernizr twitter account
.
First, you must download the latest Modernizr code
.
Include the modernizr-0.9.js
file into your page, directly after the <body> element like this:
<body>
<script src="/path/to/modernizr-0.9.js"></script>Now,
once your page loads, Modernizr will run and go through all of its
tests. It will automatically add all the classes to the <body>
element of the page, and these classes will be along the lines of body.feature
or body.no-feature
,
with the former indicating that the current browser supports that
specific feature and the latter indicating that the browser does not
support the feature.
Additionally, it will create a new JavaScript object in the global scope, called Modernizr
.
This object will contain properties for each of the features that
Modernizr detects for, and their value will be set to TRUE or FALSE
depending on the browser's support for it.
What you can
do from this point on is write pseudo-IF/ELSE statements in your CSS.
Let's look at an example from the Modernizr.com site itself:
.cssgradients #main {
background: -webkit-gradient(linear, left 0, right bottom,
from(rgba(255,255,255, .82)),
to(rgba(255,255,255, 0))) 0 0 no-repeat;
}In the above example, we're doing an "IF" condition in CSS: IF
the browser supports both CSS gradients, THEN
apply this background property to the #main
element (instead of the original background property).
When
leveraging Modernizr in your JavaScript, it's as straight-forward as it
can be to do IF-conditions based on what the browser currently supports:
if (Modernizr.cssgradients) {
// perform some actions you only want to
// execute if the browser supports gradients
}There really is nothing out of the ordinary about it, so if you're a JavaScript programmer you're good to go.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
