国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > CSS > 正文

在IE中使用高級CSS3選擇器

2020-03-24 17:11:03
字體:
來源:轉載
供稿:網友
別誤會,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 html' target='_blank'>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文件。替代方案顯然這個也并非完美的方案,對于Ajax網站來說,它基本上是不能用的,因為在生成的樣式表被應用之后再改變DOM,就不會有效了。但是事實上我們可以自己來自定義一個ie-css3的。只是沒有它這個這么智能。使用 cssQuerycssQuery是由業界大牛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創建個性化鏈接樣式》使用 DOMAssistantDOMAssistant也是一個很不錯的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,我們要額外付出很多
html教程

鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 乐至县| 凭祥市| 阳江市| 鄂托克前旗| 旌德县| 石首市| 行唐县| 屏南县| 达拉特旗| 潮安县| 太原市| 梁山县| 新疆| 南溪县| 武宣县| 梁河县| 张家港市| 南宁市| 宁晋县| 大城县| 昆明市| 溆浦县| 仪征市| 罗山县| 娄烦县| 丽水市| 汉中市| 开原市| 资中县| 正定县| 韶山市| 罗平县| 清水县| 呼玛县| 黔西| 江源县| 西乡县| SHOW| 祁阳县| 九江县| 阿克陶县|