« AJAX and PHP Action At OSCON | Main | How we built the Yahoo! Music Videos Facebook app »
July 16, 2007
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
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
Comment Policy: We encourage comments and look forward to hearing from you. Please note that Yahoo! may, in our sole discretion, remove comments if they are off topic, inappropriate, or otherwise violate our Terms of Service.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings