Using the Advanced CSS3 selector in IE

Don't get me wrong, IE is not supported CSS3 Advanced selector, includes the latest IE8 (see browser support for CSS selectors), but CSS selectors are really useful, it can greatly simplify our work, improve our code efficiency, and make it easy for us to make highly maintainable pages.

However, IE's support for advanced CSS selectors, especially the CSS3 selector, has kept us from extending the CSS selector. However, while we are unable to control the market share of the browser, we can improve our work through some technology. We can also use other techniques to allow IE to support CSS3 selectors in disguise.

Keith Clark, a Web development engineer from the UK, has developed a JavaScript program to enable IE to support the CSS3 selector. This script supports each version from IE5 to IE8.

Usage

All you need to do is download Robert Nyman's domassistant scripts and ie-css3.js and import them into the head tag of your page as follows:

<script type= "Text/javascript" src= "Domassistantcompressed-2.7.4.js" ></script> <script type= "Text/javascript" src= "Ie-css3.js" ></script>

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 tab. The page-level style sheet or inline style sheet will not work. But

You can import other style files using @import in an external style file;

The style sheet file must be placed under the same domain name as the page;

Style files that use the file://path will not work because of browser security issues;

: not () selector not yet supported;

The method is not dynamic, and changing the DOM after the style is applied will not work.

How does that work?

Ie-css3.js downloads Each style file of the page and parses its CSS3 pseudo selector. If a selector is found, it is replaced with the CSS class with the same name. For example: Div:nth-child (2) will become div._iecss-nth-child-2. Then Robert Nyman's domassistant is used to find the DOM node that matches the element CSS3 selector and then add the corresponding CSS class to it.

Eventually, the style sheet for the element is replaced by a new version, and the corresponding style is added to the element with the CSS3 selector.

CSS interpreter to avoid IE

According to the rules of the consortium, a browser should ignore the CSS rules it does not know. There is a problem-we need to take advantage of the CSS3 selector in the stylesheet 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 to read the original CSS file.