If we follow the lowest standards when developing, for example, if we don’t use any features that IE6 does not support, then there is no need to write this article; but I think this situation is very rare, and more development is done in modern browsers. Use the features they support and perform certain downgrades on early browsers. This is the so-called "progressive enhancement" and is the focus of this article. Through the following method, I hope that the website can miraculously run better on lower versions of IE browsers!
htmlshiv.js
Remy's HTML5shiv uses JavaScript to create HTML5 elements (such as main, header, footer, etc.). Elements created with JavaScript are styleable to some extent. We could spend a lot of time thinking about how this works, but who cares? This strategy is still a must on all product websites.
selectivizr.jsSelectivizr.js is a Incredible resource for populating unsupported CSS selectors and properties, including the important last-child. In a recent redesign, I embedded selectivizr and didn't miss any details on older IE browsers. The following is my implementation code:
An absolute must for modern projects. Only loaded in older versions of IE.
In addition, the HTML5 browser support script html5shiv has been added to the Modernizr script. As long as we quote the Moernizr.js file, IE browsers below IE9 support the semantic tags added by HTML5 such as nav, section, article, etc. You can also use CSS Stylize them.
Conditional Comments
You must have seen the most common situation below. But ugly or not, the fact is that this code works exactly as expected:
The above method is used in css to write some style differences for each version of IE. First determine which version of IE the user is using, and then add the class of that version to the label, which can facilitate hacking.
Then we can write like this in the css file:
.ie6 xxx {};
.ie7 xxx {};
This is the most efficient method currently considered by the editor. This method does not require or wait for JavaScript, and does not require heavyweight JavaScript library. The styles class you define takes effect immediately, and there is no splash screen yet.
Although IE browser is catching up with its competitors, the new version of IE also has very big changes, and it is hoped to use the new IE to reshape the network experience. But the old version of IE is still relatively popular in China. The good news is that these resources work well on all modern browsers and don’t cost much!