-------------------- Split line, the following is the body --------------------
10 years ago, only the most cutting-edge website designers used CSS for the layout and decoration of webpages. At that time, the support of the browser for CSS layout was incomplete and full of loopholes, so these people insisted on Web standardization while at the same time, hacks has to be used to make their pages normally displayed in all browsers. One of the more and more hack technologies used is browser sniffing, which uses the navigator. useragent attribute in JavaScript to determine which version of the browser the user uses. Browser sniffing technology can quickly branch code to apply different commands to different browsers.
Today, CSS-based la s are very common, and browsers provide solid support for them. But now css3 and HTML5 are coming, and the history turns around and returns to the original place-the support of various browsers for these new technologies has begun to become uneven. We have been used to writing neat and compliant code, and will not use CSS hacks or browsers to sniff these unreliable and low-level technologies. We also believe that more and more users will agree that the website does not have to look the same in all browsers. What should we do in the face of the current familiar situation (different browser Support? Simple: use feature detection, which means we don't have to ask the browser "who are you ?" To make unreliable guesses. Instead, we asked the browser "Can you do this or that ". It is very easy to detect the browser, but it is still annoying to spend time manually testing one by one. In this case, modernizr can help us.
Modernizr: A function detection class library designed for HTML5 and css3
Modernizr is an open source JS library that makes it easier for designers who develop different levels of experience based on different visitor browsers (differences in support of new standards. It allows designers to make full use of HTML5 and css3 features in browsers that support HTML5 and css3, without sacrificing the control of other browsers that do not support these new technologies.
When you embed a modernizr script in a webpage, it checks whether the current browser supports the css3 feature, for example, @ font-face, border-radius, border-image, box-shadow, rgba, it also checks whether HTML5 features are supported, such as audio, video, local storage, and new <input> tag types and attributes. You can use these information in browsers that support these features to determine whether to create a JS-based fallback, or you can perform simple and elegant downgrades on unsupported browsers. In addition, modernizr allows IE to apply CSS styles to HTML5 elements, so that developers can immediately use these more semantic tags.
Modernizr is developed based on the progressive enhancement theory, so it supports and encourages developers to create their websites layer by layer. Everything starts from an idle foundation where Javascript is applied, and an enhanced application layer is added one by one. Because modernizr is used, you can easily know what the browser supports. Next we will look at an instance that uses modernizr to create a cutting-edge website.
Starting with the application modernizr
First download the latest stable version of modernizr from www.modernizr.com. (currently, the official website of modernizr is published in China. We can download it from GitHub. To make it simpler, you can download the latest version 1.7 script file from the main site ), on the official website, you can also see a list of all features that support detection. (These lists will be provided at the end of this article, so that you can know which ones are supported by the wall ). After downloading the latest version (the author used version 1.5 when writing this article), add it to the
<! Doctype HTML>
<HTML>
<Head>
<Meta charset = "UTF-8">
<Title> my beautiful Sample page </title>
<SCRIPT src = "modernizr-1.5.min.js"> </SCRIPT>
</Head>
...
Next, add the "no-js" class to the <HTML> element.
<HTML class = "no-js">
When modernizr is running, it will change the "no-js" class to "JS" to let you know that it is already running. Modernizr does not only do this, but also adds class classes for all features it has detected. If the browser does not support a feature, it adds the "no-" prefix to the class name corresponding to this feature. Therefore, your <HTML> elements may look like the following:
<HTML class = "JS canvas canvastext no-geolocation rgba HSLA
Multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns
Cssgradients cssreflections csstransforms csstransforms3d csstransitions video
Audio localstorage sessionstorage webworkers applicationcache fontface ">
Modernizr also creates a JS object named "modernizr", which is a list of Boolean results for each detected feature. If the browser supports the new canvas element, the value of "modernizr. canvas" is true. If the browser does not support this new element, the corresponding value is false. This JS object also contains more detailed information for certain functions. For example, "modernizr. Video. h264" will tell you whether the browser supports this special decoder. "Modernizr. inputtypes. Search" will tell you whether the current browser supports the new search input type, and so on.
Our unprocessed simple small page looks a bit like a quasi-test system, but it has better semantics and accessibility. Let's add a basic style: text format, color, and layout to make it look better. Currently, there are no new things. You just need to add a presentation style to an HTML page with a semantic structure to see the page after adding the style.
Next, we want to enhance this page to make it more interesting. I want to apply a special text effect to H1 in the header, divide the list of detection features into two columns, and then get everything about modernizr with a photo to the right. I also want to make the border around the page content more beautiful. Now, the more powerful css3 allows you to add more attributes to a rule. If the browser does not support these attributes, it will ignore them. With CSS cascade (inheritance), you can use new attributes such as "border-radius" without relying on modernizr. However, the use of modernizr can provide you with some functions that are not supported by the existing means: dynamically modify the <HTML> class name based on the differences in the browser's support for new things. I will explain this by adding two new rules to our page:
. 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,. 5) 3px 3px 6px;
-Moz-box-Shadow: rgba (0, 0,. 5) 3px 3px 6px;
Box-Shadow: rgba (0, 0,. 5) 3px 3px 6px;
}
The first rule adds a 12-pixel rounded corner to the "# Content" element. However, on the existing page, we have set a border with the attribute value "2px outset #666" for the "# Content" element. This is pretty nice when the box is at a right angle, but it is not in the rounded corner. Thanks to modernizr, I can set a 1px Solid Edge for box when the browser supports "border-radius.
The second rule makes more progress. We add a shadow to the "# Content" element and remove the border attribute from browsers that support the "Box-Shadow" attribute. Why? Because most browsers do not provide a good performance for the effect of the combination of border with corner and shadow (this is a flaw in the browser that should be noticed, but now we have to endure it ). I 'd rather use only the shadow element than the border element instead of the shadow. In this way, I can have the best, accurate, and best CSS performance in the world: A wonderful shadow will be displayed in browsers that support the "Box-Shadow" attribute; browsers that only support the "border-radius" attribute will display a nice thin border with rounded corners; for broken browsers that are not supported by the two, we will see a 2-pixel right-angle border.
Next we will apply a custom special font for the header. The following is our current statement for H1, which has not been changed:
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. The 27-pixel text size is also suitable for displaying the fonts we set for H1. But for the font "beautiful" that I want to use, 27 pixels is too small. Next we will add other rules 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, add the @ font-face statement and specify the path, file name, and font name for the Custom font. Then we use a CSS statement to select a font style for our H1. You will see that I chose a large font size here, because the "beautiful" font itself is much smaller than other fonts, therefore, we must instruct the browser to give H1 a large font size when displaying our Custom font.
In addition, some rendering problems exist in the text shadow of beautiful handwritten text, so we need to cancel the text shadow when the browser decides to use custom text. In addition, the list of detection features must be divided into two columns. To achieve this goal, I want to use the CSS columns attribute of the ox cross. This attribute will enable the browser to intelligently split the list columns without disrupting its order. However, although our list has no number numbers, however, they are arranged alphabetically. Of course, not all browsers support this attribute. For browsers that do not support this attribute, we use float to achieve the goal of two columns-after using floating, the list will not be visually arranged in alphabetical order, but there is nothing better.
. 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;
}
I used modernizr again to set different attributes for different situations. If the browser supports CSS columns, the list will be perfectly divided into two columns. If not, using the "no-csscolumns" class added for <HTML> by modernizr, we can also change the list to two columns in floating mode, although not perfect, but it is also better than simply listing a long string of shards.
Here you may notice that I have added different prefixes (-moz-,-WebKit-,-o-) for attributes -), this is because different browser vendors have different definitions for the implementation of this function, so to implement this function, you need to add their corresponding prefixes for different browsers.
After these changes, our new page looks better.
We will add more progressive enhancement effects to our page to end this tutorial. WebKit-based browsers support some better effects, such as CSS conversion, animation, and 3D conversion. In addition, I want to apply some special effects in the last page. Once again, these attributes will be added to our existing CSS and ignored in browsers that do not support them. Therefore, it is appropriate to use modernizr to solve this problem because incremental enhancement is not supported.
First set:
@-WebKit-keyframes spin {
0% {-WebKit-transform: rotatey (0 );}
100% {-WebKit-transform: rotatey (360deg );}
}
.Csstransforms3d.css animations 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 attribute and change them at any stage you like. For more information about animations, see W3C working draft Specification.
Next we add code that allows us to rotate an element in a 3D space:
.Csstransforms3d.css animations section H2 {
Background-image: url(modernizr-logo.png );
Overflow: hidden;
-WebKit-Animation: spin 2 S linear infinite;
}
Because the logo needs to be rotated, and you want it to get along well with the background, a PNG file is used here. I also used the "overflow: hidden" attribute to hide the text in the header with indentation-9999 pixels. It is interesting to make the element rotate in 3D form, but it is not very beautiful. In the end, we choose to use the animation rule to set its rotation cycle to 2 seconds and rotate along its central axis and never stop.
The final page looks awesome, and even has fun animations for WebKit browsers. I hope that now you can understand how easy it is to use modernizr to control your website's wrist and how easy it can make a real progressive enhancement. This is not only the full benefit of modernizr, it can also help you build js-based fallbacks and help you apply HTML5's new features.
Appendix: modernizr detection list:
1. @ font-face
2. Canvas
3. Canvas text
4. webgl
5. HTML5 audio
6. HTML5 audio formats
7. HTML5 video
8. HTML5 video formats
9. rgba ()
10. HSLA ()
11. Border-Image
12. Border-radius
13. Box-shadow
14. Text-shadow
15. Multiple backgrounds
16. Background-size
17. Opacity
18. CSS animations
19. CSS Columns
20. CSS gradients
21. CSS Reflections
22. CSS 2D transforms
23. CSS 3D transforms
24. Flexible Box Model
25. CSS transitions
26. geolocation API
27. input types
28. Input attributes
29. localstorage
30. sessionstorage
31. Web workers
32. applicationcache
33. SVG
34. inline SVG
35. SVG clip paths
36. smil
37. Web SQL database
38. indexeddb
39. Web sockets
40. hashchange event
41. History Management
42. Drag and Drop
43. Cross-window messaging
44. Touch events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
