概述

　　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，例如：

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

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

優(yōu)點

　　css exprssion技術(shù)達到了可以使用表達式或公式來定義css屬性的目的，msdn上給出了它的幾個優(yōu)點：減少頁面上的代碼，使設(shè)計師無需學(xué)習(xí)javascript就能實現(xiàn)一些DHTML的效果。個人認為，減少頁面上的代碼實際上只是減少了相關(guān)javascript的代碼，而css expression中的代碼本身與js是及其類似，設(shè)計師無需學(xué)習(xí)js就能實現(xiàn)DHTML效果這個優(yōu)點也很牽強，或曰雞肋。

缺陷

.不符合web標準
css表達式這種在表現(xiàn)(css)中插入行為(js)代碼，有悖于web標準的結(jié)構(gòu)、表現(xiàn)、行為相分離的理念。
.效率低下
一個css表達式會反復(fù)執(zhí)行，甚至執(zhí)行成百上千次。這會大大消耗計算機的硬件資源，極端情況下會導(dǎo)致瀏覽器的崩潰。
.帶來安全隱患
css表達式暴露了一個腳本執(zhí)行的上下文，可能帶來腳本注入的隱患。

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

實際應(yīng)用

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

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

　　我們來看一個常見的返回頂部按鈕的代碼實現(xiàn)：

　　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會執(zhí)行多次，所以這個按鈕元素才會一直定位在頁面的底部。當然，我們可以使用javascript來模擬ie6的position:fixed，但細心的同學(xué)可能會發(fā)現(xiàn)這樣一個問題，IE6下的返回頂部按鈕會在你滾動頁面的時候有較為明顯的抖動。而我們使用css expression，這要在css加入以下規(guī)則，抖動的現(xiàn)象就會消失：

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

　　而使用js來模擬的，加上這句css規(guī)則也是沒有效果的。這也應(yīng)該是很多成熟商業(yè)網(wǎng)站現(xiàn)在還在使用css expression的原因。若有較好的實現(xiàn)方案，歡迎討論。

　　但是，根據(jù)YSlow提供的網(wǎng)頁優(yōu)化建議：Avoid CSS Expressions，也由于css expression的各種問題，個人不建議使用css表達式。可以和產(chǎn)品人員協(xié)商，容忍ie6下這點抖動的瑕疵，或者采用動畫來美化這個抖動效果，或者使用另外的一種方式來實現(xiàn)position:fixed，比如：固定頁面的高度，讓頁面內(nèi)部的內(nèi)容可滾動，然后將返回頂部按鈕絕對定位到底部(采用這種實現(xiàn)方式要慎重，因為或?qū)撁娌季趾徒Y(jié)構(gòu)造成較大的影響)。

總結(jié)

　　CSS expression作為web時代臨時解決方案的產(chǎn)物，在被其創(chuàng)建者無情的拋棄后，我們更應(yīng)該擯棄這種較為丑陋的代碼方式，采用更優(yōu)的解放方案。

參考

　　About Dynamic Properties

　　Ending Expressions

posted @ 2011-11-13 14:39 慢熱君Kevin 閱讀(40542) 評論(4) 收藏舉報

刷新頁面返回頂部

css expression

公告