概述
CSS表達式會降低浏覽器的渲染性能;用其他方案替換它們將會改善IE浏覽器的渲染性能。
注意:本節最佳實踐只適用於Internet Explorer 5到7,它們支持CSS表達式。Internet Explorer 8放棄使用CSS表達式,而其他浏覽器是不支持的。
詳細信息
作為一種動態改變文檔屬性來響應各種事件的的手段,Internet Explorer 5引入了CSS表達式或 “動態屬性”。它們由在CSS聲明中的CSS屬性值裡嵌入JavaScript表達式構成。在大多數情況下,它們用於以下目的:
模擬其他浏覽器支持但IE浏覽器尚未支持的標准CSS屬性。
使用比編寫全面JavaScript注入式樣式更小巧,更便捷的方法,來提供動態樣式和高級的事件處理。
不幸的是,CSS表達式對於性能的不良影響是相當大的,因為每當有事件觸發,浏覽器都要重新計算每個表達式,如一個窗口改變大小,鼠標移動等。CSS表達式的低性能表現是IE 8棄用它們的原因之一。如果你在網頁裡使用CSS表達式,應該盡一切努力來消除它們並且使用其他方法來達到同樣的功能。
建議
盡可能使用標准的CSS屬性。
IE 8已高度兼容標准CSS;IE 8只有在“兼容”模式才支持運行CSS表達式,而在“標准”模式下則不支持。如果你不需要向後兼容舊版本的IE,你應該轉換成標准的CSS屬性來替換所有對應的CSS表達式。如需CSS屬性和支持它們的IE版本的完整列表,請參見MSDN的CSS屬性索引。如果你確實需要支持所需CSS屬性不可用的舊版本IE浏覽器,請使用JavaScript來實現等效的功能。
使用JavaScript腳本樣式。
如果你正在使用CSS表達式來實現動態樣式,用純JavaScript重寫它們是很有意義的,因為這樣既能提高IE性能,同時在其他浏覽器獲得相同效果的支持。在這個由MSDN動態屬性頁提供的例子裡,下面的CSS表達式用於在浏覽器裡居中一個Html塊元素,並且該元素的尺寸可以在運行時改變,每次調整窗口大小都能重新定位在浏覽器中心:
<div id="oDiv" style="background-color: #CFCFCF; position: absolute; left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2); top:expression(document.body.clIEntHeight/2-oDiv.offsetHeight/2)">Example DIV</div>
下面是一個使用JavaScript和標准CSS的等價例子:
<style> #oDiv { position: absolute; background-color: #CFCFCF;} </style> <script type="text/Javascript"> // Check for browser support of event handling capability if (window.addEventListener) { window.addEventListener("load", centerDiv, false); window.addEventListener("resize", centerDiv, false); } else if (window.attachEvent) { window.attachEvent("onload", centerDiv); window.attachEvent("onresize", centerDiv); } else { window.onload = centerDiv; window.resize = centerDiv; } function centerDiv() { var myDiv = document.getElementById("oDiv"); var myBody = document.body; var bodyWidth = myBody.offsetWidth; //Needed for Firefox, which doesn't support offsetHeight var bodyHeight; if (myBody.scrollHeight) bodyHeight = myBody.scrollHeight; else bodyHeight = myBody.offsetHeight; var divWidth = myDiv.offsetWidth; if (myDiv.scrollHeight) var divHeight = myDiv.scrollHeight; else var divHeight = myDiv.offsetHeight; myDiv.style.top = (bodyHeight - divHeight) / 2; myDiv.style.left = (bodyWidth - divWidth) / 2; } </script>
如果您使用CSS表達式來模擬早期IE版本中不可用的CSS屬性,你應該提供版本測試的Javascript代碼,為支持CSS的浏覽器禁止CSS表達式。舉例來說,max-width屬性,這個屬性在一定數量的像素范圍內強制文本換行,在IE 7前是不支持的。下面的CSS表達式作為一種解決方法,為IE 5和6提供了這個功能:
p { width: expression( document.body.clIEntWidth > 600 ? "600px" : "auto" ); }
為不支持此屬性的IE浏覽器版本使用等價的JavaScript替換CSS表達式,可以使用類似於下面的內容:
<style> p { max-width: 300px; } </style> <script type="text/Javascript"> if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) < 7)) window.attachEvent("onresize", setMaxWidth); function setMaxWidth() { var paragraphs = document.getElementsByTagName("p"); for ( var i = 0; i < paragraphs.length; i++ ) paragraphs[i].style.width = ( document.body.clIEntWidth > 300 ? "300px" : "auto" ); </script>