Not a single browser till this date, support all the features of HTML5 or CSS3.
what is Modernnizr?
How does Modernizr work?
Example:
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
What Modernizr doesn't do?
Other Facts about Modernizr:
what is Modernnizr?
- Modernizr is a JavaScript library.
- It detects native CSS3 and HTML5 features available in the user's browser.
- Modernizr makes it easy for us to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not.
- This lets developers take advantage of new features of HTML5 and CSS3 that browsers support, yet create fallbacks for browsers that lack support.
- And finally, this is an open source library.
How does Modernizr work?
- Modernizr runs quickly (automatically, there is no Modernizr.init() function to call) on page load to detect features;
- After detecting, it provides a JavaScript object (a global object called Modernizr) containing all features with a true/false value, depending on whether the browser's user agent property has native support for it or not.
- Modernizr will also add classes to the element of the page, one for each feature it detects. If the user agent supports it, a class like "cssgradients" will be added. If not, the class name will be "no-cssgradients". This allows for simple if-conditionals in our CSS.
Example:
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
What Modernizr doesn't do?
- Modernizr does not add missing functionality to browsers.
Other Facts about Modernizr:
- Modernizr 2.0 was a .net Award 2011 winner for Open Source App of the Year, and one of its creators, Paul Irish won a Developer of the Year award.