为什么不使用CSS expression?

CSS expressions(CSS表达式)是一种功能非常强大的方法，可以实现页面的动态设置属性，但兼容性较差，同时也有着非常恐怖的弱点；

可以在CSS expressions中使用javascript中的某个函数表达式。来实现动态设置页面的样式。也可以解决IE低版本浏览器中的某些体验。

 

支持者：IE5至IE7浏览器。

 

---

 

例如，在IE6中，不支持应用了position:absolute属性的height:100%。可以使用：height:expression(it.parentNode.offsetHeight+'px';);

例如，用css表达式来控制颜色的变化，每隔一个小时变化一次：background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

 

---

但是，这个方法存在一个很可怕的隐患，它会频繁的计算（超出大部分设计者的预期）；

在以下情况，会导致 css expressions的频繁执行。

1.网页打开时。（<10次）

2.每次重置浏览器大小。（1次）

3.拉动设置浏览器大小。（每拉动一像素计算1次）

4.在页面有文字区域滑动鼠标（鼠标每滑动一像素计算1次）

使用了css expressions的页面，css表达式很容易就被计算上万次，导致机器变慢，浏览器卡死，cpu占用过高等疾病。

 

测试计算次数的demo （请使用IE6，IE7浏览器查看。）

 

---

 

所以如果页面样式属性一定要动态来设置，那么可以考虑用使用javascript实现，不推荐使用css expressions；

如果一定要用CSS表达式，那你不要忘记它可能会产生成千上万次计算而同时 影响到你的整个页面效果；

 

 

---