CSS Expression用法總結

轉自http://www.chencheng.org/demo/css-expression.php

CSS Expression，動態 CSS 屬性，IE 私人，自 5.0 開始引入（IE8 將不再支援），參考 MSDN，不過有時用javascript動態產生它作為IE6的hack還是不錯的！

這東西的優點：

• 使 CSS 屬性動態產生，所以基本 js 能乾的它都能幹
• 使用 CSS 選擇符，比 js 遍曆到某個特定元素要方便得多

這東西的缺點：

• expression 會反覆執行，有嚴重的效率問題。它的觸發似乎不是通過事件，而是通過 interval 一類的機制。
• 別的瀏覽器不支援，IE8 也將不再支援

1. IE6 的背景閃爍 Bug Fix

   body {zoom: expression(function(el){document.execCommand('BackgroundImageCache', false, true);el.style.zoom = '1';}(this));}

2. 給不同 type 的 input 賦予不同的樣式

   input {zoom: expression(function(el){el.style.zoom = "1";el.className ? el.className+=" "+el.type : el.className=el.type;}(this));}

3. 隔行換色（zebra lists）

   .test {unicode-bidi: expression(function(el){el.style.unicodeBidi = "normal";var childs = el.getElementsByTagName("li");for(var i=0; i<childs.length; i++){(i % 2)?childs[i].className+=" even":childs[i].className+=" odd";}}(this));}

4. 類比 :before 或者 :after

   .test {letter-spacing: expression(function(el){el.style.letterSpacing = "0";var newchild = document.createElement("span");newchild.className="after";newchild.appendChild(document.createTextNode(" World!"));el.appendChild(newchild);}(this));}

5. 類比圖片的：max-width 和 max-height (或 min-width 和 min-height)
   

   
   
   
   

   .max-width span img {max-width:120px;max-height:120px;zoom:expression(function(el){el.style.zoom = "1"; var resizeImg = function() {if (el.width > 120 || el.height > 120) {if (el.width > el.height) {el.width = "120";el.height = el.height * (el.width / 120);} else {el.height = "120";el.width = el.width * (el.height / 120);}}} if (el.complete) {resizeImg();} else {el.onload = function() {resizeImg();}}}(this));}

6. IE6的:hover
   

   .ie6-hover input:hover, .ie6-hover .h {border:1px solid red;}.enable-ie6-hover input {_zoom:expression(function(el){el.style.zoom = "0";el.onmouseenter = function() {el.className = "h";};el.onmouseleave = function() {el.className = "";};}(this));}

7. IE6下的line-height bug
   

   bug:

   fixed:

   .ie6-line-height-bug { background:#f2f2f2; line-height:50px; zoom:1; }.ie6-line-height-bug-fixed input {_zoom: expression(function(el){el.style.zoom = "1";var iefixer = document.createElement("b");iefixer.style.zoom = 1;el.parentNode.insertBefore(iefixer, el);}(this));}