CSS: hack 方式一覽

本文引自:http://blog.csdn.net/freshlover/article/details/12132801

 

什麼是CSS hack

因爲不一樣廠商的流覽器或某瀏覽器的不一樣版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),對CSS的支持、解析不同,致使在不一樣瀏覽器的環境中呈現出不一致的頁面展示效果。這時,咱們爲了得到統一的頁面效果,就須要針對不一樣的瀏覽器或不一樣版本寫特定的CSS樣式,咱們把這個針對不一樣的瀏覽器/不一樣版本寫相應的CSS code的過程,叫作CSS hack!css

 

CSS hack的原理

因爲不一樣的瀏覽器和瀏覽器各版本對CSS的支持及解析結果不同,以及CSS優先級對瀏覽器展示效果的影響,咱們能夠據此針對不一樣的瀏覽器情景來應用不一樣的CSS。html

 

CSS hack分類

CSS Hack大體有3種表現形式,CSS屬性前綴法、選擇器前綴法以及IE條件註釋法(即HTML頭部引用if IE)Hack,實際項目中CSS Hack大部分是針對IE瀏覽器不一樣版本之間的表現差別而引入的。css3

  • 屬性前綴法(即類內部Hack):例如 IE6能識別下劃線"_"和星號" * ",IE7能識別星號" * ",但不能識別下劃線"_",IE6~IE10都認識"\9",但firefox前述三個都不能認識。
  • 選擇器前綴法(即選擇器Hack):例如 IE6能識別*html .class{},IE7能識別*+html .class{}或者*:first-child+html .class{}。
  • IE條件註釋法(即HTML條件註釋Hack):針對全部IE(注:IE10+已經再也不支持條件註釋):
    <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->,
    針對IE6及如下版本:
    <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。
    這類Hack不只對CSS生效,對寫在判斷語句裏面的全部代碼都會生效。

  

CSS hack書寫順序,通常是將適用範圍廣、被識別能力強的CSS定義在前面。瀏覽器

 

CSS hack方式一:條件註釋法

這種方式是IE瀏覽器專有的Hack方式,微軟官方推薦使用的hack方式。舉例以下編碼

 1     只在IE下生效
 2     <!--[if IE]>
 3     這段文字只在IE瀏覽器顯示
 4     <![endif]-->
 5     
 6     只在IE6下生效
 7     <!--[if IE 6]>
 8     這段文字只在IE6瀏覽器顯示
 9     <![endif]-->
10     
11     只在IE6以上版本生效
12     <!--[if gte IE 6]>
13     這段文字只在IE6以上(包括)版本IE瀏覽器顯示
14     <![endif]-->
15     
16     只在IE8上不生效
17     <!--[if ! IE 8]>
18     這段文字在非IE8瀏覽器顯示
19     <![endif]-->
20     
21     非IE瀏覽器生效
22     <!--[if !IE]>
23     這段文字只在非IE瀏覽器顯示
24     <![endif]-->

 

CSS hack方式二:類內屬性前綴法

屬性前綴法是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴,以達到預期的頁面展示效果。spa

IE瀏覽器各版本 CSS hack 對照表.net

hack 寫法 實例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S) IE10(Q)
* *color 青色 Y Y Y Y N Y N Y N Y
+ +color 綠色 Y Y Y Y N Y N Y N Y
- -color 黃色 Y Y N N N N N N N N
_ _color 藍色 Y Y N Y N Y N Y N N
# #color 紫色 Y Y Y Y N Y N Y N Y
\0 color:red\0 紅色 N N N N Y N Y N Y N
\9\0 color:red\9\0 粉色 N N N N N N Y N Y N
!important color:blue !important;color:green; 棕色 N N Y N Y N Y N Y Y

說明:在標準模式中firefox

  • 「-″減號是IE6專有的hack
  • 「\9″ IE6/IE7/IE8/IE9/IE10都生效
  • 「\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
  • 「\9\0″ 只對IE9/IE10生效,是IE9/10的hack

 

CSS hack方式三:選擇器前綴法

選擇器前綴法是針對一些頁面表現不一致或者須要特殊對待的瀏覽器,在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。code

目前最多見的是htm

*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效
等等

 

CSS hack利弊

通常狀況下,咱們儘可能避免使用CSS hack,可是有些狀況爲了顧及用戶體驗實現向下兼容,不得已才使用hack。好比因爲IE8及如下版本不支持CSS3,而咱們的項目頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染,這種狀況下若是不使用css3pie或htc或條件註釋等方法時,可能就得讓IE8-的專屬hack出馬了。

使用hack雖然對頁面表現的一致性有好處,但過多的濫用會形成html文檔混亂不堪,增長管理和維護的負擔。相信只要你們一塊兒努力,少用、慎用hack,將來必定會促使瀏覽器廠商的標準愈來愈趨於統一,順利過渡到標準瀏覽器的主流時代。拋棄那些陳舊的IE hack,必將減輕咱們編碼的複雜度,少作無用功。

最後補上一張引自國外某大牛總結的CSS hack表,這時一張6年前的舊知識彙總表了,放在這裏僅供須要時候方便參考。

 

相關文章
相關標籤/搜索