Modernizer.
One thing you’ve probably notice that when you want to detect browser support for an API, there is no uniform way of doing so; in fact, almost every API is detected in a different way. For geolocation, for instance, we look for the geolocation object as a property of the navigator object, while for webstorage we check to see if localStorage is defined in the window object, and for video we check to see if we can create a video element in DOM, and so on. Surely there’s a better way?
Modernizr is an open source JavaScript library that provides a uniform interface for detecting browser support. Modernizer takes care of all the details of the different means of detection, even factoring in all the edge cases around older browsers. You’ll find the Modernizr home page at http://www.modernizr.com/
Modernizr has gained a lot of developer support so you’ll see it used widely around the Web. We highly recommend it.Here’s an example of detecting for geolocation, web storage and video, all in a consistent manner. Including Modernizr in your page
To use Modernizr, you need to load the JavaScript library into your page. To do that you first visit the Modernizer site at http://www.modernizr.com/download/, which allows you to custom configure a library that contains just the detection code you need (or you can always grab everything while you’re there). After you’ve done that, stash the library in a file of your choice and load it into your page (visit Modernizr’s web site for addition tutorials and documentation on best practices for doing this).
Download and how to attached to web page.
Firs way:
Step 1: Modernizer is a jquery library.You may download production version from http://modernizr.com/download/Step 2: Now select all of the option you want to detect support of browsers.I recommmand all checked or toggle all of the three css3,Html5 and Misc.
Step 3: Click Generate Button.Remember it only general code according your checked options.
Step 4: Click Download button.Then a javascript file like modernizr.custom.02852.js downloaded your PC.
Step 5: Use this javascript file in your head tag after your stylesheet.
<script type="text/javascript" src="js/modernizr.custom.02852.js"></script>
Here my downloaded file in under js folder.But you can put wheter you want and it may be same directory if you want.
Second way:
Just use these url in src.No need to download modernizer but you need internet connection to use it.<script type="text/javascript" src="http://modernizr.com/downloads/modernizr.js"></script>
I recommand use First way when you are practise your own computer and use second way when you use for an website which is running a real server.
How modernizer works for CSS3.
Modernizer actually helps you to make style both supported or not supported browsers.Suppose you want to use box-shadow which is a new features of CSS3.Most of the old Browser does not support css3 so you have to use a fallback for them.Modernizer add a class in <html> tag if browser support box-shadow then it will add a class like <html class="boxshadow">. if browser does not support css3 box-shadow then it will add a class in html like <html class="no-boxshadow">.Like so for border-radius it will add no-borderradius class in your html tag.If support just add borderradius class.
Notice: Modernizer add class for support just the property name with no spaces between the words.It add no before non supporting property like no-borderradius.
Remember one thing modernizer add class not the browsers.
Lets Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>modernizer use for css3</title>
<style type="text/css">
/*If browser support border-radius then modernizer add a borderradius class in html tag.so these style will apply because older browser have not found any borderradius class so it skip it */
.borderradius #box{
-moz-border-radius:25px;
border-radius:15px;
box-shadow:1px 1px 4px #003366;
height:400px;
width:400px;
color:#fff;
background: -moz-linear-gradient(top, #00020c, #0cf6f3); /* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(#00020c), to(#0cf6f3)); /* Safari 4+, Chrome */
background: linear-gradient(to bottom, #00020c,#0cf6f3); /* W3C */
}
/* older browser will style these*/
#box{
background-color:#0cf6f3;
height:400px;
width:400px;
border:1px outset #333;
}
</style>
<script type="text/javascript" src="http://modernizr.com/downloads/modernizr.js"></script>
</head>
<body>
<header>
</header>
<section>
<div id="box">
Hi i am in a test moood.
</div>
</section>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>modernizer use for css3</title>
<style type="text/css">
/*If browser support border-radius then modernizer add a borderradius class in html tag.so these style will apply because older browser have not found any borderradius class so it skip it */
.borderradius #box{
-moz-border-radius:25px;
border-radius:15px;
box-shadow:1px 1px 4px #003366;
height:400px;
width:400px;
color:#fff;
background: -moz-linear-gradient(top, #00020c, #0cf6f3); /* for firefox 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, from(#00020c), to(#0cf6f3)); /* Safari 4+, Chrome */
background: linear-gradient(to bottom, #00020c,#0cf6f3); /* W3C */
}
/* older browser will style these*/
#box{
background-color:#0cf6f3;
height:400px;
width:400px;
border:1px outset #333;
}
</style>
<script type="text/javascript" src="http://modernizr.com/downloads/modernizr.js"></script>
</head>
<body>
<header>
</header>
<section>
<div id="box">
Hi i am in a test moood.
</div>
</section>
</body>
</html>
Output of following Code:
Hi i am in a test moood.
How to detect support for html5 and retated api.
Once you’ve got Modernizr installed, detecting HTML5 elements and
JavaScript APIs gets a lot easier and more straightforward:
if (Modernizr.geolocation) {
write your code about geolocation because only supported browser will execute your code.Other skip these codes.
}
JavaScript APIs gets a lot easier and more straightforward:
if (Modernizr.geolocation) {
write your code about geolocation because only supported browser will execute your code.Other skip these codes.
}
Here’s an example of detecting for geolocation, web storage and video, all in a consistent manner
if (Modernizr.localstorage) {
Do here what ever you want to do with local storage.This will not disturb unsupported browser.
}
if (Modernizr.video) {
//Your code about video goes here
}
Note: Modernizr goes far beyond simple API detection and can also detect support for CSS features,
video codecs and many other things. So, check it out!
Related Topics:
Comments
0 comments to "Modernizer"
Post a Comment