在IE中使用高級CSS3選擇器

別誤會，IE是不支援CSS3高級選擇器，包括最新的IE8（詳見《CSS選擇器的瀏覽器支援》），但是CSS選擇器的確是很有用的，它可以大大的簡化我們的工作，提高我們的程式碼效率，並讓我們很方便的製作高可維護性的頁面。

然而IE對高階CSS選擇器特別是CSS3選擇器的支援讓我們一直無法將CSS選擇器推廣應用。不過，雖然我們無法左右瀏覽器的市場份額，卻可以透過一些技術改善我們的工作。我們也可以使用其它的一些技術，讓IE可以變相支援CSS3選擇器。

一位來自英國的網頁開發工程師Keith Clark開發了一個JavaScript方案來讓IE支援CSS3選擇器。該腳本支援從IE5到IE8的各個版本。

用法

你只需要下載Robert Nyman的DOMAssistant腳本和ie-css3.js並將它們在你的頁面的head標籤中導入，如下：

支援的選擇器

• 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

ie-css3的一些限制

• 樣式表必須透過標籤引入。頁面層級的樣式表或內聯的樣式表將無效。不過
• 可以在外部樣式檔案中使用@import 匯入其它樣式檔案；
• 樣式表檔案必須和頁面放在同一個網域下方；
• 使用file://路徑的樣式檔案將因瀏覽器的安全性問題而無法運作；
• :not()選擇器尚不支援；
• 此方法不是動態的，樣式被套用之後再改變DOM，將會無效。

如何工作的?

ie-css3.js下載頁面的每一個樣式檔案並解析它的CSS3偽選擇器。如果一個選擇器被找到，它就會被替換為同名的CSS class。例如： div:nth-child(2) 將會變成div._iecss-nth-child-2 。然後，Robert Nyman的DOMAssistant用於尋找匹配元素CSS3選擇器的DOM節點然後將相應的CSS類別新增給它。

最終，元素的樣式表會被新的版本取代，然後用CSS3選擇器對對應元素新增對應的樣式。

避免IE的CSS解釋器

根據W3C的規定，一個瀏覽器應該無視它不認識的CSS規則。這就出現一個問題──我們需要利用樣式表檔案中的CSS3選擇器，但是IE會將它們丟棄。

為了避免這個問題，每個樣式檔案都會透過XMLHttpRequest下載。這允許該腳本繞過瀏覽器內建的CSS解釋器並能夠讀取原始的CSS檔案。

• 訪問項目主頁
• 下載ie-css3.js
• 下載DOMAssistant

替代方案

顯然這個也並非完美的方案，對於Ajax網站來說，它基本上是不能用的，因為在生成的樣式表被應用之後再改變DOM，就不會有效了。但事實上我們可以自己來自訂一個ie-css3的。只是沒有它這個這麼聰明。