Fork me on GitHub

李可

导航

CSS系列：表达式（Expression）`淘汰`

概述

CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。

兼容性

expression方法在其它浏览器中不起作用，因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。

例子

隔1s切换一次背景颜色 input鼠标移入移出变换背景

body{
 background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );  
}
input 
{  
 star : expression(  
	onmouseover=function(){this.style.backgroundColor="green"},  
	onmouseout=function(){this.style.backgroundColor="red"}
	    	 )  
}

<body >
 <input type="text"/>
</body>

问题

算频率要比我们想象的多。千上万次并且可能会对你页面的性能产生影响。

  • 页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。随便移动鼠标都可以轻松达到10000次以上的计算量。

查看方式

  • 给CSS表达式增加一个计数器可以跟踪表达式的计算频率。

解决方案

  • this使用
  • 使用一次性表达式？
  • 如果样式属性必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法?
  • 使用jQuery方法代替

移除

在IE中,CSS是可以嵌入js表达式的,可以在CSS类中定义,但是将含有表达CSS类从DOM对象中移除，样式表达式是不会失效的。
需要使用js调用style对象的removeexpression_r()方法才可去除。
如：width:expression_r(this.width > 730 ? "730px" : true);
需要使用：
$('#test')[0].style.removeexpression_r('width');去掉。

废弃

http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx

不再支持CSS表达式的原因

  • 更加符合标准
  • 更加有利于性能提升
  • 以及减少受攻击面

posted on 2016-03-23 13:35  李可在江湖  阅读(11299)  评论(0)  编辑  收藏  举报