|
別誤會，IE是不支持CSS3高級選擇器，包括最新的IE8（詳見《CSS選擇器的瀏覽器支持》），但是CSS選擇器的確是很有用的，它可以大大的簡化我們的工作，提高我們的代碼效率，并讓我們很方便的制作高可維護性的頁面。
然而IE對高級CSS選擇器特別是CSS3選擇器的支持讓我們一直不能將CSS選擇器推廣應(yīng)用。不過，雖然我們無法左右瀏覽器的市場份額，卻可以通過一些技術(shù)改善我們的工作。我們也可以使用其它的一些技術(shù)，讓IE可以變相支持CSS3選擇器。
一位來自英國的網(wǎng)頁開發(fā)工程師Keith Clark開發(fā)了一個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>標簽引入。頁面級的樣式表或者內(nèi)聯(lián)的樣式表將無效。不過你可以在外部樣式文件中使用@import 導入其它樣式文件；
- 樣式表文件必須和頁面放在同一個域名下面；
- 使用file://路徑的樣式文件將由于瀏覽器的安全問題而不起作用；
- :not()選擇器尚不支持；
- 該方法不是動態(tài)的，樣式被應(yīng)用之后再改變DOM，將會無效。
如何工作的?
ie-css3.js下載頁面的每一個樣式文件并解析它的CSS3偽選擇器。如果一個選擇器被找到，它就會被替換為同名的CSS class。比如： div:nth-child(2) 將會變成 div._iecss-nth-child-2 。然后，Robert Nyman的DOMAssistant用于尋找匹配元素CSS3選擇器的DOM節(jié)點然后將相應(yīng)的CSS類添加給它。
最終，元素的樣式表會被新的版本替代，然后用CSS3選擇器對相應(yīng)元素添加對應(yīng)的樣式。
避免IE的CSS解釋器
根據(jù)W3C的規(guī)定，一個瀏覽器應(yīng)該無視它不認識的CSS規(guī)則。這就出現(xiàn)一個問題——我們需要利用樣式表文件中的CSS3選擇器，但是IE會將它們丟棄。
為了避免這個問題，每一個樣式文件都會通過XMLHttpRequest下載。這允許該腳本繞開瀏覽器內(nèi)置的CSS解釋器并能夠讀取原始的CSS文件。
出處：前端觀察
責任編輯：bluehearts
上一頁 下一頁 在IE中使用高級CSS3選擇器 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 在IE中使用高級CSS3選擇器 [1]
第 2 頁 
