Stop using poor performance CSS expressions – Use JavaScript instead

Since the CSS support in Internet Explorer, especially in versions prior to Internet Explorer 7, has been lagging quite substantially, clever web developers have started using CSS expressions to mimic CSS functionality. However, few realize how this affects performance.

Explaining CSS expressions

The basic idea with CSS expressions is that you will have calculation and dynamic values for properties in the CSS code, something that people have found very useful. A simple example can be implementing max-width behavior in IE 6:


#container{
	width: expression(document.body.clientWidth > 1100)? "1100px" : "auto";
	/* For web browsers supporting it */
	max-width: 1100px;
}

The code above evaluates the available width of the body element, and if wide enough, adapts the element named container so it stretches to a maximum width of 1100 pixels. If the area needed isn’t available, it scales down to what will fit within the context.

Basically, any way you can use one-line JavaScript code, it means a possibility to dynamically style something.

It uses JavaScript?

Yes, for those who don’t know: CSS expressions is purely based on JavaScript, and through the CSS implementation in Internet Explorer, it opens up the option to write scripts in the CSS code.

Sweet!

You’re probably thinking “Sweet!”, and immediately start planning everything you can fix with CSS expressions to touch up on your CSS code for Internet Explorer. Away with nasty hacks; enter clean, proper and cool solution.

Sweet?

I’m afraid, my friends, that it isn’t that sweet. To begin with, many web developers seem to completely underestimate that this requires JavaScript enabled in the web browser to function at all. And since you don’t want your layouts to be JavaScript dependent, you will have to provide a proper fallback which will work without JavaScript.

The other major reason is that CSS expressions are very resource intensive. The resulting value of an expression isn’t just calculated once, but consistently while you’re using the web page. Add moving the mouse pointer around to that, and it will trigger even more evaluation from the expression interpreter.

You’ve probably experienced some web pages being even more sluggish than expected in Internet Explorer, but haven’t known about the reason why. Look no further: usage (especially heavy such) of CSS expressions is most of the times the culprit you want to get rid of.

Why do people use CSS expressions?

I have complete understanding of people implementing CSS expressions to cover up for shortcomings in the CSS rendering engine in Internet Explorer. I also believe that since the syntax is very easy, web developers have (as always with easy code) adopted it without seriously analyzing any possible downsides to it.

Use “real” JavaScript instead of CSS expressions

You will never get around the dependency on JavaScript being enabled for having a layout which is dynamically calculated in the same manner. However, there’s a much better strategy to achieve the same behavior and result in Internet Explorer, but without the performance loss: JavaScript

And by JavaScript, I mean real, proper JavaScript code included in an external file, and instead tied to event handlers. This means that the behavior, and thus the calculation, will only take place when that event occurs. In between, there will be no performance affection due to CSS expressions desperately trying to find out what the annoying user (to CSS expressions, that is) is doing in the web browser window.

A JavaScript example

To get the same result as the above CSS expression code sample, you need this code (as a suggestion included in a file named maxWidthFixForIE6.js):


window.onload = checkAvailableWidth;
window.onresize = checkAvailableWidth;
function checkAvailableWidth(){
	var container = document.getElementById("container");
	container.style.width = (document.body.clientWidth > 1100)? "1100px" : "auto";
}

Too much code for your taste? No more tasty one-liners? Well, do you want funky looking code (which every web developer for some reason think is obliged to belong in the CSS file/-s), or do you want code which is reliable and gives the best performance for your users? I know what my pick is, at least…

For Internet Explorer 6 only

One more thing to note here is that you only want this example code triggered in Internet Explorer 6. Not version 7, and definitely not for any web browser provided by another vendor. Some will now cry out:

Web browser detection? That’s foul play, object detection for the masses!

Well, object detection is a great thing, and without a doubt the most suitable approach testing for feature support. However, in cases like this, there’s no proper way to check for lack of CSS support.

Since you also don’t want the JavaScript file included for every user and web browser either, you should address this by only serving it to Internet Explorer 6. The best way I think this can be done is by using conditional comments to filter out the web browser you want:


<!--[if lt IE 7]>
	<script type="text/javascript" src="/js/maxWidthFixForIE6.js"></script>
<![endif]-->

Use JavaScript, if needed

One time or another, we get handled a case where there’s no way to accomplish a certain layout optimally for Internet Explorer 6 without JavaScript. And you know what? That’s just fine, shit happens.

But first, make sure it degrades properly without JavaScript. Second, implement it with JavaScript code instead of CSS expressions, for best performance and reliability.

70 Comments

Leave a Reply to Styling Elements With Glyphs, Sprites and Pseudo-Elements - Internet Business Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.