Don’t get me wrong, IE does not support CSS3 advanced selectors, including the latest IE8 (see "Browser Support for CSS Selectors" for details), but CSS selectors are indeed very useful. It can greatly simplify our work and improve Our code efficiency makes it easy for us to create highly maintainable pages.
However, IE's support for advanced CSS selectors, especially CSS3 selectors, has prevented us from promoting the application of CSS selectors. However, although we cannot control the market share of browsers, we can improve our work through some technologies. We can also use other technologies to allow IE to support CSS3 selectors in disguise.
Keith Clark, a web development engineer from the UK, developed a JavaScript solution to enable IE to support CSS3 selectors. This script supports various versions from IE5 to IE8.
usage
You just need to download Robert Nyman's DOMAssistant script and ie-css3.js and import them in the head tag of your page, like this:
<head>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>
</head>
Supported selectors
nth-child
nth-last-child
nth-of-type
nth-last-of-type
first-child
last-child
only-child
first-of-type
last-of-type
only-of-type
empty
Some limitations of ie-css3
Style sheets must be introduced through the <link> tag. Page-level style sheets or inline style sheets will have no effect. but
You can use @import in external style files to import other style files;
The style sheet file must be placed under the same domain name as the page;
Style files using the file:// path will not work due to browser security issues;
:not() selector is not supported yet;
This method is not dynamic. Changing the DOM after the style is applied will be invalid.
How does it work?
ie-css3.js downloads each style file for the page and parses its CSS3 pseudo-selectors. If a selector is found, it is replaced with the CSS class of the same name. For example: div:nth-child(2) will become div._iecss-nth-child-2. Robert Nyman's DOMAssistant is then used to find the DOM node that matches the element's CSS3 selector and then adds the corresponding CSS class to it.
Eventually, the element's style sheet will be replaced by the new version, and then the corresponding style will be added to the corresponding element using CSS3 selectors.
Avoid IE's CSS interpreter
According to the W3C, a browser should ignore CSS rules it doesn't recognize. This creates a problem - we need to use CSS3 selectors in the style sheet file, but IE will discard them.
To avoid this problem, each style file is downloaded via XMLHttpRequest. This allows the script to bypass the browser's built-in CSS interpreter and be able to read the raw CSS file.
Visit the project homepage
Download ie-css3.js
Download DOMAssistant
alternative
Obviously this is not a perfect solution. For Ajax websites, it is basically unusable, because changing the DOM after the generated style sheet is applied will not be effective. But in fact we can customize an ie-css3 ourselves. It's just not as smart as this one.