CSS Hacks

Java一直标榜一句老话叫“编写一次,到处运行(Write Once,Run Anywhere)”,CSS也差一点点做到了。但就是为了差的一点点往往需要大量的工作,虽然这并不是CSS的错。基本上别妄想兼容所有的解析器了,仅仅是为了让网页在YUI中列举的A级浏览器呈现一致就不是一件特别容易的事情。虽然通过精心的组织HTML结构加上使用最合适最通用的CSS代码可能实现多浏览器呈现一致,但当在视觉的过度设计、精确到像素的规定和前端快速实现的要求的前提下,可能你不得不为不同的浏览器写不同的CSS代码,这就是CSS Hacks了。我们的目标是保持CSS简洁和没有CSS Hacks,但即使多年以前就呼吁Keep CSS simple的PPK也不得不在他的网站中使用CSS Hacks,即便如此其站点在所有的A级浏览器中也无法保持一致的呈现。所以,下面这个我常用的CSS Hacks列表或许有些用:

IE6 IE7 Firefox2+ Firefox3+ Opera9.5+ Safari3.1+
选择符{
  *属性:值;
}[1]
× × × ×
选择符{
  _属性:值;
}
×[2] × × × ×
选择符,x:-moz-any-link{
  属性:值;
}
× × ×
选择符,x:-moz-any-link,x:default{
  属性:值;
}
× × × ×
@media all and (min-width:0){
  选择符{属性:值;}
}[3]
× × × ×
@media all and (-webkit-min-device-pixel-ratio:0){
  选择符{属性:值;}
}[4]
× × × × ×

这里有一个上述CSS Hacks的应用的例子可以看看。

  • [1] 此处的*号其实也可以是.号、>号、+号和#号。但它们都不属于CSS2.1规范合法属性名的一部分,所以不能通过验证。
  • [2] 当IE7为quriks mode时和IE6为quriks mode解析相同,所以此时这个表达式在IE7中也能生效。这个hack已经应用了很久了,下划线_作为属性名的前缀是符合CSS2.1规范语法的,但不存在于其属性名列表中,所以依旧不能通过标准语法验证。对于多个IE的CSS Hacks,条件注释是一个很值得考虑的解决方案。另外对于IE8可以关注其新功能和变化,但现在考虑其CSS Hacks问题有点过早,真的有需求可以通过增加<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />来解决。
  • [3] 如果把表达式中的and和(中间的空白去掉变成@media all and(min-width:0){选择符{属性:值;}},那么Safari3+将无法识别,Opera9.5+则可以。
  • [4] 这个表达式Opera9.0是支持的。

上面这些CSS Hacks仅仅是沧海一粟,是一些简单的通用的CSS Hacks。这个世界上还存在很多很知名很经典的CSS Hacks,更多的CSS Hacks可以看这里:

  1. CSS hacks
  2. CSS Hack
  3. Will the browser apply the rule(s)?
  4. Tricking Browsers and Hiding Styles
  5. 与臭虫为友——浏览器补救办法,臭虫以及解决方案(第二部分)
  6. CSS Hackz Series: Targeting and Filtering Internet Explorer 7

标签:,

作者:秦歌,时间:2008-07-12 3:05,归纳于:HTML & CSS,订阅:RSS 2.0,引用:Trackback

有评论 15 条,发表一条新评论 »

Sutra说:2008-07-12 23:46 #1

讨厌Hack,我就只提供标准的,你丫爱用不用,哈哈。

tokki说:2008-07-14 9:35 #2

=.=

柠檬说:2008-07-14 10:31 #3

现在也是极其讨厌HACKS了.
现在一般只做符合IE的就行了,反正大多数人用的都是IE,为了那少之又少的使用非IE的客户的客户去HACK,真不值得.

则名说:2008-07-15 11:10 #4

@ 柠檬,作为一名web developer,还是应该努力追求一些追求的。simple is beautiful.

stauren说:2008-07-15 14:39 #5

不错不错,很有用

柠檬说:2008-07-21 14:26 #6

@则名:
如果说simple is beautiful的话,那不是更不应该去CSS HACKS了?
看起来有些矛盾,不过这些也正是理想照进现实的交错.

SNAKE说:2008-07-22 11:29 #7

楼主少了个×+………..

则名说:2008-07-30 0:03 #8

@柠檬,我说的simple is beautiful是指的一本书,指这本书阐述表达的类似勿以善小而不为的态度和作风。你怎么会理解成不去css hacks了?

八度社区说:2008-08-27 18:19 #9

看来还是没办法不用Hacks啊.

koowo说:2008-09-03 22:23 #10

是啊,管他的呢,简单才是好啊

魔琳说:2008-09-05 17:16 #11

我不需要关心web标准,IE占有99%的市场,我做的页面只要IE能看就可以了。
“以用户为核心”通常都是反对web标准者的档箭牌,实际上这是虚伪的“以用户为核心”。你不能保证IE永远是垄断浏览器市场,你也不能保证IE不做任何改变(事实上,微软的IE7已经开始改善对 web标准的支持)。

当然,如果做的方式合理,可以兼容多数主流浏览器最好,可是在需要用HACK解决的时候我们不能逃避(虽然我也很头疼)。
个人觉得如果一个web developer连兼容都不去做了,做界面就没有什么意义了。

rong179说:2008-09-23 1:50 #12

“IE占有99%的市场”
好像没那么大吧?FF的市场份额在增加。。。
hack只有在万不得已的时候才用,还是少用好

ryan说:2009-01-09 9:54 #13

如果不关心浏览器的兼容,不关心javascript的特性和css的特性,那就别做web developer了,去做windows c++好了。

Syndie说:2009-06-17 18:28 #14

虽然说不推荐用hack,但是在迫不得已的情况下确实需要用一下的。不能因为ie6,ie7,ie8占用了大部分市场而忽略了其他的浏览器的。ff的使用人数近期也是在增长中。虽然说一般兼容ie6,ie7跟ff就行了,但是最近发现Opera有时也会出现一些其他浏览器不会出现的问题,谷歌也是。
所以今天特意来到这里收集hack的方法。虽然很久以前就收藏了这个地址。但是一直都没有发现opera跟谷歌的问题。今天遇到了,特地来谢谢你。

匿名说:2009-09-04 11:33 #15

IE8下是背景是白色。

发表一条评论

您可以在下面评论内容中使用下列XHTML标签:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


回到页眉