溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了css expression的用法及其優缺點介紹，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
概述
css expression(css表達式)又稱Dynamic properties(動態屬性)是早期微軟DHTML的產物，以其可以在Css中定義表達式(公式)來達到建立元素間屬性之間的聯系等作用，從IE5開始得到支持，后因標準、性能、安全性等問題，微軟從IE8 beta2標準模式開始，取消對css expression的支持。
使用
微軟提供了4個css expression方法：getExpression、recalc、removeExpression、setExpression。有興趣可以參考msdn。
一般最常用的是直接在css中使用expression，例如：
代碼如下:
.toTop{
top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - 60)));
}
這是一個返回頂部按鈕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時代臨時解決方案的產物，在被其創建者無情的拋棄后，我們更應該擯棄這種較為丑陋的代碼方式，采用更優的解放方案。
上述內容就是css expression的用法及其優缺點介紹，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
