Optimize browser rendering: Avoid CSS expressions

Overview

CSS expressions can degrade the rendering performance of browsers, and replacing them with other alternatives will improve the rendering performance of IE browsers.

Note: The best practices in this section apply only to Internet Explorer 5 through 7, which supports CSS expressions. Internet Explorer 8 Discards the use of CSS expressions and other browsers are not supported.

More information

As a means of dynamically changing document properties to respond to various events, Internet Explorer 5 introduces CSS expressions or "Dynamic properties." They consist of embedding JavaScript expressions in CSS attribute values in CSS declarations. In most cases, they are used for the following purposes:

Emulates standard CSS properties that are supported by other browsers but are not yet supported by IE browsers.

Provides dynamic styles and advanced event handling by using a smaller, more convenient method than writing a full JavaScript injection style.

Unfortunately, the bad effect of CSS expressions on performance is significant because whenever an event is triggered, the browser recalculates each expression, such as a window resizing, mouse movement, and so on. The low performance of CSS expressions is one of the reasons that IE 8 discards them. If you use CSS expressions in your Web pages, you should do everything you can to eliminate them and use other methods to achieve the same function.

Suggestions

Use the standard CSS properties whenever possible.

IE 8 is highly compliant with the standard Css;ie 8 The CSS expression is supported only in compatibility mode and is not supported in standard mode. If you do not need to be backward compatible with older versions of IE, you should convert to a standard CSS attribute to replace all corresponding CSS expressions. For a complete list of CSS properties and versions of IE that support them, see the MSDN CSS Property index . If you do need to support an older version of IE that is not available for CSS properties, use JavaScript to achieve equivalent functionality.

Use JavaScript script styles.

If you are using CSS expressions to implement dynamic styles, it makes sense to rewrite them with pure JavaScript, as this will improve IE performance while supporting other browsers for the same effect. In this example provided by the MSDN Dynamic Property page, the following CSS expression is used to center an HTML block element in the browser, and the dimension of the element can be changed at run time, and each resizing window can be repositioned in the browser center:

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

Here is an equivalent example of using JavaScript and standard CSS:

<style>   #oDiv {position:absolute background-color: #CFCFCF;} </style> <script type= "Text/javasc Ript ">/Check for browser support of event handling capability   if (Window.addeventlistener) {&NBSP;WINDOW.A
 Ddeventlistener ("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.off

SetWidth;
  //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) &nbsP
 var divheight = mydiv.scrollheight;

   else var divheight = mydiv.offsetheight;
MyDiv.style.top = (bodyheight-divheight)/2;
  MyDiv.style.left = (bodywidth-divwidth)/2;  } </script>

If you use CSS expressions to simulate CSS properties that are not available in the earlier version of IE, you should provide JavaScript code for the version test and disallow CSS expressions for browsers that support CSS. For example, the Max-width property, which forces text to wrap within a certain number of pixels, is not supported before IE 7. The following CSS expressions provide this functionality for IE 5 and 6 as a workaround:

P {width:expression (Document.body.clientWidth > 600?) "600px": "Auto"); }

Use equivalent javascript to replace CSS expressions for IE browser versions that do not support this property, and you can use something similar to the following:

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