溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了css expression的用法及其優(yōu)缺點(diǎn)介紹，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
概述
css expression(css表達(dá)式)又稱Dynamic properties(動態(tài)屬性)是早期微軟DHTML的產(chǎn)物，以其可以在Css中定義表達(dá)式(公式)來達(dá)到建立元素間屬性之間的聯(lián)系等作用，從IE5開始得到支持，后因標(biāo)準(zhǔn)、性能、安全性等問題，微軟從IE8 beta2標(biāo)準(zhǔn)模式開始，取消對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來將元素定位到屏幕底部的位置。
優(yōu)點(diǎn)
css exprssion技術(shù)達(dá)到了可以使用表達(dá)式或公式來定義css屬性的目的，msdn上給出了它的幾個優(yōu)點(diǎn)：減少頁面上的代碼，使設(shè)計(jì)師無需學(xué)習(xí)javascript就能實(shí)現(xiàn)一些DHTML的效果。個人認(rèn)為，減少頁面上的代碼實(shí)際上只是減少了相關(guān)javascript的代碼，而css expression中的代碼本身與js是及其類似，設(shè)計(jì)師無需學(xué)習(xí)js就能實(shí)現(xiàn)DHTML效果這個優(yōu)點(diǎn)也很牽強(qiáng)，或曰雞肋。
缺陷
.不符合web標(biāo)準(zhǔn)
css表達(dá)式這種在表現(xiàn)(css)中插入行為(js)代碼，有悖于web標(biāo)準(zhǔn)的結(jié)構(gòu)、表現(xiàn)、行為相分離的理念。
.效率低下
一個css表達(dá)式會反復(fù)執(zhí)行，甚至執(zhí)行成百上千次。這會大大消耗計(jì)算機(jī)的硬件資源，極端情況下會導(dǎo)致瀏覽器的崩潰。
.帶來安全隱患
css表達(dá)式暴露了一個腳本執(zhí)行的上下文，可能帶來腳本注入的隱患。
基于以上原因，微軟最終從IE8 beta2(標(biāo)準(zhǔn)模式下)開始放棄對css表達(dá)式的支持。
實(shí)際應(yīng)用
早期很多開發(fā)人員利用css expression實(shí)現(xiàn)了許多效果，比如將元素相對鼠標(biāo)指針進(jìn)行定位，根據(jù)一個定時器來移動元素等等。當(dāng)然這些效果能夠使用js來實(shí)現(xiàn)。
雖然css表達(dá)式問題很多，但是我們依然能夠在網(wǎng)上看到它們的影子，甚至在一些成熟的商業(yè)網(wǎng)站上。最常見的一個應(yīng)用就是懸浮在頁面上的某個模塊(比如導(dǎo)航、返回頂部)。
我們來看一個常見的返回頂部按鈕的代碼實(shí)現(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，因?yàn)镮E6不支持position:fixed。這里的css表達(dá)式的作用是模擬position:fixed，即在將返回頂部按鈕固定在頁面的底部，不管頁面是否滾動、縮放。正是因?yàn)閏ss exprssion會執(zhí)行多次，所以這個按鈕元素才會一直定位在頁面的底部。當(dāng)然，我們可以使用javascript來模擬ie6的position:fixed，但細(xì)心的同學(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的原因。若有較好的實(shí)現(xiàn)方案，歡迎討論。
但是，根據(jù)YSlow提供的網(wǎng)頁優(yōu)化建議：Avoid CSS Expressions，也由于css expression的各種問題，個人不建議使用css表達(dá)式?？梢院彤a(chǎn)品人員協(xié)商，容忍ie6下這點(diǎn)抖動的瑕疵，或者采用動畫來美化這個抖動效果，或者使用另外的一種方式來實(shí)現(xiàn)position:fixed，比如：固定頁面的高度，讓頁面內(nèi)部的內(nèi)容可滾動，然后將返回頂部按鈕絕對定位到底部(采用這種實(shí)現(xiàn)方式要慎重，因?yàn)榛驅(qū)撁娌季趾徒Y(jié)構(gòu)造成較大的影響)。
CSS expression作為web時代臨時解決方案的產(chǎn)物，在被其創(chuàng)建者無情的拋棄后，我們更應(yīng)該擯棄這種較為丑陋的代碼方式，采用更優(yōu)的解放方案。
上述內(nèi)容就是css expression的用法及其優(yōu)缺點(diǎn)介紹，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
