Let the low version IE also can run the HTML5+CSS3 website 3 kinds of solutions

Source: Internet
Author: User

Now we can choose a very large number of browsers, so the browser environment is also a wide range, the same browser also contains a variety of different versions, different versions of the rendering methods are also differences, they support the HTML5, CSS3 features are probably not the same. This has caused web developers to face a huge number of browser types as they develop their web sites.

If the development of the minimum standards, such as IE6 not supported by the features, we do not have to write this article, but I think this is very rare, more development, in the modern browser using the features they support, and in the early browser to do a certain downgrade processing, which is called "progressive enhancement", is also the focus of this article. In the following way, I hope that the site can also be able to magically run on the low version of IE browser better!

Htmlshiv.js

Remy Html5shiv uses JavaScript to create HTML5 elements (such as main, header, footer, etc.). The elements created by JavaScript to some extent are styleable (can be styled). We can spend a lot of time thinking about how it works, but who cares? This strategy still has to be used on all product sites.

<!--[if LT IE 9]><script src= "Http://cdn.bootcss.com/html5shiv/3.7/html5shiv.js" ></script><! [endif]-->
Selectivizr.js

Selectivizr.js is an incredible resource for populating unsupported CSS selectors and attributes, including important last-child. In the recent redesign, I embed the SELECTIVIZR and don't miss any details on older IE browsers. Here is my implementation code:

<!--[If LTE IE 8]><script src= "Http://cdn.bootcss.com/selectivizr/1.0.2/selectivizr.js" ></script ><! [endif]-->

Modern projects are absolutely essential. Only when the old version of IE is loaded.

In addition, the Modernizr script has added HTML5 browser support Script Html5shiv, we just reference moernizr.js file, IE9 the following IE browser support HTML5 added semantic tags such as nav, section, article, etc. You can also use CSS to style them.

Conditional comment

You must have seen the most Earth-like situation below. But whether ugly or not, the code actually runs exactly as expected:

<! DOCTYPE html><!--[if LT IE 7]> 

The above method is for CSS, to write some of the different versions of IE different styles. First determine which version of IE the user uses, and then add the version of the class on the label, so that it is convenient to hack.

Then we can write this in the CSS file:

. IE6 xxx {};. IE7 xxx {};

This is the most efficient method that is currently considered by small-scale, which does not require or wait for JavaScript, and does not require a heavyweight JavaScript library. The styles you define are immediately effective and do not have a splash screen.

Although IE is catching up with rivals, the new version of IE has changed a lot and wants to reinvent the Web experience with new ie. But in the domestic old version of IE is still relatively popular. The good news is that these resources run well on all modern browsers and are not expensive!

Let the low version IE also can run the HTML5+CSS3 website 3 kinds of solutions

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.