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表達式的原因

  • 更加符合標准
  • 更加有利於性能提升
  • 以及減少受攻擊面


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM