為什麼不使用CSS expression?

CSS expressions(CSS運算式)是一種功能非常強大的方法，可以實現頁面的動態設定屬性，但相容性較差，同時也有著非常恐怖的弱點；

可以在CSS expressions中使用javascript中的某個函數運算式。來實現動態設定頁面的樣式。也可以解決IE低版本瀏覽器中的某些體驗。

 

支援者：IE5至IE7瀏覽器。

 

 

例如，在IE6中，不支援應用了position:absolute屬性的height:100%。可以使用：height:expression(it.parentNode.offsetHeight+'px';);

例如，用css運算式來控制顏色的變化，每隔一個小時變化一次：background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

 

但是，這個方法存在一個很可怕的隱患，它會頻繁的計算（超出大部分設計者的預期）；

在以下情況，會導致 css expressions的頻繁執行。

1.網頁開啟時。（<10次）

2.每次重設瀏覽器大小。（1次）

3.拉動設定瀏覽器大小。（每拉動一像素計算1次）

4.在頁面有文字地區滑動滑鼠（滑鼠每滑動一像素計算1次）

使用了css expressions的頁面，css運算式很容易就被計算上萬次，導致機器變慢，瀏覽器卡死，cpu佔用過高等疾病。

 

測試計算次數的demo （請使用IE6，IE7瀏覽器查看。）

 

 

所以如果頁面樣式屬性一定要動態來設定，那麼可以考慮用使用javascript實現，不推薦使用css expressions；

如果一定要用CSS運算式，那你不要忘記它可能會產產生千上萬次計算而同時
影響到你的整個頁面效果；