What is Modernizr?
Modernizr is a feature-detection library. It can currently detect over 40 HTML5- and CSS3-features, so you can adapt your application whether the feature is supported by the users browser or not.
Why should i use Modernizr?
The traditional way of checking the browsers capabilities is the integration of User Agents like this one:
<!--[if IE 7 ]> <html class="ie7 no-css3 no-js" lang="en"> <![endif]-->
This is an outdated practice, due to the wide variety of browser versions. Nowadays a developer could hardly knows which browser supports an specific feature. Or do you know the capabilities of Kindle Fire's Silk web browser?:-) Instead of asking the question, is this Internet Explorer 7 or Firefox 18, the question should be: is there support for a particular feature? This is what Modernizr does.
How can i use Modernizr?
Modernizr will test your browser for the features that it may or may not support and makes the results available in two ways: as classes in the <html>-element and as a javascript object.
The test results in the <html>-element
Modernizr has included for each test result a seperate class in this tag. For example, including the class "borderradius" means, that your browser supports this "rounded borders"-feature. In case of non-support Modernizr would include the prefix "no-" to the class name, so it would be named "no-borderradius".
In your stylesheet you can easily now reference to these classes and adapt your application, for example like this (simplified code):
.borderradius .mycontainer {-webkit-border-radius: 6px; [...]}
.no-borderradius .mycontainer {/*grmpf, need Sliding Doors .. */ [...]}
The test results in the javascript object
Modernizr creates a global javascript object named "Modernizr". Open the web developer in your theme 25 application and query this object in console:
Each test result is included as a boolean property. For example the property "borderradius" is set to true, so (obviously) your browser supports the "rounded borders"-feature.
In your javascript code you could query now these properties. For example the following code adds the class "round_borders", if the browser supports the "borderradius"-feature:
if (Modernizr.borderradius)
{ $("#mycontainer1").addClass("round_borders");
}
Thanks for the wonderful information .doc to html converter
ReplyDeleteKeep sharing