Shulou(Shulou.com)06/03 Report--

In this issue, Xiaobian will bring you about how to solve the problem of compatibility between old browsers HTML5 and CSS3. The article is rich in content and analyzes and narrates from a professional perspective. After reading this article, I hope you can gain something.

1. Make older browsers support HTML5

HTML5 can do a lot for us, the most delicious is the application of semantic tags, if you have already used its awesome x on Chrome or other browsers that support HTML5, 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 of all, you have to quote the following html5.js file that references Google, and the benefits are not mentioned:

JavaScript Code Copy content to clipboard

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

The main thing is to block these html5 tags, like div. Well, let's make it simple. In a word, quote html5.js to make html5 tags into blocks.

The second method: Coding JavaScript

JavaScript Code Copy content to clipboard

But either way, initialize the CSS for the new tag. Because HTML5 appears as inline elements by default, we need to use CSS to manually turn them into block elements for easy layout.

XML/HTML Code Copy content to clipboard

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

But if ie6/7/8 disables scripted users, then it becomes a "whiteboard" page with no style. What should we do about it?

We can follow Facebook's example by directing users to "/?_" with the noscript logo. fb_noscript=1"page, replacing html5 tags with html4 tags, which is lighter than writing a lot of hacks to maintain compatibility.

XML/HTML Code Copy content to clipboard

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

2. Make older browsers compatible with CSS3 (not fully compatible)

As of Internet Explorer 8, IE series does not support CSS3. To do some common effects in IE such as rounded corners and shadows, you need to use some redundant and meaningless elements and images to make these effects. After getting tired of this, I want to solve these problems in a more concise, direct and effective way. Fortunately, even the much-criticized Internet Explorer is powerful enough in itself. IE's unique technology can achieve some of the effects of CSS3 very well.

Opacity Transparency

Element transparency can be easily achieved in IE using filters.

CSS Code Copy content to clipboard

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

Here, the translucent area

opacity: .4;

filter:alpha(opacity=40);

border-radius/Box Shadow/Text Shadow

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

CSS Code Copy content to clipboard

-moz-border-radius: 15px;/* Firefox */ -webkit-border-radius: 15px; /* Safari, Chrome */ border-radius: 15px; /* Opera 10.5+, IE6+ using IE-CSS3*/ -moz-box-shadow: 5px 5px #000; /* Firefox */ -webkit-box-shadow: 5px 5px #000; /* Safari, Chrome */ box-shadow: 5px 5px 50px #000;/* Opera 10.5+, IE6+ uses IE-CSS3 */ behavior: url(ie-css3.htc); /* references ie-css3.htc */

In fact, IE has its own filters for shadow and drop-shadow effects.

shadow produces continuous, gradual shadows

CSS Code Copy content to clipboard

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

Drop-shadow produces shadows without shading

CSS Code Copy content to clipboard

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

Filters seem to conflict with existing htc scripts, or what you might call properties: when both are enabled on an element, the filter effect is transferred to its children

The above is how to solve the problem of compatibility between old browsers HTML5 and CSS3 shared by Xiaobian. If there is a similar doubt, please refer to the above analysis for understanding. If you want to know more about it, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.