web.Frontend

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;}

演示 3

还有什么好玩的可以玩？想起来再来补充。