萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 在IE中使用高級CSS3選擇器
在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標簽中導入，如下：
<head>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>
</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的一些限制
樣式表必須通過《link》標簽引入。頁面級的樣式表或者內聯的樣式表將無效。不過
可以在外部樣式文件中使用@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的。只是沒有它這個這麼智能。
使用 cssQuery
cssQuery是由業界大牛Dean Edwards開發的一個Javascript組件。它就是為CSS 選擇器而生的。它可以支持幾乎所有的CSS 選擇器，包括CSS3選擇器。當然它在實現的時候進行了分級，分別針對CSS1，CSS2和CSS3制作了一個獨立的js包，以及一個標准包。支持所有A級浏覽器。
簡單的用法：
var tags = cssQuery("body > p");
var tags = cssQuery("[href]");
var tags = cssQuery("a[href='#']");
然後你就可以自己寫一些js為相應的對象添加想用的樣式了。
我建議對支持CSS高級選擇器的浏覽器使用原生的CSS選擇器寫法，然後通過cssQuery在IE中動態的為響應的元素添加一個樣式名。
比如，我們可以這樣寫CSS：
a[herf='#'],a.empty{color:red}
這裡的第一條CSS3選擇器是用於Firefox/webkit等支持CSS3選擇器的非IE浏覽器的，a.empty是專門為IE而寫。然後通過CSSQuery動態的在IE浏
覽器中為對應的元素添加樣式：
var tags = cssQuery("a[href='#']");
tags.className="empty";
當然，上面的這段js最好使用IE的條件注釋。
使用 jQuery
據說jQuery的選擇器比cssQuery要快很多。當然，無可否認，jQuery的選擇器是目前流行的js框架中最好用的一個。而使用jquery來實現類似上述功能要方便很多，因為jQuery的選擇器更好用。
OK，jQuery的做法和cssQuery有些類似，CSS可以寫成上面一樣的，JS可以這樣寫：
$("a[href='#']").addClass("empty");
更具體的用法可以查看我之前寫的一個小例子《使用jQuery創建個性化鏈接樣式》
使用 DOMAssistant
DOMAssistant也是一個很不錯的JS庫，它提供了一些類似jQuery的功能，比如CSS 選擇器、事件以及一些DOM操作。它的優點就是小巧，壓縮後只有9KB，我想這就是Keith Clark選擇DOMAssistant來作為ie-css3.js的基礎框架的主要原因吧。jQuery越來越肥胖了，而且用於實現這個功能有些浪費了。而且DOMAssistant的用法和jQuery非常類似。
事實上，DOMAssistant的選擇器和對DOM的CSS Class的操作與jQuery一模一樣。
$("a[href='#']").addClass("empty");
欲了解更多，可查看DOMAssistant官方，以及下載官方中文PDF文檔
總結
其實，無論是ie-css3.js本身，還是後來我們討論的三種替代方法，都是一種方法，就是用js動態的添加class到頁面元素中。不同是ie-css3自動化的完成了這些工作，而後面的三種方案要自己動手根據自己的項目寫一些js來實現。我認為ie-css3最方便，基本不用怎麼維護，但是它一刀切，效率比較低，而且靈活性差，不適合於ajax項目。而後面的這幾種方案靈活性強，但是要做很多額外的工作，無論你是將IE專用樣式獨立到一個專用的css文件中還是像文中寫的那樣和CSS3選擇器寫到一起，都會大大的增加你的工作量和維護成本。
為IE，我們要額外付出很多。
有更好的想法或創意嗎？歡迎與我們分享。
- 上一頁:WEB標准
- 下一頁:120個優秀的水平導航設計
