浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了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] -->
<!-- [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 }
}
* 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 ; }
#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 */
}
#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一下。
PS:本文由
维奇总结,如有转载请注明出处,谢谢!
参考资料
Browser CSS hacks:
http://paulirish.com/2009/browser-specific-css-hacks/
CSS Hacks:
http://www.webdevout.net/css-hacks
延伸阅读