浏览器的CSS Hacks

原文链接：http://paulirish.com/2009/browser-specific-css-hacks/

自这篇 《利用IE条件注释给body标签应用class》之后我就没再用过CSS Hacks。（那是因为你没有生活在天朝——译者槽）

尽管如此，我还是想把我知道的每个浏览器特殊的css选择器和样式属性hack写下来。我认为样式表不仅仅Sarfari浏览器专有的。

以下这些CSS代码足够你区别IE浏览器、Firefox、Chrome、Safari和Opera了。让我们来看看：

浏览器特有CSS Hacks综合列表：

 
/***** Selector Hacks ******/
 
/* IE6 and below */
* html #uno  { color: red }
 
/* IE7 */
*:first-child+html #dos { color: red } 
 
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
 
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 and below, 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  }
 
/* Everything but IE6-8 */
:root *> #quince { color: red  }
 
/* IE7 */
*+html #dieciocho {  color: red }
 
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}
 
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
 
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
 
/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }
 
 
/***** Attribute Hacks ******/
 
/* IE6 */
#once { _color: blue }
 
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
 
/* Everything but IE6 */
#diecisiete { color/**/: blue }
 
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }
 
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
 
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
 
/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */
 
/* IE9, IE10 */
@media screen and (min-width:0\0) {
    #veintidos { color: red}
}

从Keith Clarke（原作者姓名——译者注）这里可以看看 《媒体查询CSS Hacks》。

你也许还会想看：

所有Hacks的示例页面

browsershots.org上的示例页面（貌似已失效——译者注）

（感谢 Webdevout， Evo tech， Jeffrey， proneL，还有评论者。）

我想指出的是，我这里并未囊括神马 奇葩的Hacks，诸如voice-family之类或其他巨丑无比的Hacks。

一些参考

这里是我看过的 最简洁的browsers sniffing（英语拙计，求翻译——译者）。（并不是说 browsers sniffing好神马的…）

2009.06.03更新 –补充了意见留住 Ajaxian（著名的ajax技术博客——译者）及其评论，升级了浏览器版本至 Safari 4, IE 8, and Chrome 2。2009.08.03更新 – 从独一无二的@pornelski补充了一些新的Firefox浏览器hacks，由于目标选择器（target selector）不像其他的那样属于其的一个子类。 从他的网站查看更多说明。2009.11.10更新 – 补充hack #prop: value IE<=7。 我宁愿*prop用得更多。2010.01.24更新 - 补充属性hack: value!ie。 感谢 @miketaylr for the tip.Update 2010.04.07 – Clarification on :nth-of-type(n) from Estelle Weyl2011.04.11更新 – 从 这里 还有 这里补充新的 \0/ hack。这无效且必须用于其他规则之后。 因此这是一种非常危险的Hack，然而与此同时.. 这劳什子也是令人愉快且富有挑战性, 负负得正 :) 2011.05.18更新 – 更新了 \0/和 \9的笔记还有其在IE9下的效果。 感谢 Mathias Bynens。2011.05.19更新 – 从lea verou补充 :not(:-moz-handler-blocked)。

一点附录

2011.05.23: Okay some freeform notes from recent research. hopefully i'll clean these up later….
2012.11.10: Link to keith clark's @media hacks. They are pretty hot.

读了Mathias写了篇关于 安全CSS Hacks的文章。当然我要澄清的是这篇文章里推荐的Hacks真是太...不要脸了（很多都是...）

Mathias同时在寻找只用于IE8的hack，希望我们能发现个。

Siggi在评论中写到了能匹配IE6、7的双斜杠（//）hack。

   min-height:300px;
    //height:300px; /* matches only IE6, IE7 */

然后CSS魔法师 Thierry Koblentz贡献了下述选择器hacks…

selector, x:-IE7 { } /* IE7 only */
selector,{ … } /* lte ie7 */
.suckyie6.someClass { … } /* lte ie6  */

最后一个是通过解决 ie6双倍边距bug——你可能不会再用讨厌的ie6这种玩意。

富有技巧的Necolas贴出了IE CSS Hacks的更多详情：

/* Property prefix hacks */
 
/* IE6 only - any combination of these characters */
_ - £ ¬ ¦
 
/* IE6/7 only - any combination of these characters */
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |
 
 
/* @media hacks */
 
/* IE6/7 only (via Keith Clarke) */
@media screen\9 { }
 
/* IE6/7/8 (via Keith Clarke) */
@media \0screen\,screen\9 {} 
 
/* IE8 (via Keith Clarke) */
@media \0screen { }
 
/* IE8/9 */
@media screen\0 { }