css expression应用简述及其优缺陷详细介绍

2021-03-09 01:23 jianzhan
简述
  css expression(css表述式)又称Dynamic properties(动态性特性)是初期微软DHTML的物质,以其能够在Css中界定表述式(公式)来做到创建元素间特性之间的联络等功效,从IE5刚开始获得适用,后因规范、特性、安全性性等难题,微软从IE8 beta2规范方式刚开始,撤销对css expression的适用。
应用
  微软出示了4个css expression方式:getExpression、recalc、removeExpression、setExpression。有兴趣爱好能够参照msdn。
  1般最常见的是立即在css中应用expression,比如:

拷贝编码
编码以下:

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

这是1个回到顶部按钮css编码的截取,用css来将元素精准定位到显示屏底部的部位。
优势
  css exprssion技术性做到了可使用表述式或公式来界定css特性的目地,msdn上得出了它的几个优势:降低网页页面上的编码,使设计方案师不用学习培训javascript就可以完成1些DHTML的实际效果。本人觉得,降低网页页面上的编码具体上只是降低了有关javascript的编码,而css expression中的编码自身与js是及其相近,设计方案师不用学习培训js就可以完成DHTML实际效果这个优势也很苍白无力,或谓鸡肋。
缺点
.不符web规范
css表述式这类在主要表现(css)中插进个人行为(js)编码,有悖于web规范的构造、主要表现、个人行为相分离出来的理念。
.高效率不高
1个css表述式会不断实行,乃至实行不计其数次。这会大大耗费测算机的硬件配置資源,极端化状况下会致使访问器的奔溃。
.带来安全性隐患
css表述式曝露了1个脚本制作实行的左右文,将会带来脚本制作引入的隐患。
  根据以上缘故,微软最后从IE8 beta2(规范方式下)刚开始舍弃对css表述式的适用。
具体运用
  初期许多开发设计人员运用css expression完成了很多实际效果,例如将元素相对性电脑鼠标指针开展精准定位,依据1个定时执行器来挪动元素这些。自然这些实际效果可以应用js来完成。
  尽管css表述式难题许多,可是大家仍然可以在网络上看到它们的身影,乃至在1些完善的商业服务网站上。最多见的1个运用便是飘浮在网页页面上的某个控制模块(例如导航栏、回到顶部)。
  大家看来1个普遍的回到顶部按钮的编码完成:
  html:

拷贝编码
编码以下:

<!doctype html>
<html>
<head>...</head>
<body>
<div id="top">...</div>
...
<a href="#top" id="toTopBtn">回到的顶部</a>
</body>
</html>

 css:

拷贝编码
编码以下:

#toTopBtn{
position:fixed;
bottom:10px;
right:10px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - 60));
...
}

_position和_top是对IE6的hack,由于IE6不适用position:fixed。这里的css表述式的功效是仿真模拟position:fixed,即在将回到顶部按钮固定不动在网页页面的底部,无论网页页面是不是翻转、放缩。更是由于css exprssion会实行数次,因此这个按钮元素才会1直精准定位在网页页面的底部。自然,大家可使用javascript来仿真模拟ie6的position:fixed,但仔细的同学将会会发现这样1个难题,IE6下的回到顶部按钮会在你翻转网页页面的情况下有较为显著的颤动。而大家应用css expression,这要在css添加下列标准,颤动的状况就会消退:

拷贝编码
编码以下:

html{
_background-image:url(about/blank);
_background-attachment:fixed;
}

而应用js来仿真模拟的,再加这句css标准也是沒有实际效果的。这也应当是许多完善商业服务网站如今还在应用css expression的缘故。若有较好的完成计划方案,欢迎探讨。
  可是,依据YSlow出示的网页页面提升提议:Avoid CSS Expressions,也因为css expression的各种各样难题,本人不提议应用css表述式。能够和商品人员商议,容忍ie6下这点颤动的缺陷,或选用动漫来清理这个颤动实际效果,或应用此外的1种方法来完成position:fixed,例如:固定不动网页页面的高宽比,让网页页面內部的內容可翻转,随后将回到顶部按钮肯定精准定位究竟部(选用这类完成方法要谨慎,由于或对网页页面合理布局和构造导致较大的危害)。
总结
  CSS expression做为web时期临时性处理计划方案的物质,在被其建立者无情的抛下后,大家更应当摒弃这类较为丑恶的编码方法,选用更优的释放计划方案。