五、个人推荐写法
其实可以纠结的还真多,这里结合A-Grade浏览器的种类和HACK的种类,写两种个人认为比较合理的HACK和向后兼容相兼顾的写法,仅供大家参考的。
经济实惠型写法:注重单独的HACK。 IE的HACK比较多,选择省力易记的属性HACK;其他浏览器HACK少,选择块状的选择器HACK(推荐)
.sofish{ padding:10px; padding:9px\9; /* all ie */ padding:8px\0; /* ie8-9 目前应用于IE8的单独hack,情况比较少 */ *padding:5px; /* ie6-7 */ +padding:7px; /* ie7 */ _padding:6px; /* ie6 */ }
/* webkit and opera */ @media all and (min-width: 0px){ .sofish{padding:11px;} }
/* webkit */ @media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }
/* opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
/* firefox * / @-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */ html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */
准完美主义写法:配合IE注释,一律采用选择器HACK(选择性推荐)
HTML: 添加body class:
<!--[if IE6]--><body class="ie6"><![endif]--> <!--[if IE7]--><body class="ie7"><![endif]--> <!--[if IE8]--><body class="ie8"><![endif]--> <!--[if IE9]--><body class="ie9"><![endif]--> <!--[if !IE]--><body class="non-ie"><![endif]-->
.sofish{padding:10px;} .non-ie .sofish{padding:12px;} .ie9 .sofish{padding:9px;} .ie8 .sofish{padding:8px;} .ie7 .sofish{padding:7px;} .ie6 .sofish{padding:6px;}
/* webkit and opera */ @media all and (min-width: 0px){ .sofish{padding:11px;} } /* webkit */ @media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }
/* opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
/* firefox * / @-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */ html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */ [/css] <p>然后,从第二种方式我们也可以发现。把IE注释用在body class上,而不是添加单独的<code><link /></code>或者<code>@import</code>会是更好的选择。虽然分文件也是一种不错的选择,但了为页面加载速度,HTTP请求一个都不能浪费。</p> <p>至于利用JS或者后端程序来判断,除非你有足够的资源,除非你解决不了(90%不会发生),不然,并不推荐用。附上一个表(<a rel="nofollow" href="viahttp://paulirish.com/2009/browser-specific-css-hacks/">via</a>),可以参考参考:</p> <h3>六:全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表:</h3> [cc lang="css"] /***** 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 }
/* Firefox only. 1+ */ #veinticuatro, x:-moz-any-link { color: red }
/* Firefox 3.0+ */ #veinticinco, x:-moz-any-link, x:default { 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 */ #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 */
其他的就不多说了。不过,还是要提醒一下: 注释也是很重要的。虽然是HACK了,但现实中情况有时候比想象中的复杂得多,给代码一个注释,好过千言万语。
最后,还是那句,希望看到你更好的方法!
原文: http://ued.alipay.com/2010/05/talk-about-css-hack-and-backward-compatibility/
本文链接:http://www.blueidea.com/tech/web/2010/7607.asp
出处:Alipay UED
责任编辑:bluehearts
上一页 说说CSS Hack 和向后兼容 [2] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|