概述

CSS表達式會降低瀏覽器的渲染性能；用其他方案替換它們將會改善IE瀏覽器的渲染性能。

注意：本節(jié)最佳實踐只適用于Internet Explorer 5到7，它們支持CSS表達式。Internet Explorer 8放棄使用CSS表達式，而其他瀏覽器是不支持的。

詳細信息

作為一種動態(tài)改變文檔屬性來響應(yīng)各種事件的的手段，Internet Explorer 5引入了CSS表達式或 “動態(tài)屬性”。它們由在CSS聲明中的CSS屬性值里嵌入JavaScript表達式構(gòu)成。在大多數(shù)情況下，它們用于以下目的：

模擬其他瀏覽器支持但IE瀏覽器尚未支持的標準CSS屬性。

使用比編寫全面JavaScript注入式樣式更小巧，更便捷的方法，來提供動態(tài)樣式和高級的事件處理。

不幸的是，CSS表達式對于性能的不良影響是相當大的，因為每當有事件觸發(fā)，瀏覽器都要重新計算每個表達式，如一個窗口改變大小，鼠標移動等。CSS表達式的低性能表現(xiàn)是IE 8棄用它們的原因之一。如果你在網(wǎng)頁里使用CSS表達式，應(yīng)該盡一切努力來消除它們并且使用其他方法來達到同樣的功能。

建議

盡可能使用標準的CSS屬性。

IE 8已高度兼容標準CSS；IE 8只有在“兼容”模式才支持運行CSS表達式，而在“標準”模式下則不支持。如果你不需要向后兼容舊版本的IE，你應(yīng)該轉(zhuǎn)換成標準的CSS屬性來替換所有對應(yīng)的CSS表達式。如需CSS屬性和支持它們的IE版本的完整列表，請參見MSDN的CSS屬性索引。如果你確實需要支持所需CSS屬性不可用的舊版本IE瀏覽器，請使用JavaScript來實現(xiàn)等效的功能。

使用JavaScript腳本樣式。

如果你正在使用CSS表達式來實現(xiàn)動態(tài)樣式，用純JavaScript重寫它們是很有意義的，因為這樣既能提高IE性能，同時在其他瀏覽器獲得相同效果的支持。在這個由MSDN動態(tài)屬性頁提供的例子里，下面的CSS表達式用于在瀏覽器里居中一個HTML塊元素，并且該元素的尺寸可以在運行時改變，每次調(diào)整窗口大小都能重新定位在瀏覽器中心：

<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屬性，你應(yīng)該提供版本測試的javascript代碼，為支持CSS的瀏覽器禁止CSS表達式。舉例來說，max-width屬性，這個屬性在一定數(shù)量的像素范圍內(nèi)強制文本換行，在IE 7前是不支持的。下面的CSS表達式作為一種解決方法，為IE 5和6提供了這個功能：

p { width: expression( document.body.clientWidth > 600 ? "600px" : "auto" ); }

為不支持此屬性的IE瀏覽器版本使用等價的JavaScript替換CSS表達式，可以使用類似于下面的內(nèi)容：

<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>

最新評論