文档章节

css expression巧用法

slodreamer
 slodreamer
发布于 2016/05/11 17:11
字数 617
阅读 9
收藏 0

 

概述

  css expression(css表达式)又称Dynamic properties(动态属性)是早期微软DHTML的产物,以其可以在Css中定义表达式(公式)来达到建立元素间属性之间的联系等作用,从IE5开始得到支持,后因标准、性能、安全性等问题,微软从IE8 beta2标准模式开始,取消对css expression的支持。

 

使用

  微软提供了4个css expression方法:getExpression、recalc、removeExpression、setExpression。有兴趣可以参考msdn

  一般最常用的是直接在css中使用expression,例如:

1 .toTop{
2     top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - 60)));
3 }

  这是一个返回顶部按钮css代码的截取,用css来将元素定位到屏幕底部的位置。

 

优点

  css exprssion技术达到了可以使用表达式或公式来定义css属性的目的,msdn上给出了它的几个优点:减少页面上的代码,使设计师无需学习javascript就能实现一些DHTML的效果。个人认为,减少页面上的代码实际上只是减少了相关javascript的代码,而css expression中的代码本身与js是及其类似,设计师无需学习js就能实现DHTML效果这个优点也很牵强,或曰鸡肋。

 

缺陷

  • .不符合web标准
    css表达式这种在表现(css)中插入行为(js)代码,有悖于web标准的结构、表现、行为相分离的理念。
  • .效率低下
    一个css表达式会反复执行,甚至执行成百上千次。这会大大消耗计算机的硬件资源,极端情况下会导致浏览器的崩溃。
  • .带来安全隐患
    css表达式暴露了一个脚本执行的上下文,可能带来脚本注入的隐患。

  基于以上原因,微软最终从IE8 beta2(标准模式下)开始放弃对css表达式的支持。

 

实际应用

  早期很多开发人员利用css expression实现了许多效果,比如将元素相对鼠标指针进行定位,根据一个定时器来移动元素等等。当然这些效果能够使用js来实现。

  虽然css表达式问题很多,但是我们依然能够在网上看到它们的影子,甚至在一些成熟的商业网站上。最常见的一个应用就是悬浮在页面上的某个模块(比如导航、返回顶部)。

© 著作权归作者所有

上一篇: MVC百度百科
下一篇: jq call方法详解
slodreamer
粉丝 0
博文 9
码字总数 1837
作品 0
昌平
程序员
私信 提问
巧用伪元素和伪类让我们的html结构更清晰合理

css3为了区分伪类和伪元素,伪元素采用双冒号写法。 伪元素: [ 伪元素用于向某些选择器设置特殊效果,简单来说,伪元素创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容,...

Neuro_annie
2017/12/06
0
0
Expression 使之支持css的一些属性

Expression 常用: 最小高度: 最大宽度:#container { width: expression((documentElement.clientWidth > 725) ? "725px" : "auto" ); } 3、让IE6支持min-width同时又支持max-width 让IE6......

钟女士
2013/01/04
113
0
一些可以装逼的算法技巧总结!值得拥有简单实用算法思想

今天和大家讲讲,在做算法题时常用的一些技巧。对于平时没用过这些技巧的人,或许你可以考虑试着去看看在实践中能否用的上这些技巧来优化问题的解。 1. 巧用数组下标 数组的下标是一个隐含的...

这个人很懒什么都没留下
03/16
0
0
让IE6支持max-width、IE6支持min-width样式

1、IE6支持max-width解决方法 IE6支持最大宽度,解决CSS代码: .yangshi{max-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"10......

橙汁儿
2012/11/30
329
1
CSS自定义属性Expression

1.给元素固有属性赋值 在图片缩放时用得最多 下面是定义container容器的宽度,如果<725就为自己的宽度,否则就等于725,相当于max-width:725px;。 <style type="text/css" media="screen"> c......

李佳顺
2013/02/17
134
5

没有更多内容

加载失败,请刷新页面

加载更多

如何编写高质量的 JS 函数(1) -- 敲山震虎篇

本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm7Xi7JxQ 作者:杨昆 一千个读者,有一千个哈姆雷特。 此系列文章将会从函数的执行机制、鲁棒性、函...

vivo互联网技术
47分钟前
5
0
学会这5个Excel技巧,让你拒绝加班

在网上,随处都可以看到Excel技巧,估计已看腻了吧?但下面5个Excel技巧会让你相见恨晚。关键的是它们个个还很实用 图一 技巧1:快速删除边框 有时当我们处理数据需要去掉边框,按Ctrl+Shif...

干货趣分享
今天
11
0
JS基础-该如何理解原型、原型链?

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
今天
9
0
高防CDN的出现是为了解决网站的哪些问题?

高防CDN是为了更好的服务网络而出现的,是通过高防DNS来实现的。高防CDN是通过智能化的系统判断来路,再反馈给用户,可以减轻用户使用过程的复杂程度。通过智能DNS解析,能让网站访问者连接到...

云漫网络Ruan
今天
15
0
OSChina 周一乱弹 —— 熟悉的味道,难道这就是恋爱的感觉

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :好久没分享歌了分享张碧晨的单曲《今后我与自己流浪》 《今后我与自己流浪》- 张碧晨 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
3.3K
25

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部