Modernizr: generated for HTML 5 and CSS3

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). The navigator. userAgent attribute in Javascript is used to determine the browser of the user's brand and version. Browser sniffing technology can quickly branch code to apply different commands to different browsers.

BKJIA recommendation topic: detailed explanation of next-generation Web development standards in HTML 5

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 different browser support in the current familiar situation? 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 referring to differences in support for 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 newThe type and attribute of the tag. 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 has been 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 the list of all features that it supports detection. This article will show the list at the end, in this way, you can know what the kids shoes support ). After downloading the latest version, the author uses version 1.5 when writing this article.) add it toRegion:

 
 

  
  
 
  
  
 
  
  
 
  
  
    
  
  
My Beautiful Sample Page 
  
  
    
  
  
 
  
  
… 
 
 

NextAdd the "no-js" class to the element.

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. So, yourThe elements may look like the following:

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" instead of relying on Modernizr. However, the use of Modernizr can provide you with some functions that are not supported by the existing means: dynamically modifyClass Name. 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,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 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 combining border with corner and shadow. This is a flaw in the browser that should be noticed, but we must endure it now ). 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 notThe added "no-csscolumns" class can also be changed to two columns in floating mode. Although it is not perfect, it is also better than directly listing a long string.

Here you may notice that I have added different prefixes for attributes-moz-,-webkit-, and-o -), 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.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 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.cssanimations section h2 {  
  
  
    background-image: url(modernizr-logo.png);  
  
  
    overflow: hidden;  
  
  
    -webkit-animation: spin 2s 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.

Address: http://www.mhtml5.com/2011/03/676.html