High Performance Web Sites: Rule 7 – Avoid CSS Expressions (Yahoo! Developer Network Blog)

My Projects
Tools & Services
APIs and Services
- Flickr
- Geo
- Mail
- Search
- Social
- Updates
- YAP
- YQL
Developer Tools
- Hadoop
- YUI
- YSlow
- View all »
Resources
- Blog
- YDN Theater
- Hack U

YDN YDN Blog High Performance Web Sites: Rule 7 – Avoid CSS Expressions

Yahoo! Developer Network Blog

July 16, 2007

High Performance Web Sites: Rule 7 – Avoid CSS Expressions

CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically. They’re supported in Internet Explorer, starting with version 5. As an example, the background color could be set to alternate every hour using CSS expressions.

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

As shown here, the expression method accepts a JavaScript expression. The CSS property is set to the result of evaluating the JavaScript expression. The expression method is ignored by other browsers, so it is useful for setting properties in Internet Explorer needed to create a consistent experience across browsers.

The problem with expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page. Adding a counter to the CSS expression allows us to keep track of when and how often a CSS expression is evaluated. Moving the mouse around the page can easily generate more than 10,000 evaluations.

One way to reduce the number of times your CSS expression is evaluated is to use one-time expressions, where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression. If the style property must be set dynamically throughout the life of the page, using event handlers instead of CSS expressions is an alternative approach. If you must use CSS expressions, remember that they may be evaluated thousands of times and could affect the performance of your page.

Steve Souders

[Steve Souders is Yahoo!'s Chief Performance Yahoo!. This is one in a series of Best Practices for Speeding Up Your Web Site. This article is based on Steve's book High Performance Web Sites, published by O'Reilly.]

Posted at July 16, 2007 7:52 AM | Permalink

Bookmark this on Delicious

Comments

Very interesting, Steve. I've let my coding skills get rusty the last couple of years and finding YUI today, and browsing some of the articles, is a great way to learn what's been going on while I've been lazy! CSS was one of the last things I started learning when I got out of web design altogether (except for my own sites) and I've dabbled but never mastered it.

thanks for all this great info, and I'll be back.

Posted by: Gerry Mooney at July 23, 2007 11:52 AM

what's the point of using non-standard-compliant, vendor-specific code anyway?

Posted by: Jakub Łukomski at August 16, 2007 4:12 AM

What is an example of a one-time CSS expression? Thanks.

Posted by: mitch at October 24, 2007 1:43 PM

@jakub: You use it to work around the ideosyncracies of said vendor's non-standard-compliant browser to make it behave like a good browser should.

@mitch: seconded... how does one create an expression that replaces itself?

Posted by: Roger at November 19, 2007 11:59 AM

Search for "setOnetimeBgcolor" in this example:
http://stevesouders.com/hpws/onetime-expressions.php

-Steve

Posted by: Steve Souders at November 19, 2007 12:45 PM

Actually not all css properties can be set for one time execution. Background-color is such, but background-position is not. You CANNOT play that setOnetimeBgcolor thing with background-position.

Posted by: Marton Sari at October 17, 2008 1:12 PM

Good news is Microsoft is ending expressions in Internet Explorer as announced on Thursday earlier this week. Indeed a very nice move towards the standard-compliant browser.

Posted by: flash tekkie at October 18, 2008 3:28 AM

glad to hear. If IE8 is compliant as it is meant to be, hopefully they will have no use anyway.

Posted by: alex at October 21, 2008 6:39 PM

Yes, But,--

expression() is 2x-faster than event-driven display=...
expression() catches-up to the user: No key-stalling...
expression() ~~thus~~ feels, 10x-faster for the user...
expression() does less-work in successive-approximation;

Just-- attach events to expression() to reduce the load.

I discuss additional advantages of expression() at:

http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=4161942&SiteID=1

Ray.

Posted by: Mr. Raymond Kenneth Petry at December 2, 2008 5:13 PM

I normally pull in a separate stylesheet for internet explorer 6 using expressions. This keeps any fixes separate, and means my primary stylesheets are clear from 'hacks' (all of my styles are in internal stylesheets.

(start ie6 conditional)

@import "css/ie6.css";

(end ie6 conditional)

Does this single conditional cause performance problems?

I would have thought it was better than bloating my primary stylesheet with hacks.

Thanks,
Olly

Posted by: Olly at February 20, 2009 10:14 AM