Css hack和expression属性

在看源码的时候突然看到了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。