CSS Expression Reloaded
CSS Expression，动态 CSS 属性，IE 私有，自 5.0 开始引入（IE8 将不再支持），参考 MSDN。
这东西的优点：
- 使 CSS 属性动态生成，所以基本 js 能干的它都能干
- 使用 CSS 选择符，比 js 遍历到某个特定元素要方便得多
这东西的缺点：
- expression 会反复执行，有严重的效率问题。它的触发似乎不是通过事件，而是通过 interval 一类的机制。
- 别的浏览器不支持，IE8 也将不再支持
那现在翻出来干嘛呢？因为我发现，第一个缺点是可以解决的。方法就是，在 expression 语句体里面，将触发该 expression 的 css 属性重置。比如 body{ zoom: expression(function(ele){ele.style.zoom = "1"; alert("xx");}(this));}，执行这段 CSS 会发现，alert 只跑了一次。具体可以看我上一个关于解决背景闪烁问题的帖子。
所以，解决了 expression 的效率问题，就完全可以在实战中用上了。使用时只要用一个无关紧要的 CSS 属性做触发，比如 zoom， 比如 letter-spacing，比如 unicode-bidi，等等等等，触发完了重置回默认值。可以玩的很多，我来写几个实际应用中经常会遇到的问题：
给不同 type 的 input 赋予不同的样式
支持 CSS2 选择符的可以使用属性选择符，IE 则可以用 expression 给 input 加上不同 type 对应的 class：（这个例子在经典贴过）
input{
zoom: expression(function(ele){
ele.style.zoom = "1";
(ele.className)?ele.className+=" "+ele.type:ele.className=ele.type;
}(this));
}
input[type="text"]{ border: 1px solid red;}
input.text{border: 1px solid red;}
input[type="button"]{ border: 1px solid blue;}
input.button{border: 1px solid blue;}
演示 1，这个还可以再发散发散，比如加上 :checked，:disabled 等等，改表单样式不愁啦～
隔行换色（zebra lists）
支持 CSS3 选择符的可以直接上 nth-child（webkit，opera 都支持，马上要发布的 firefox3.1 也支持），IE 则可以通过 expression 加上 odd 或 even 的 class：
.test{
unicode-bidi: expression(function(ele){
ele.style.unicodeBidi = "normal";
var childs = ele.getElementsByTagName("li");
for(var i=0; i<childs.length; i++){
(i % 2)?childs[i].className+=" even":childs[i].className+=" odd";
}
}(this));
}
.test li.odd{background: #CCC;}
.test li.even{background: #EEE;}
.test li:nth-child(odd){
background: #CCC;
}
.test li:nth-child(even){
background: #EEE;
}
演示 2 (IE5+,Opera,Safari,Chrome,Firefox 3.1)
模拟 :before 或者 :after
Firefox 3.1 之后，:before 或者 :after 出来的东西可控的 CSS 属性更多了，比如 position/float，又有的玩了，不像以前基本废柴，只拿来清除浮动……大材小用啊。
.test{
letter-spacing: expression(function(ele){
ele.style.letterSpacing = "0";
var newchild = document.createElement("span");
newchild.className="after";
newchild.appendChild(document.createTextNode(" World!"));
ele.appendChild(newchild);
}(this));
}
.test:after{
content: " World!";
color: red;
}
.test .after{color: red;}
还有什么好玩的可以玩？想起来再来补充。
