【总结】浏览器CSS Hacks汇总 【维奇】
2010-01-27 10:07
375 查看
1.条件样式表
像这样的代码你应该见过:
PS:yahoo的内部编码最佳做法并不建议使用有条件的样式表。它会增加额外的平均1或2个HTTP下载请求(参考这里)。
2.选择器Hacks(Selector Hacks)
PS:选择器Hacks方式比较多, 但只要代码写得够标准, 其实要 Hack 的地方不会很多的, 除了有时候IE捣乱,IE 以外的浏览器几乎都不会有问题。
3.属性hacks(Attribute Hacks)
PS:属性Hacks混写是我较多使用的一种方式,感觉写起来比较简单。CSS Hacks的使用大多情况下是为了兼顾一下爱捣乱的IE,使用Attribute Hacks基本上能解决对IE的兼容。
4.属性hacks混写
PS:属性hacks混写要注意书写次序。
最后,看一下这个测试页面吧(演示)
其实浏览器兼容不应该只对过去的浏览器兼容(向前兼容),更应该考虑为未来浏览器服务(向后兼容),所以开发时,要尽可能的符合标准,保持代码整洁是一件很重要的事情(参考《Keep CSS Simple》)不得已的时候才Hack一下。
本文地址:http://www.cnblogs.com/wiky/archive/2010/01/07/Browser-CSS-Hacks-assembles.html
PS:本文由维奇总结,如有转载请注明出处,谢谢!
像这样的代码你应该见过:
<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.html
PS:本文由维奇总结,如有转载请注明出处,谢谢!
相关文章推荐
- 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks
- 【转载】浏览器CSS Hacks汇总
- 浏览器特定的CSS Hacks汇总
- 目前比较全面的浏览器CSS BUG兼容汇总
- Javascript和CSS浏览器兼容总结
- Javascript和CSS浏览器兼容总结——作者java3xxx
- 主流浏览器CSS兼容性解决方案汇总
- 05 CSS-浏览器兼容问题小总结(IE6)
- CSS+DIV各种浏览器版本兼容总结
- 目前比较全面的浏览器CSS BUG兼容汇总
- DIV+CSS浏览器兼容方法的总结(下)
- 【总结】CSS透明度大汇总
- CSS浏览器兼容汇总 .
- IE6,IE7,IE8 CSS hacks 演示之 检测当前浏览器版本
- css和js的浏览器兼容问题汇总
- Javascript和CSS浏览器兼容总结
- css浏览器兼容总结
- CSS对浏览器的兼容性技巧总结
- Javascript和CSS浏览器兼容总结
- CSS 对浏览器的兼容性技巧总结