【總結】瀏覽器CSS Hacks匯總

　　瀏覽器安全色可以說是前端開發所要面對的第一個挑戰，目前我的電腦上已經安裝了6種瀏覽器（基於IE核心的不算，如Maxthon等）。

　　CSS hacks利用瀏覽器的漏洞來隱藏特定瀏覽器的CSS規則。實現瀏覽器安全色主要有兩種方式條件樣式表和CSS Hacks（Selector Hacks、Attribute Hacks）。對此根據一些資料匯總了一些CSS Hacks方法。

1.條件樣式表

像這樣的代碼你應該見過:

<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css"href="css/ie.css"  />
< ![endif]-->

PS：yahoo的內部編碼最佳做法並不建議使用有條件的樣式表。它會增加額外的平均1或2個HTTP下載請求（參考這裡）。

 

2.選取器Hacks（Selector Hacks）

/* IE6 及以下 */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (IE 6,7以外) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 及以下, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* IE6-8以外 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

PS：選取器Hacks方式比較多， 但只要代碼寫得夠標準, 其實要 Hack 的地方不會很多的, 除了有時候IE搗亂，IE 以外的瀏覽器幾乎都不會有問題。

 

3.屬性hacks（Attribute Hacks）

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* 或 #color: blue */ }

/* IE6以外 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* 僅IE8 */
#veinte { color: blue\0; }

PS：屬性Hacks混寫是我較多使用的一種方式，感覺寫起來比較簡單。CSS Hacks的使用大多情況下是為了兼顧一下愛搗亂的IE，使用Attribute Hacks基本上能解決對IE的相容。 4.屬性hacks混寫

/* !important優先 */
#bgcolor {
    background:red !important; /* Firefox 等其他瀏覽器 */
    background:blue; /* IE6 */
}

#test {
    background-color: black; /* Firefox, Opera, IE8 */
    [;background-color: green;] /* Safari, Chrome */
    *background-color: blue; /* IE7 */
     _background-color: red; /* IE6 */
}

PS：屬性hacks混寫要注意書寫次序。

　　最後，看一下這個測試頁面吧（示範）

　　其實瀏覽器安全色不應該只對過去的瀏覽器安全色（向前相容），更應該考慮為未來瀏覽器服務（向後相容），所以開發時，要儘可能的符合標準，保持代碼整潔是一件很重要的事情（參考《Keep CSS Simple》）不得已的時候才Hack一下。　　本文地址：http://www.cnblogs.com/wiky/archive/2010/01/07/Browser-CSS-Hacks-assembles.htmlPS：本文由 維奇總結，如有轉載請註明出處，謝謝！ 參考資料Browser CSS hacks：http://paulirish.com/2009/browser-specific-css-hacks/CSS Hacks：http://www.webdevout.net/css-hacks 延伸閱讀Will the browser apply the rule(s)?CSS Hackz Series: Targeting and Filtering Internet Explorer 7CSS Hack 匯總快查CSS hack:區分IE6，IE7，firefox