zoukankan      html  css  js  c++  java
  • 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()方法才可去除。
    如: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表达式的原因

    • 更加符合标准
    • 更加有利于性能提升
    • 以及减少受攻击面
  • 相关阅读:
    android Edittext自定义输入字符和类型
    让android webView使用系统默认浏览器内核直接解析,不弹出选择浏览器选项
    java对象中继承和变量初始化顺序浅析
    android判断pad还是手机
    我不知道自己想要什么
    计算机网络概述
    2020/2/27-28
    操作系统概述
    数据模型
    数据库系统概述
  • 原文地址:https://www.cnblogs.com/leee/p/5310221.html
Copyright © 2011-2022 走看看