Ten years ago, only the most cutting-edge website designers would use CSS for web page layout and embellishment. At that time, browsers' support for CSS layout was both incomplete and full of loopholes, so while these people insisted on WEB standardization, they had to use hacks to make their pages display normally 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 brand and version of the browser the user is using. Browser sniffing technology can quickly branch code to apply different instructions to different browsers.
Today, CSS-based layouts are already very common, and browsers support it very solid. But now CSS3 and HTML5 are here, history has turned around and returned to its original place - the support for these new technologies by various browsers has begun to become uneven again. We have long been used to writing neat and standard-compliant codes, and we will no longer use CSS hacks or browsers to sniff unreliable and low-level technologies. We also believe that more and more users will agree with the idea that websites do not have to look the same in all browsers. So in the face of this familiar situation (different browser support) now, what should we do? Simple: Use feature detection, which means we don't have to ask the browser who are you? To make unreliable speculations. Instead, we ask the browser if you can do this or that. This is easy to detect browsers, but it is still boring to spend time manually testing them one by one. Modernizr can help us at this time.
Modernizr: A functional detection library specially developed 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 the differences in guest browsers (referring to differences in support of new standards). It allows designers to take full advantage of HTML5 and CSS3 features for development in browsers that support HTML5 and CSS3 without sacrificing the control of other browsers that do not support these new technologies.
When you embed Modernizr's script in a web page, it will detect whether the current browser supports CSS3 features, such as @font-face, border-radius, border-image, box-shadow, rgba(), etc., and it will also detect whether the HTML5 features are supported - such as audio, video, local storage, and new tag types and properties. On the basis of getting this information, you can use them on browsers that support these features to decide whether to create a JS-based fallback or simply downgrade those that do not support them. In addition, Modernizr can also enable IE to support the application of CSS styles on HTML5 elements, so developers can immediately use these more semantic tags.
Modernizr is developed based on the theory of progressive enhancement, so it supports and encourages developers to create their website layer by layer. Everything starts with an idle foundation with Javascript applied, adding enhanced application layers one by one. Because Modernizr is used, it is easy for you to know what the browser supports. Let's take a look at an example of creating cutting-edge websites by applying Modernizr.
Start with applying Modernizr
First, download the latest stable version of Modernizr from www.modernizr.com (the official website of Modernizr is currently blocked in China, and we can download it from github. Or to be simpler, you can download the latest version 1.7 script file from the master). On the official website, you can also see a list of all the features it supports for detection (the last page of this article will give these lists so that children's shoes that cannot be flipped through the wall can know which ones they support). After downloading the latest version (the author used version 1.5 when writing this article), add it to the page area:
Next, add no-js class to the element.
When Modernizr runs, it will turn the no-js class into js to let you know that it is running. Modernizr does not just do this, it also adds a class class to all features it detects. If the browser does not support a feature, it prefixes the class name corresponding to the feature by no-. So, your element may become like this:
Modernizr will also create a JS object named Modernizr, which is a list of boolean results given for each detected feature. If the browser supports a 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 will also contain more detailed information for certain functions, 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, etc.
Our unprocessed, simple little page looks a bit like a pre-test system, but it has better semantics and accessibility. Let's add a little basic style to it: a little text format, color, and layout to make it look better. At present, there is nothing new, just add expression styles to a semantic structure HTML page, and look at the page after adding the style.
Below, we want to enhance this page to make it more interesting. I want to apply a peculiar text effect to h1 on the head, 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 content of the page beautiful. Now, the more powerful CSS3 allows you to add more properties to a rule that will ignore them if the browser does not support them. With CSS cascade (inheritance), you can use new properties like border-radius without relying on Modernizr. However, using Modernizr can provide you with some features that cannot be provided by existing means: dynamically modified class names based on the browser's differential support for new things. I'll illustrate this by adding 2 new rules to our page:
The first rule adds a 12-pixel rounded corner to the #content element. But in the existing page, we have set a border with the #content element with an attribute value of 2px outset #666. This looks pretty good when the box is right angles, but not in rounded corners. Thanks to Modernizr, I can set a 1px real edge to box with border-radius supported by the browser.
The second rule is a little bit more advanced. We added a shadow to the #content element and removed the border attribute for browsers that support box-shadow attributes. Why? Because most browsers do not provide a good performance for the combination of edges and corners with shadows (this is a flaw in a browser that should be noted, but we have to endure it now). Instead of using shadows and only using borders, I would rather use shadows to surround elements. In this way, I can have the best, accurate, and best CSS performance in the world: a beautiful shadow will appear in a browser that supports the box-shadow attribute; a browser that only supports the border-radius attribute will present a beautiful rounded thin border; for those broken browsers that do not support these two, we will see a 2-pixel right-angle border.
Below we want to apply a custom special font to the header. The following is our current statement for h1, with no changes:
These statements work well on our base pages, and the 27-pixel text size is also suitable for the display of those fonts we set for h1. But for the font I'm going to use called Beautiful, 27 pixels is too small. Here we want to add other rules to use this custom font:
First, we add the @font-face declaration and specify the path, file name, and font name for our custom fonts. Then we use a CSS statement to select the 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 the text of other fonts, so we must instruct the browser to give h1 a large font size when displaying our custom fonts.
Additionally, our beautiful handwritten text has some rendering issues with text shadowing, so we have to cancel the text shadowing when the browser decides to use custom text. In addition, the list of detection feature parts needs to be divided into two columns. To achieve my goal, I want to use the awesome CSS columns attribute, which will enable the browser to intelligently divide the list into columns without disrupting its order. Although our list does not have a numerical number, it is also arranged in alphabetical order. Of course, not all browsers support this property. For those that do not support, we use float to achieve the purpose of 2 columns - after using float, the list will no longer be arranged alphabetically anymore, but that's better than nothing.
I've used Modernizr again to set different properties for different situations. If the browser supports CSS columns, it will perfectly divide the list into 2 columns. If it is not supported, we can also use floating method to make the list into two columns by floating. Although it is not so perfect, it is better than directly applying a long list of single columns.
Here you may have noticed that I have added different prefixes (-moz-, -webkit-, -o-) to the attribute. This is because different browser manufacturers have different definitions of the implementation of this function, so to implement this function, they need to add their corresponding prefixes to different browsers.
After these changes, our new page looks better.
We will add more progressive enhancements to our page to end this tutorial. WebKit-based browsers support some more awesome special effects, such as CSS transformation, animation and three-dimensional transformation. And I want to apply some of these special effects in the pages of the last stage. Again, these properties will be added to our existing CSS and ignored in browsers that do not support them. Therefore, it is appropriate to use Modernizr for this situation where gradual enhancement is not supported on the one hand.
First set:
The @keyframes rule is part of the new CSS animations specification and currently only supports WebKit. It allows you to declare a complete animation path for any attribute and change them at any stage you like. To learn more about animations, read W3C Working Draft specification.
Here we add the code that causes an element to rotate in three-dimensional space:
Because the logo needs to be rotated, and I hope it will get along more harmoniously with the background when it is rotated, so a png format file is used here. I also used an overflow:hidden attribute to hide the text in the header with indented-9999 pixels. It is interesting to make the elements rotate in 3D, but not too beautiful. Finally, we chose to use the animation rule, setting its rotation period to 2 seconds, rotating along its own central axis, never stopping.
The final page looks great, and even sets up fun animations for the WebKit browser. I hope so far you can understand how awesome it can make your wrist with Modernizr control over your website and how simple it can make real progressive enhancement. This is not just the full benefit of Modernizr, it can also help you build fallbacks based on JS and help you apply the awesome new features of html5.