为什么不使用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表达式,那你不要忘记它可能会产生成千上万次计算而同时 影响到你的整个页面效果;


原文地址:https://www.cnblogs.com/weinan/p/2971118.html