Html5css3 is compatible with HTML5 and CSS3 in older browsers.

Html5css3 is compatible with HTML5 and CSS3 in older browsers.

1. Support HTML5 in old browsers
 
HTML5 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:

Copy the content to the clipboard using JavaScript Code

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 and 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 will not work)

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

Copy the content to the clipboard using JavaScript Code

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.

Copy XML/HTML Code to clipboard

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.

Copy XML/HTML Code to clipboard

1. <! -- [If lte IE 8]>
2. <Noscript>
3. <Style>. html5-wrappers {display: none! Important ;}</style>
4. <Div class = "ie-noscript-warning"> scripts are disabled in your browser. <a href = ""> here </a> to enable scripts! 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.

Copy the content to the clipboard using CSS Code.

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.

Copy the content to the clipboard using CSS Code.

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.

Copy the content to the clipboard using CSS Code.

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.

Copy the content to the clipboard using CSS Code.

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.

The above question about compatibility with HTML5 and CSS3 in old-fashioned browsers is all the content that I have shared with you. I hope you can give us a reference and support for more customers.