什么是css hack ?CSS hack原理讲解
什么是css hack
由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack(针对不同的浏览器写不同的css code的过程即css hack,也叫写css hack)
css hack可翻译为:浏览器兼容性、兼容方案、简略兼容浏览器。
常用的CSS hack 有三种方式:
CSS 内部hack、选择器hack、HTML 头部引用,其中第一种最常用。
CSS hack原理
1.利用浏览器自身的bug来实现特定浏览器的样式;
2.利用浏览器对CSS的完善度来实现,例如某些CSS规则或语法的支持程度,原理类似目前我们经常使用的 -wekit-之类的属性。
1.CSS 内部hack
在CSS3中常见一些这样的写法:
/*Mozilla内核浏览器:firefox3.5+*/ -moz-transform: rotate | scale | skew | translate ; /*Webkit内核浏览器:Safari and Chrome*/ -webkit-transform: rotate | scale | skew | translate ; /*Opera*/ -o-transform: rotate | scale | skew | translate ; /*IE9*/ -ms-transform: rotate | scale | skew | translate ; /*W3C标准*/ transform: rotate | scale | skew | translate ;
CSS3目前标准还没有统一,各个浏览器都有自己的表现方式,甚至有的实现,有的未实现,在前面加一些前缀以表示支持某个
特定浏览器,这也是CSS 内部hack的基本原理,但真正的CSS hack 远远不止于此,因为仍有IE6及其各种奇葩的版本。
语法:
selector{
上面代码所示的是在属性名称之前的hack;
当然还有以下的写法:
*background-color:green;
属性前面加个“*”这样的写法只会对IE6、7生效,其它版本IE及现代浏览器会忽略这条指令(没有特殊说明,本文所有hack都是指
在声明了DOCTYPE的文档的效果)
-background-color:green;
属性前面有个“-”这样的只有IE6识别,还有些在后面的hack
background-color:green!important;
这样在属性值后面添加“!important”的写法只有IE6不能识别,其它版本IE及现代浏览器都可以识别,还有“+”、“\0”、”\9” 等。
如果只想在IE访问的时候加绿色背景,就可以这么写
background-color:green\9;
2.选择器hack
选择器hanck主要是针对IE浏览器,不怎么常用
语法:
针对IE9的hack可以这么写:
:root .test{
background-color:green;
}
3.HTML头部引用
HTML头部引用就比较特殊了,类似于程序语句,只能使用在HTML文件里,而不能在CSS文件中使用,并且只有在IE浏览器下才能执行,这个代码在非IE浏览下不是执行该条件下的定义,而是当做注释视而不见。
注意:以开头,以结尾。
解释:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同。
书写顺序:先一般,再特殊!!
例:
_background-color:red;
background-color:green;
在IE6解析的时候,第一句能够识别,背景设为红色,但是第二句所有浏览器都识别,IE6也不例外,背景颜色又被设为绿色,
所以得反过来写
background-color:green;
_background-color:red;