《高性能网站建设指南》翻阅笔记_规则7- 避免CSS表达式
日期：2014-05-17 浏览次数：20636 次
http://stevesouders.com/hpws/rule-expr.php
CSS表达式是动态设置CSS属性的一种强大但很危险的方式，因为：
1.CSS表达式用于动态设置CSS属性，它只受到IE 5及以后版本的支持。
2. 禁用CSS表达式，因为它几乎在触发各种事件时都会被调用。
3. 有的时候，CSS表达式也会影响页面的加载时间。
任何css表达式实现的功能我们都可以找到它的替代方式，比如事件处理器等。
就是时间触发的时候才会执行，比如设置一个页面的最小宽度数600像素，IE不支持min-width属性，所以在IE中使用CSS表达式。width:expression(document.body.clientWidth<600?"600px":"auto");
min-width:600px;）优化成只有window.onresize触发时才执行
CSS表达式（示例）：
background-color: expression( (new Date()).getSeconds()%2 ?"red":"blue" );
详细实例：
<HTML>
<HEAD>
<style>
.mybody{
background-color: expression((new Date()).getSeconds()%5 ?'#FF0000':'#0000FF');
}</style>
</HEAD>
<BODY class="mybody"></BODY>
</HTML>
注意：禁用CSS表达式，因为它几乎在触发各种事件时都会被调用。
改进：（一次性表达式）
<style>
P{ background-color: expression( altBgcolor(this) ); }
</style>
<script type="text/javascript">
function altBgcolor(elem)
{
elem.style.backgroundColor=(new Date()).getHours()%2?"#f00":"#0f0";
}
</script>
在调用JS代码后，JS代码重写了其background-color属性，所以只会执行一次。
