css hack

CSS HACK是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS HACK就是让你记住这个标准),以达到在不同的浏览器上应用不同的CSS样式的目的。

CSS HACK的三种形式

CSSHACK有三种形式,分别是CSS属性HACK、CSS选择器HACK和IE条件注释HACK, 开发中主要是针对IE浏览器做兼容性处理。

1.属性级HACK。比如IE6浏览器能识别下划线【_】和星号【*】,IE7能识别星号【*】,但不能识别下划线【_】,而Firefox浏览器对两个符号都不能认识。

2.选择器HACK。比如IE6能识别【*html】,IE7能识别【*+html】或者【*:first-child+html】。

3.IE条件注释HACK。IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。这类注释不仅对CSS生效,对写在判断语句里面的所有代码都会生效。这个条件注释只有在IE浏览器下才能执行,在非IE浏览下则会被当做注释而视而不见。因此可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

CSS HACK的应用

一些常用的HACK符号就不说了,如果不清楚的可以参考我的另外一篇博客:https://www.cnblogs.com/yanggb/p/11213435.html,这里只说一下关于浏览器优先级的问题。

设置CSS的HACK要注意CSS样式的层叠性,给同一个元素设置的兼容写法必须写在后面,否则会被层叠掉。另外还要注意浏览器的样式识别优先级,通常是Firefox<IE7<IE6,即书写顺序一般是Firefox IE7 IE6。

以.demo {width: 100px;}为例,看看实际顺序应该怎么写。

.demo { /* 被FIREFOX,IE6,IE7执行 */
    width:100px;
}
*+html .demo { /* 会被IE7执行 */
    width:130px;
}
* html .demo { /* 会被IE6执行,之前的定义会被后来的覆盖,所以IE6最后为120px */
    width:120px;
}

这里的按照浏览器识别HACK符号从低到高的优先级从上往下写CSS选择器HACK,就能达到不同的浏览器应用不同的CSS样式的效果。

不推荐使用CSS HACK来解决兼容性问题

CSS HACK的产生是因为现有浏览器对标准的解析不同,为了兼容各浏览器所采用的一种补救方法。类似一种作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器的兼容性差异来解决浏览器的兼容性问题。因此,在设计之初,写CSS hack需要遵循以下三条原则:

1.有效,能够通过Web标准的验证。

2.只针对太古老的/不再开发的/已被抛弃的浏览器, 而不是目前的主流浏览器。

3.代码语法要很难看。因为难看就会让人时刻记住HACK是一种不得已才采用的做法,会想办法去掉它。

现在很多的HACKS已经抛弃了最初的原则,而滥用HACK会导致浏览器更新之后产生更多的兼容性问题。因此并不推荐使用CSS hack来解决兼容性问题。

"人之所以会心累,就是常常徘徊在坚持和放弃之间,举棋不定。"

相关推荐