什么是CSS Hack
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome
等),对CSS
的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS
样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code
的过程,叫做CSS Hack
!
CSS Hack的原理
由于不同的浏览器和浏览器各版本对CSS
的支持及解析结果不一样,以及CSS
优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS
。
CSS Hack常见的有三种形式:
CSS Hack
大致有3种表现形式,CSS
属性前缀法、选择器前缀法、IE
条件注释法(即HTML
头部引用if IE
)Hack
,实际项目中CSS Hack
大部分是针对IE浏览器不同版本之间的表现差异而引入的。
- 属性前缀法(即类内部
Hack
):例如IE6
能识别下划线"_"
和星号" * "
,IE7
能识别星号" * "
,但不能识别下划线"_"
,IE6~IE10
都认识"\9"
,但firefox
前述三个都不能认识。 - 选择器前缀法(即选择器Hack):例如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}。
IE
条件注释法(即HTML
条件注释Hack
):针对所有IE
(注:IE10+已经不再支持条件注释):<!--[if IE]>IE浏览器显示的内容 <![endif]-->
,针对IE6
及以下版本:<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
。这类Hack
不仅对CSS
生效,对写在判断语句里面的所有代码都会生效。
CSS hack
书写顺序,一般是将适用范围广、被识别能力强的CSS
定义在前面。
为什么不推荐使用CSS Hack来解决兼容性问题 ?
CSS Hack
是因为现有浏览器对标准的解析不同,为了兼容各浏览器,所采用的一种补救方法。
CSS Hack
是一种类似作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器的兼容性差异来解决浏览器的兼容性问题。
因此,在设计之初,写CSS Hack
需要遵循以下三条原则:
- 有效: 能够通过
Web
标准的验证 - 只针对太古老的/不再开发的/已被抛弃的浏览器, 而不是目前的主流浏览器
- 代码要丑陋。让人记住这是一个不得已而为之的
Hack
, 时刻记住要想办法去掉它。现在很多Hacks
已经抛弃了最初的原则,而滥用Hack
会导致浏览器更新之后产生更多的兼容性问题。
因此,并不推荐使用CSS Hack
来解决兼容性问题。
CSS Hack的实际应用
CSS Hack
:区分IE6
,IE7
,firefox
区别不同浏览器,CSS Hack
写法:
区别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;
_background:blue;
background:orange;
*background:green!important;
*background:blue;
注:IE
都能识别*
;标准浏览器(如FF
)不能识别*
;IE6
能识别*
;不能识别 !important
;IE7
能识别*
,能识别!important
;FF
不能识别*
,但能识别!important
;
浏览器优先级别:
FF<IE7<IE6,CSS hack