Old-fashioned browsers are compatible with HTML5 and CSS3, html5css3

Old-fashioned browsers are compatible with HTML5 and CSS3, html5css3
 1. Support HTML5 in old browsersHTML5 can do a lot for us. The most delicious thing is the semantic tag application. If you have used it in Chrome or other HTML5-supported browsers, this article will be useful to you, because now you can also use HTML5 on IE.Method 1: use Google's html5shiv package (recommended)First, you need to reference the following html. js file of Google:

1 <!--[if IE]>2 <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>3 < ![endif]-->

 

 

Copy the above Code to the head part. Remember to use the head part.(Because IE must know this element before parsing the element, this js file cannot be called elsewhere, otherwise it becomes invalid)

These html5 labels are mainly made into blocks, like div. Okay, let's just put it simply: Reference html5.js to make html5 labels into blocks.

 

Method 2: Coding JavaScript 

 1 <!--[if lt IE9]>  2 <script>  3    (function() { 4      if (!  5      /*@cc_on!@*/ 6      0) return; 7      var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', '); 8      var i= e.length; 9      while (i--){10          document.createElement(e[i])11      } 12 })() 13 </script>14 <![endif]-->

 

 

However, no matter which method is used, the CSS of the new tag must be initialized. because HTML5 is represented by inline elements by default, we need to use CSS to manually convert these elements into block elements for easy layout.

 

1 /*html5*/2 article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

 

However, if ie6/7/8 disables the script, it will become a "whiteboard" webpage without style. How can we solve this problem?

We can refer to facebook's practice to guide users into the noscript-marked"/? _ Fb_noscript = 1"Page, use html4 tags to replace html5 tags, Which is lighter than writing a large number of hack to maintain compatibility.

1 <! -- [If lte IE 8]> 2 <noscript> 3 <style>. html5-wrappers {display: none! Important ;}</style> 4 <div class = "ie-noscript-warning"> your browser has disabled the script, please <a href = ""> check here </a> to enable the script! Or <a href = "/? Noscript = 1 "> continue access </a>. 5 </div> 6 </noscript> 7 <! [Endif] -->

In this way, the user can be guided to open the script or directly jump to the HTML 4 tag design interface.

 

2. Make the old-fashioned browser compatible with CSS3 (not fully compatible)

Up to Internet Explorer 8, the IE series does not support CSS3. To do some common effects such as rounded corners and shadows in IE, you need to use redundant and meaningless elements and images to make these effects. After getting tired of this, I want to solve these problems with a more concise, effective, and css3. Fortunately, even the criticized Internet Explorer is powerful enough. The technology unique to IE can achieve some good CSS3 effects.

 

Opacity transparency

The transparency of elements can be easily achieved using filters in IE.

1 background-color:green;2 opacity: .4;3 filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

Translucent Area
Opacity:. 4;

Filter: alpha (opacity = 40 );

 

Border-radius rounded corner/Box Shadow/Text Shadow

In IE, Vector Markup Language (VML) and javascript can be used to achieve these effects. See the IE-CSS3, after referencing an HTC file, you can use these three CSS3 attributes in IE.

1-moz-border-radius: 15px;/* Firefox */2-webkit-border-radius: 15px;/* Safari, Chrome */3 border-radius: 15px; /* Opera 10.5 +, IE6 + use IE-CSS3 */4-moz-box-shadow: 5px 5px 5px #000;/* Firefox */5-webkit-box-shadow: 5px 5px 5px #000;/* Safari, Chrome */6 box-shadow: 5px 5px 50px #000;/* Opera 10.5 +, IE6 + use IE-CSS3 */7 behavior: url (ie-css3.htc);/* Reference ie-css3.htc */

In fact, IE has its own filter to implement shadow and drop-shadow effects.

Shadow produces continuous and gradient shadows.

1 filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=10);

The shadow generated by drop-shadow does not have any variation in light and shade.

 

1 filter:progid:DXImageTransform.Microsoft.DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1");

 

The filter seems to conflict with the existing htc script, or it can be called a feature: when both are enabled on an element at the same time, the filter effect will be transferred to its child element.