css expression是什麼鬼

概述

  css expression(css表達式)又稱Dynamic properties(動態屬性)是早期微軟DHTML的產物,以其可以在Css中定義表達式(公式)來達到建立元素間屬性之間的聯繫等作用,從IE5開始得到支持,後因標準、性能、安全性等問題,微軟從IE8 beta2標準模式開始,取消對css expression的支持。

 

使用

  微軟提供了4個css expression方法:getExpression、recalc、removeExpression、setExpression。有興趣可以參考msdn

  一般最常用的是直接在css中使用expression,例如:

1 .toTop{
2 top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - 60)));
3 }

  這是一個返回頂部按鈕css代碼的截取,用css來將元素定位到屏幕底部的位置。

 

優點

  css exprssion技術達到了可以使用表達式或公式來定義css屬性的目的,msdn上給出了它的幾個優點:減少頁面上的代碼,使設計師無需學習javascript就能實現一些DHTML的效果。個人認爲,減少頁面上的代碼實際上只是減少了相關javascript的代碼,而css expression中的代碼本身與js是及其類似,設計師無需學習js就能實現DHTML效果這個優點也很牽強,或曰雞肋。

 

缺陷

  • .不符合web標準
    css表達式這種在表現(css)中插入行爲(js)代碼,有悖於web標準的結構、表現、行爲相分離的理念。
  • .效率低下
    一個css表達式會反覆執行,甚至執行成百上千次。這會大大消耗計算機的硬件資源,極端情況下會導致瀏覽器的崩潰。
  • .帶來安全隱患
    css表達式暴露了一個腳本執行的上下文,可能帶來腳本注入的隱患。

  基於以上原因,微軟最終從IE8 beta2(標準模式下)開始放棄對css表達式的支持。

 

實際應用

  早期很多開發人員利用css expression實現了許多效果,比如將元素相對鼠標指針進行定位,根據一個定時器來移動元素等等。當然這些效果能夠使用js來實現。

  雖然css表達式問題很多,但是我們依然能夠在網上看到它們的影子,甚至在一些成熟的商業網站上。最常見的一個應用就是懸浮在頁面上的某個模塊(比如導航、返回頂部)。

  我們來看一個常見的返回頂部按鈕的代碼實現:

  html:

複製代碼
<!doctype html>
<html>
<head>...</head>
<body>
<div id="top">...</div>
...
<a href="#top" id="toTopBtn">返回的頂部</a>
</body>

</html>
複製代碼

  css:

複製代碼
#toTopBtn{
position
:fixed;
bottom
:10px;
right
:10px;
_position
:absolute;
_top
:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - 60));
...
}
複製代碼

  _position和_top是對IE6的hack,因爲IE6不支持position:fixed。這裏的css表達式的作用是模擬position:fixed,即在將返回頂部按鈕固定在頁面的底部,不管頁面是否滾動、縮放。正是因爲css exprssion會執行多次,所以這個按鈕元素纔會一直定位在頁面的底部。當然,我們可以使用javascript來模擬ie6的position:fixed,但細心的同學可能會發現這樣一個問題,IE6下的返回頂部按鈕會在你滾動頁面的時候有較爲明顯的抖動。而我們使用css expression,這要在css加入以下規則,抖動的現象就會消失:

html{
_background-image
:url(about/blank);
_background-attachment
:fixed;
}

  而使用js來模擬的,加上這句css規則也是沒有效果的。這也應該是很多成熟商業網站現在還在使用css expression的原因。若有較好的實現方案,歡迎討論。

  但是,根據YSlow提供的網頁優化建議:Avoid CSS Expressions,也由於css expression的各種問題,個人不建議使用css表達式。可以和產品人員協商,容忍ie6下這點抖動的瑕疵,或者採用動畫來美化這個抖動效果,或者使用另外的一種方式來實現position:fixed,比如:固定頁面的高度,讓頁面內部的內容可滾動,然後將返回頂部按鈕絕對定位到底部(採用這種實現方式要慎重,因爲或對頁面佈局和結構造成較大的影響)。

 

總結

  CSS expression作爲web時代臨時解決方案的產物,在被其創建者無情的拋棄後,我們更應該擯棄這種較爲醜陋的代碼方式,採用更優的解放方案。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章