CSS忍者:安全的CSS hacks祕籍

通過條件判斷引入樣式表

使我們能很容易在 IE 瀏覽器中通過條件註釋語句加載指定樣式表,而其他非 IE 內核瀏覽器則自動忽略這段蹩腳的 HTML註釋。下面是一個例子:

  1. <!--[if IE 8]><link rel="stylesheet" href="ie8.css"><![endif]--> 
  2. <!--[if IE 7]><link rel="stylesheet" href="ie7.css"><![endif]--> 
  3. <!--[if IE 6]><link rel="stylesheet" href="ie6.css"><![endif]--> 

這段代碼會導致 IE8、IE7、IE6 各自加載對應的樣式文件。這事實上是非常牛逼的,條件註釋給按瀏覽器加載各自不同的樣式表提供了可能,但同時需要維護多個樣式文件。

CSS hacks

這事實上是個齷齪的做法,能解決問題又不符合規範,看着也很頭大。大部分人看着它只能束手無策而又逼不得已。現在可以來簡單回顧一下IE 的 CSS hacks 常用的幾個方法:

  1. _selector{property:value;} //IE6  
  2. *selector{property:value;} //IE6 & IE7  
  3. selector{property:value\9;} //IE6 & IE7 & IE8 

這個一般人都知道,就不多說了。但面臨的一個現實問題是,\9 這個 hack 不只是針對 IE8 以及更老版本奏效,IE9 最終的發行版依舊會受到這個 hack 的影響。而 IE9 本身在 CSS 上的各種缺陷又是被修復的。如果將來 IE10、IE11 來了,那又怎麼辦?顯然 \9 並不是一個嚴謹的安全的方案。

另外,採用不同的 X-UA-Compatible 模式也會影響不同版本的 IE 渲染差異。建議設置默認渲染模式如下:

  1. <meta http-equiv="X-UA-Compatible" content="IE=Edge">//標準 IE 模式 

那咋整呢?咋整咋整咋整?沒事,下面還有更絕的。

通過條件判斷插入指定類

既然可以用條件判斷,那麼直接爲不同 IE 版本輸出單獨用於設定樣式的鉤子類好了。直接上代碼:

  1. <!--[if !IE]><html><![endif]--> // 非 IE 瀏覽器的情況,不添加任何作用類  
  2. <!--[if IE 6]><html class="ie6"><![endif]--> 
  3. <!--[if IE 7]><html class="ie7"><![endif]--> 
  4. <!--[if IE 8]><html class="ie8"><![endif]--> 

如果要是 IE9、IE10 再想出現什麼神奇的行爲藝術的話,繼續添加指定作用類就行咯。並且你的樣式表也會變得異常乾淨、整潔、美觀:

  1. .selector { color: black; }  
  2. .ie8 .selector { color: green; } /* IE8 */  
  3. .ie7 .selector { color: blue; } /* IE7 */  
  4. .ie6 .selector { color: red; } /* IE6 */ 

當然,標準模式的 X-UA-Compatible 聲明還是必須的,以防頁面被強制按照低版本的 IE 來渲染。

關於條件註釋的參考資料:http://msdn.microsoft.com/en-us/library/ms537512.aspx

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章