Modernizr.js: Born for HTML5 and CSS3!

Original link: http://caibaojian.com/modernizr-js.html

Modernizr this JS, in the foreign theme inside a lot of places are seen, just remember is for the HTML supplement, a bit similar with responsive. JS the same. Search this article today, in-depth explanation of modernizr.js is to detect the browser's CSS3 and HTML5 properties, and thus through the CSS to solve the compatibility problem.

Personally think this practice significantly increased the amount of CSS code, and may cause when the user's page is not enabled JS, the inside of the CSS3 effect can not be used, the other is difficult to maintain in the future, if you change a style, then the CSS code class to change. This method of writing compatible code is not recommended for individuals. The following is the translation

10 years ago, only the most sophisticated web designers would use CSS for the layout and grooming of Web pages. The browser's support for CSS layout was imperfect and flawed, so these people , while adhering to web standardization, had to use hacks to make their pages appear 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.

Today, CSS-based layouts are very common and browsers support it very solidly. But now that CSS3 and HTML5 are here, history has turned a circle and back to where it is-the support of each browser to these new technologies is beginning to become uneven. We were used to writing neat, standard-compliant code, and no longer using CSS hacks or browsers to sniff out these unreliable and low-level technologies. We also believe that more and more users will agree that the site does not have to look the same in all browsers. What do we do with this familiar situation (browser support)? 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.

MODERNIZR: feature detection class library developed for HTML5 and CSS3

Modernizr is an open-source JS library that makes it easier for designers to develop different levels of experience based on different guest browsers, which are differences in support for new standards. It allows designers to exploit HTML5 and CSS3 features in browsers that support HTML5 and CSS3 without sacrificing control of other browsers that do not support these new technologies.

When you embed a MODERNIZR script in a Web page, it detects whether the current browser supports CSS3 features, such as @font-face, Border-radius, Border-image, Box-shadow, Rgba (), etc. 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.

Modernizr is developed on the basis of progressive enhancement theory, so it supports and encourages developers to create their own web sites on a layer-by-level. 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. Let's take a look at an example of creating a cutting-edge website by applying Modernizr.

start with the application Modernizr

First download the latest stable version of Modernizr from Www.modernizr.com (currently the official website of Modernizr in China, we can be downloaded from GitHub. Or more simply, you can download the latest version of the 1.7 script file from the owner, and on the official website you can also see a list of all the features that it supports to detect (the list is given at the bottom of this article so that the children's shoes that can't flip the wall will know what to support). After downloading the latest version (the author uses the 1.5 version when writing this article), add it to the

DOCTYPE html>  

Next, add the class "No-js" to the

When Modernizr is running, it will turn this "No-js" class into "JS" to let you know that it is already running. Modernizr does not just do this, it adds the class class for all features it detects, and if the browser does not support an attribute, it prefixes the class name corresponding to the attribute with "no-". So, your

MODERNIZR also creates a JS object, named "Modernizr", whose contents are a list of Boolean results for each of the detected attributes. If the browser supports a new canvas element, the value of "Modernizr.canvas" is true, and if the browser does not support this new element, the value it corresponds to is false. This JS object will also contain more detailed information for some features, such as "Modernizr.video.h264" will tell you whether the browser supports this special codec. "Modernizr.inputtypes.search" will tell you whether the current browser supports the new search input type, and so on.

Our raw and simple small page looks a bit like a quasi-test system, but it has better semantics and accessibility. Let's add a little basic style to it: a bit of text formatting, color, and layout to make it look better. Current location, nothing new, just add a presentation style to the HTML page of a semantic structure and see the page after the style is added.

Below, we want to enhance this page to make it more interesting. I want to apply a peculiar text effect to the H1 of the head, divide the list of detection features into two columns, and then get everything on the Modernizr with a picture on the right. I'm also going to make the border around the page content a little bit more beautiful. Now, the more CSS3 allows you to add more properties to a rule, and if the browser doesn't support those properties, it ignores them. With CSS cascading (inheritance), you can use new properties such as "Border-radius" instead of relying on MODERNIZR. However, using MODERNIZR can provide you with some features that are not available: the class name of the

Code from Http://caibaojian.com/modernizr-js.html.borderradius #content {  border:1px solid #141414;  -webkit-border-radius:12px;  -moz-border-radius:12px;  border-radius:12px;  }  . Boxshadow #content {  border:none;  -webkit-box-shadow:rgba (0,0,0,. 5) 3px 3px 6px;  -moz-box-shadow:rgba (0,0,0,. 5) 3px 3px 6px;  Box-shadow:rgba (0,0,0,. 5) 3px 3px 6px;  

The first rule adds a 12-pixel fillet to the #content element. But on the existing page we have set a "2px outset #666" border for the "#content" element, which is pretty when the box is right-angled, but not in the corner. Thanks to Modernizr, I can set a 1px real edge for box with the browser supporting "Border-radius".

The second rule is a little bit more progressive, we added a shadow to the "#content" element and removed the border property for browsers that support the "Box-shadow" property. Why is it? Because most browsers do not provide a good performance for the combination of "border with corners" plus shadows (this is a flaw in the browser that should be noticed, but we now have to endure it). Rather than using shadows to use only borders, I prefer to surround elements with shadows only. In this way, I can have the world's best, accurate point, the best kind of CSS performance: in the browser that supports the "Box-shadow" property will be a wonderful shadow; browsers that only support the "Border-radius" property will render a nice rounded thin border For those crappy browsers that are not supported by these 2, we will see a 2-pixel right-angled border.

Below we want to apply a custom special font for the header, below is our current statement for H1, unchanged version of:

H1 {  color: #e33a89;  Font:27px/27px Baskerville, Palatino, "Palatino Linotype",  "book Antiqua", Georgia, serif;  margin:0;  Text-shadow: #aaa 5px 5px 5px;  }

These statements work well on our basic Web page, and the 27-pixel text size is also good for the display of those fonts we set for H1. But 27 pixels is too small for the font I want to use for the name "Beautiful". Let's add another rule to use this custom font:

@font-face {  src:url (BEAUTIFUL-ES.TTF);  font-family: "Beautiful";  }  . Fontface H1 {  font:42px/50px Beautiful;  Text-shadow:none;  }

First, we add the "@font-face" declaration, where we specify the path, file name, and font name for our custom font. We then use a CSS statement to select the font style for our H1. You will see that I have chosen a large font size here because the "Beautiful" font itself is much smaller than the text of other fonts, so we have to instruct the browser to give H1 a very large font size when displaying our custom fonts.

In addition, our beautiful handwritten text has some rendering problems in terms of text shading, so we want to remove the shadow from the text when the browser decides to use the custom text. In addition, the list of the detection features section needs to be divided into two columns. To achieve this, I'm going to use the CSS columns property of the fork, which causes the browser to bar the list intelligently without disrupting its order, and our list, though not numbered, is in alphabetical order. Of course, not all browsers support this property, for those browsers that do not support, we use floating to achieve the purpose of 2 columns-the use of the floating after the list will not be in alphabetical order, but that's better than nothing.

. 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

Here you may notice that I have added a different prefix to the attribute (-moz-、-webkit-、-o), because different browser vendors have different definitions of the implementation of the feature, so it is necessary to add their corresponding prefixes to different browsers to implement this feature.

After these changes, our new page looks better.

We'll end this tutorial by adding more progressive enhancements to our page. WebKit-based browsers support some of the more forked effects, such as CSS transformations, animations, and three-dimensional transformations. And I want to apply some of these effects to the last stage of the page. Once again, these attributes are added to our existing CSS and ignored in browsers that do not support them. Therefore, it is appropriate to use MODERNIZR on the one hand, which is an unsupported situation on one side of the progressive enhancement.

First set:

@-webkit-keyframes Spin {    0% {-webkit-transform:rotatey (0);}  100% {-webkit-transform:rotatey (360deg);}  }  . Csstransforms3d.cssanimations section {  -webkit-perspective:1000;  }

@keyframes rules are part of the new CSS animations specification and are currently only supported by WebKit. It allows you to declare a complete animation path for any property and change them at any stage you like. For more information on animations, please read the Working Draft specification.

Let's add the code that makes one of our elements rotate in three dimensions:

. csstransforms3d.cssanimations section H2 {  background-image:url (modernizr-logo.png);  Overflow:hidden;  -webkit-animation:spin 2s linear infinite;  }

Because the logo to turn, and want it to go with the background of harmony, so it used a PNG format file. I also used a "Overflow:hidden" property to hide the text in the header with the indent-9999 pixel set. It is interesting but not very beautiful to make the elements rotate in the same way. Finally, we chose to use the animation rule, set its rotation period of 2 seconds, along its own central axis rotation, never stop.

The final page looks great and even has fun animations for the WebKit browser. I hope that by now you can see how the use of Modernizr can make your wrist of the website controlled and how easy it can be for real progressive enhancement. It's not just the full benefit of MODERNIZR, it also helps you build JS-based fallbacks and new features that can help you apply HTML5 to those cows.

attached, Modernizr inspection Checklist:

1. @font-face2. Canvas3. Canvas TEXT4. WebGL5. HTML5 Audio6. HTML5 Audio Formats7. HTML5 Video8. HTML5 Video Formats9. RGBA () 10. Hsla () 11. Border-image12. Border-radius13. Box-shadow14. TEXT-SHADOW15. Multiple backgrounds16. Background-size17. Opacity18. CSS Animations19. CSS COLUMNS20. CSS Gradients21. CSS Reflections22. CSS 2D Transforms23. CSS 3D Transforms24. Flexible Box Model25. CSS Transitions26. Geolocation API27. Input Types28. Input Attributes29. LocalStorage30. SessionStorage31. Web Workers32. ApplicationCache33. SVG34. Inline SVG35. SVG Clip paths36. SMIL37. Web SQL Database38. IndexedDB39. Web Sockets40. Hashchange Event41. History Management42. Drag and Drop43. Cross-window Messaging44. Touch Events

original link: modernizr.js: for HTML5 and CSS3 born! All rights reserved, please specify the source when reproduced, offenders must investigate.
Annotated source format: front-end Development Blog (http://caibaojian.com/modernizr-js.html)

Modernizr.js: Born for HTML5 and CSS3!