How to deal with old versions of browsers that are not compatible with H5 and C3

This time I will bring you how to deal with the problem that the old version of the browser is not compatible with H5 and C3. How to make the old version of the browser support HTML5? What are the precautions for older browsers to be compatible with H5 and C3? The following is a practical case, let’s take a look.

HTML5 can do a lot for us, the most delicious is the application of semantic tags. If you have used its awesomeness 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 from Google. The benefits will not be mentioned:

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

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

Mainly to let These html5 tags are in blocks, like divs. Okay, let’s keep it simple, in one sentence: quote html5.js to make html5 tags blocky

Second method: Coding JavaScript

<!--[if lt IE9]>    
<script>    
   (function() {   
     if (!    
     /*@cc_on!@*/  
     0) return;   
     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;);   
     var i= e.length;   
     while (i--){   
         document.createElement(e[i])   
     }    
})()    
</script>   
<![endif]-->

But no matter how you use it Either of the above methods must initialize the CSS of the new tag. Because HTML5 behaves as inline elements by default, to layout these elements we need to use CSS to manually convert them into block elements for convenient layout.

/*html5*/   
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 , that is, guiding the user to enter the "/?_fb_noscript=1" page with the noscript logo, and replacing the html5 tag with the html4 tag. This is lighter than writing a lot of hacks to maintain compatibility.

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

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

Translucent area here
opacity: .4;

filter:alpha(opacity=40);

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

You can use Vector Markup Language (VML) and javascript to achieve these effects in IE, see IE-CSS3, after citing an HTC file, inIE browserYou can use these three CSS3 properties.

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

Related reading:

Detailed steps to create a book management platform using vue.js

How to count table sum in bootstrap The number

vue.js todolistHow to implement

The above is the detailed content of How to deal with old versions of browsers that are not compatible with H5 and C3. For more information, please follow other related articles on the PHP Chinese website!