Browser compatibility issues with HTML5 and CSS3

HTML5 and CSS3 are very easy-to-use and powerful new attributes. The only major flaw is that many older browsers may not be compatible. Today I will share with you the issue of compatibility of older browsers with HTML5 and CSS3.

1. Let old browsers support HTML5

HTML5 can do a lot for us, the most delicious is the application of semantic tags, if you are already using Chrome or other browsers that support HTML5 If you have used its awesomeness on the browser, then this article must be useful to you, because now you can also use HTML5 on IE.

The first method: Use Google’s html5shiv package (recommended)

First you have to quote the following html5.js file from Google. I won’t go into the benefits:

JavaScript CodeCopy content to the clipboard

1.

will Copy the above code to the head part, remember it must be the head part (because IE must know this element before parsing the element, so this js file cannot be called in other locations, otherwise it will be invalid)

Mainly let these html5 tags In lumps, like p. Okay, let’s keep it simple, in one sentence: quote html5.js to make html5 tags blocky

The second method: Coding JavaScript

JavaScript Code copies the content to the clipboard

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(&#39;, &#39;);  
8.     var i= e.length;  
9.     while (i--){  
10.         document.createElement(e[i])  
11.     }   
12.})()   
13.</script>  
14.<![endif]-->

But no matter which of the above methods is used, the CSS of the new tag must be initialized. Because HTML5 behaves as inline elements by default, we need to use CSS to layout these elements Manually convert them into block elements for easy layout

XML/HTML Code Copy the content to the clipboard

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

But if users of ie6/7/8 disable scripts, it will become an unstyled "whiteboard" web page ,How should we solve it?

We can refer to Facebook's approach, which is to guide users to enter the "/?_fb_noscript=1" page with the noscript logo and replace the html5 tag with the html4 tag. This is better than maintaining the It's easier to write a lot of hacks for compatibility.

XML/HTML Code copy content to the clipboard

1.<!--[if lte IE 8]>   2.<noscript> 3.     <style>.html5-wrappers{display:none!important;}</style> 4.     <p class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.  5.     </p> 6.</noscript> 7.<![endif]-->

This can guide the user to open the script, or jump directly to the HTML4 tag design interface.

2. Make old browsers compatible with CSS3 (incomplete compatibility solution)

As of Internet Explorer 8, the IE series does not support CSS3. To do some commonly used effects in IE, such as rounded corners and shadows, you need to use some redundant and meaningless elements and pictures to create these effects. After getting tired of these, I thought about using more concise, direct and effective, CSS3-style methods to solve these problems. Fortunately, even Internet Explorer, which has been criticized, is powerful enough in its own right. IE's unique technology can achieve some CSS3 effects very well.

OpacityTransparency

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

CSS Code Copy content to the clipboard

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

Here is a semi-transparent area
opacity: .4;

filter:alpha(opacity=40);

border-radius rounded corner/Box Shadow box shadow/Text Shadow text shadow

In IE, you can use Vector Markup Language (VML) and javascript to achieve these effects, see IE-CSS3, After referencing an HTC file, these three CSS3 properties can be used in IE browser.

CSS Code Copy content to the clipboard

1.-moz-border-radius: 15px; /* Firefox */ 
2.-webkit-border-radius: 15px; /* Safari 、Chrome */ 
3.border-radius: 15px; /* Opera 10.5+, IE6+ 使用 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+ 使用 IE-CSS3 */ 
7.behavior: url(ie-css3.htc); /*引用ie-css3.htc */

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

shadow will produce continuous, gradient shadows

CSS Code Copy content to clipboard

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

CSS Code Copy content to clipboard

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

The filter seems to be related to the existing htc script Conflict, 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 elements

I believe that after reading these cases You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Implementation steps of using Js to operate HTTP Cookies

Detailed introduction to Js operating BOM object model

What is the difference between div and span in HTML web page layout

The above is the detailed content of Browser compatibility issues with HTML5 and CSS3. For more information, please follow other related articles on the PHP Chinese website!