概述
　　css expression(css表達式)又稱Dynamic properties(動態(tài)屬性)是早期微軟DHTML的產(chǎn)物，以其可以在Css中定義表達式(公式)來達到建立元素間屬性之間的聯(lián)系等作用，從IE5開始得到支持，后因標準、性能、安全性等問題，微軟從IE8 beta2標準模式開始，取消對css expression的支持。
使用
　　微軟提供了4個css expression方法：getExpression、recalc、removeExpression、setExpression。有興趣可以參考msdn。
　　一般最常用的是直接在css中使用expression，例如：


這是一個返回頂部按鈕css代碼的截取，用css來將元素定位到屏幕底部的位置。
優(yōu)點
　　css exprssion技術達到了可以使用表達式或公式來定義css屬性的目的，msdn上給出了它的幾個優(yōu)點：減少頁面上的代碼，使設計師無需學習javascript就能實現(xiàn)一些DHTML的效果。個人認為，減少頁面上的代碼實際上只是減少了相關javascript的代碼，而css expression中的代碼本身與js是及其類似，設計師無需學習js就能實現(xiàn)DHTML效果這個優(yōu)點也很牽強，或曰雞肋。
缺陷
.不符合web標準
css表達式這種在表現(xiàn)(css)中插入行為(js)代碼，有悖于web標準的結構、表現(xiàn)、行為相分離的理念。
.效率低下
一個css表達式會反復執(zhí)行，甚至執(zhí)行成百上千次。這會大大消耗計算機的硬件資源，極端情況下會導致瀏覽器的崩潰。
.帶來安全隱患
css表達式暴露了一個腳本執(zhí)行的上下文，可能帶來腳本注入的隱患。
　　基于以上原因，微軟最終從IE8 beta2(標準模式下)開始放棄對css表達式的支持。
實際應用
　　早期很多開發(fā)人員利用css expression實現(xiàn)了許多效果，比如將元素相對鼠標指針進行定位，根據(jù)一個定時器來移動元素等等。當然這些效果能夠使用js來實現(xiàn)。
　　雖然css表達式問題很多，但是我們依然能夠在網(wǎng)上看到它們的影子，甚至在一些成熟的商業(yè)網(wǎng)站上。最常見的一個應用就是懸浮在頁面上的某個模塊(比如導航、返回頂部)。
　　我們來看一個常見的返回頂部按鈕的代碼實現(xiàn)：
　　html：


　css:


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


而使用js來模擬的，加上這句css規(guī)則也是沒有效果的。這也應該是很多成熟商業(yè)網(wǎng)站現(xiàn)在還在使用css expression的原因。若有較好的實現(xiàn)方案，歡迎討論。
　　但是，根據(jù)YSlow提供的網(wǎng)頁優(yōu)化建議：Avoid CSS Expressions，也由于css expression的各種問題，個人不建議使用css表達式?？梢院彤a(chǎn)品人員協(xié)商，容忍ie6下這點抖動的瑕疵，或者采用動畫來美化這個抖動效果，或者使用另外的一種方式來實現(xiàn)position:fixed，比如：固定頁面的高度，讓頁面內部的內容可滾動，然后將返回頂部按鈕絕對定位到底部(采用這種實現(xiàn)方式要慎重，因為或對頁面布局和結構造成較大的影響)。
總結
　　CSS expression作為web時代臨時解決方案的產(chǎn)物，在被其創(chuàng)建者無情的拋棄后，我們更應該擯棄這種較為丑陋的代碼方式，采用更優(yōu)的解放方案。

最新評論