在看源码的时候突然看到了css中_margin-top和_top:expression(eval())的写法,哈,不明所以啊,就去了解使用了一下。
Css hack:
Css hack的目的就是使css代码兼容不同的浏览器,也可以反过来利用css hack为不同版本的浏览器定制不同的css效果。
Css hack有3种表现形式:css类内部hack,选择器hack,HTML头部的(if IE)hack。
css类内部hack:IE6能识别_(下划线)和*(星号),IE只能识别*,而Firefox两个都不能识别
选择器hack:IE6能识别*html,.class;IE7能识别*+html.class{}或者*:first-child+html .class{}。等等
HTML头部的(if IE)hack:针对所有IE,,<!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本:<!--[iflt IE 7]><!--您的代码--><![endif]-->,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
我最常见到的就是写在HTML头部的(if IE)写法,看起来它的兼容性还是主要针对IE浏览器来适配的,Firefox和Google大都适用.demo{}
Css的expression属性
主要作用是把css属性和JavaScript脚本关联起来,也就是css属性后面可以是一段JavaScript表达式,css属性的值等于JavaScript表达式计算的结果。
如:
_top:expression(eval(document.documentElement.scrollTop));
通常用eval()函数把它计算成数值,所以这句代码最终的意思是:浏览器的滚动条滑到哪里,这个元素的位置就在哪里。
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); transition:all .5s ease; }
这个也是来识别滚动条滑动和元素位置的
注意:
不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高
CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
性能优化:
一个减少CSS Expression计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS Expression。