Meet MODERNIZR----Front end

1. What is Modernizr?

MODERNIZR is a JavaScript library that detects support for browser features. Currently, by verifying the browser's handling of a series of tests, MODERNIZR can detect 18 CSS3 functions and more than 40 functions on HTML5. It is more reliable than the traditional way of detecting browser names (browser sniffing). The complete set of tests takes only a few microseconds. In addition, the MODERNIZR website detects the elements you are interested in by customizing the script to achieve efficiency optimization.

When using MODERNIZR to detect CSS3 support situations, you do not need to have any JavaScript knowledge. You just need to insert a file into the Web page, and it adds a set of classes on the

Modernizr can easily implement JavaScript solutions, known as polyfills--, which simulate HTML5-related features and technologies, such as geo-positioning. However, you do need a basic understanding of JavaScript in order to use these features and techniques. The term Polyfill comes from a British brand Polyfilla (known as the American filler) that fills the cracked clay. Here, Polyfill is used to fill the browser's functional vulnerabilities. Sometimes, MODERNIZR can perform this task seamlessly. But in essence, this is just a patching effort, so you can't rely on it to produce the exact same results that a vulnerability-free browser implements.

2> modernizr-- for HTML5 and CSS3

10 years ago, while insisting on web standardization, people had to use hacks to make their pages display properly in all browsers. One of the more and more hack techniques used is browser sniffing (browser sniffing), using the Navigator.useragent attribute in JavaScript to determine what brand of browser the user is using. Browser sniffing technology can quickly branch the code to apply different instructions for different browsers.

In the face of this familiar situation (browser support is different), what should we do? Simple: Use feature detection (feature detection), which means we don't have to ask the browser "Who are you?" "To make an unreliable guess. Instead, we ask the browser, "Can you do this or that?" The ability to detect browsers is easy, but it's still annoying to take the time to do manual testing. At this time MODERNIZR can help us.

3>modernizr : Designed for HTML5 and the CSS3 development of the functional detection class library

Modernizr is an open source JS library that, when you embed a MODERNIZR script in a Web page, detects whether the current browser supports CSS3 features, such as @font-face, Border-radius, Border-image, Box-shadow, Rgba (), and so on, it also detects whether HTML5 features are supported-such as audio, video, local storage, and new <input> tag types and attributes. On the basis of this information, you can use them on browsers that support these features to decide whether to create a JS-based fallback or simply gracefully downgrade those unsupported browsers. In addition, Modernizr can also enable IE to support the application of CSS styles to HTML5 elements, so that developers can immediately use these more semantically-rich tags.

2, Modernizr.custom.js production HTML5 CSS3 multilevel cascading side menu navigation bar

3. Modernizr is developed on the basis of progressive enhancement theory, so it supports and encourages developers to create their own web sites on a level-by-layer base. Everything starts with an idle foundation with JavaScript applied, one by one adding an enhanced application layer. Because Modernizr is used, it's easy to know what your browser supports.

. csscolumns Ol.features {
-moz-column-count:2;
-webkit-columns:2;
-o-columns:2;
Columns:2;
}

. no-csscolumns Ol.features {
Float:left;
margin:0 0 20px;
}

. no-csscolumns Ol.features Li {
Float:left;
width:180px;
}

Once again, I used Modernizr to set different properties for different situations. If the browser supports CSS columns, it will put the list perfectly divided into 2 columns, if not supported by Modernizr for

Learn more: Http://www.infoq.com/cn/articles/webkit-for-developers

Original address: http://jokerliang.com/how-to-use-modernizr.html

Http://www.17sucai.com/pins/3078.html

Http://www.blueidea.com/tech/web/2011/8341_3.asp

Meet MODERNIZR----Front end