对CSS HACK的一些看法
时间:2011-03-27 来源:志刚hh
那天瓜哥讲了个问题,说说css HACK的一些看法,说说自己的想法,不对多指教。
由于各种浏览器对css的解析存在差异,使同一页面在各种浏览器下表现出来的效果也会不同。为了解决这个兼容性问题,css hack技术产生了。
个人认为css hack技术其实是一种欺骗浏览器的技术,通过在选择器、属性等地方添加一些特别符号来使某些浏览器无法解析该选择器或属性,以达到区分不同的浏览器的目的。其实个人觉得css hack是不安全的,有风险的,现在的浏览器更新很快,版本也出现了好几个,谁也无法100%保证为这个版本浏览器所设置的css hack在下一个版本依然有效。比如在ie7还没出来之前,!important一直作为区分ie和firefox的一个css hack。但ie7出来以后,随着ie7对!important的支持,区分ie和firefox也就不能只用!important来实现了,这就可能导致以前在ie6时期制作并使用了!important hack的网页在ie7下可能会出现差异。
并不是说反对使用css hack技术,而是觉得对于一个存在风险的技术应该尽量少用,能不用尽量不要用。以前看过一些朋友的css代码,大量使用了hack技术,而且没有注释,可以想象要理解这些代码是多么的痛苦。随着浏览器的更新,css hack 没给我们带来问题那是好事,但一旦出现问题,维护起来又需要一定的成本,倘若遇到如上面所提到的css代码,那才真的头疼。那么何时才用css hack呢?我觉得当你确定是浏览器对css的解析不符合规范,或者说是浏览器本身的bug引起,而不是由于你自身对css的理解不够或者页面结构错误一些细节问题而引起的表现差异,这才是css hack的用武之地,而不是一旦发现表现差异就立刻使用css hack,这样写出来的css代码往往是缺乏规范的,也缺乏可读性,到时候维护的成本也很大。
本文主要通过“.” ,“>”,“*”,“_”四种特殊符号,通过浏览器的支持的差异,实现CSS HACK,解决不同浏览器上CSS支持的问题,请看下表:
属性 | IE6 |
IE7 |
IE8 |
FF2 |
FF3 |
Opera9.5 |
>property | Y |
Y |
Y |
N |
N |
N |
.property | Y | Y | Y |
N |
N |
N |
*property | Y |
Y |
Y | N |
N |
N |
_property | Y | N |
N |
N |
N |
N |
通过上表我们可以看到>、.、*在各浏览器中的表现是一致的,而_在IE6和IE7、IE8中有所区别。另外,IE6不支持!important的,而其他几款浏览器都能够识别。
我们可以看一下示例:
区别IE6与FF: background:orange;*background:blue;
区别IE6与IE7:background:green !important;background:blue;
区别IE7与FF: background:orange; *background:green;
区别FF/IE7/IE6:background:orange;*background:green !important;*background:blue;
注:IE都能识别*标准浏览器(如FF)不能识别*
IE6能识别*,但不能识别 !important
IE7能识别*,也能识别!important
FF不能识别*,但能识别!important
IE6支持下划线,IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6、IE7、firefox : background:orange;*background:green;_background:blue;
通过CSS HACK,可以实现在不同的浏览器上实现相同的样式,有效解决浏览器间的差异。