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表达式的原因
- 更加符合标准
- 更加有利于性能提升
- 以及减少受攻击面
CSS系列:表达式(Expression)`淘汰`的更多相关文章
- 你应该了解的强大CSS表达式 ----- expression
IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性.就是说CSS属性后面可以是一 ...
- .net 系列:Expression表达式树、lambda、匿名委托 的使用
首先定义一个泛型委托类型,如下: public delegate T Function<T>(T a, T b); 实现泛型委托的主体代码,并调用: public static strin ...
- css中的expression
最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因为都被转烂了,没法注明出处. IE5及其以后版本支持在CSS ...
- 你不知道的css中的expression
expression是在IE5版本之后支持使用的,用来把CSS属性和Javascript脚本关联起来,[这里的CSS属性可以是元素固有的属性,也可以是自定义属性.]是动态设置CSS属性的强大方法,但也 ...
- 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...
- css系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...
- lambda表达式Expression<Func<Person, bool>> 、Func<Person, bool>区别
前言: 自己通过lambda表达式的封装,将对应的表达式转成字符串的过程中,对lambda表达式有了新的认识 原因: 很多开发者对lambda表达式Expression<Func<Pers ...
- CSS系列 (05):浮动详解
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...
- CSS系列——浏览器默认样式
了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什 ...
随机推荐
- WebSocket技术
webSocket技术 在html5技术革新中,加入了WebSocket技术 1.webSocket实际是TCP连接 webSocket在最初将发送http连接请求到服务器端, 但是在header中加 ...
- sublime text3083 破解 插件汉化
sublime text 注册码 1. Sublime Text 2.x 版本 —– BEGIN LICENSE —– Andrew Weber Single User License EA7E ...
- android 获取资源文件 r.drawable中的图片转换为drawable、bitmap
1.R-Drawable Resources resources = mContext.getResources(); Drawable drawable = resources.getDrawabl ...
- 学习BigDecimal用法
一.简介 Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更 ...
- 用VMware 11.0虚拟机安装Win8 系统失败,提示“shsucdx can't install”
研究了好久,网上那些更改bios的方法根本行不通,因为该版本的biso根本没有SATA选项!解决方法很简单,如下图: 重启虚拟机即可.
- /dev/ttySn(转)
1.串行端口终端(/dev/ttySn) 串行端口终端(Serial Port Terminal)是使用计算机串行端口连接的终端设备. 计算机把每个串行端口都看作是一个字符设备.有段时间 ...
- tar.xz文件如何解压 (已验证)
XZ压缩最新压缩率之王 xz这个压缩可能很多都很陌生,不过您可知道xz是绝大数linux默认就带的一个压缩工具. 之前xz使用一直很少,所以几乎没有什么提起. 我是在下载phpmyadmin的时候看到 ...
- linux下Gnome桌面环境的安装
在实际工作中,无论是生产环境还是公司内部环境.很多时候装的linux系统都是最小化安装的.即没有桌面环境, 那么如果有时我们又需要一个桌面环境.该怎么安装呢?其实不难,现笔者将安装方法分享如下. 测试 ...
- ember.js:使用笔记10 常用方法
init: controller中初始化方法, //注意该方法是在其他方法之前,所以取不出this,model等值: 跳转:this.tra ...
- 水题 HDOJ 4716 A Computer Graphics Problem
题目传送门 /* 水题:看见x是十的倍数就简单了 */ #include <cstdio> #include <iostream> #include <algorithm ...