PageSpeed: Avoid CSS expressions (deprecated)


CSS expressions degrade rendering performance; replacing them with alternatives will improve browser rendering for IE users.

Note: This rule was removed in Page Speed 1.8 since CSS expressions are no longer supported in any modern browsers (IE8 in standards mode or higher).

How does your site score on this recommendation?

Details from Google

Internet Explorer 5 introduced CSS expressions, or "dynamic properties", as a means of dynamically changing document properties in response to various events. They consist of JavaScript expressions embedded as the values of CSS properties in CSS declarations. For the most part, they are used for the following purposes:

  • To emulate standard CSS properties supported by other browsers but not yet implemented by IE.
  • To provide dynamic styling and advanced event handling in a more compact and convenient way than writing full-blown JavaScript-injected styles.

Unfortunately, the performance penalty imposed by CSS expressions is considerable, as the browser reevaluates each expression whenever any event is triggered, such as a window resize, a mouse movement and so on. The poor performance of CSS expressions is one of the reasons they are now deprecated in IE 8. If you have used CSS expressions in your pages, you should make every effort to remove them and use other methods to achieve the same functionality.



PageSpeed recommends:

Use standard CSS properties if possible.

IE 8 is fully CSS-standards-compliant; it supports CSS expressions only if run in "compatibility" mode, but it does not support them in "standards" mode. If you do not need to maintain backwards compatibility with older versions of IE, you should convert any instances of expressions used in place of standard CSS properties to their CSS standard counterparts. For a complete list of CSS properties and IE versions that support them, see the MSDN CSS Attributes Index. If you do need to support older versions of IE in which the desired CSS properties are not available, use JavaScript to achieve the equivalent functionality.

Use JavaScript to script styles.

If you are using CSS expressions for dynamic styling, it makes sense to rewrite them as pure JavaScript to both improve performance in IE and get the benefit of supporting the same functionality in other browsers at the same time.

Click "Read more" to view an example.

Read More

Related YSlow Recommendations