Rewrite Style Attributes

Configuration

The 'Rewrite Style Attributes' filter is enabled by specifying either:

Apache:

ModPagespeedEnableFilters rewrite_style_attributes,rewrite_css

Nginx:

pagespeed EnableFilters rewrite_style_attributes,rewrite_css;

or

Apache:

ModPagespeedEnableFilters rewrite_style_attributes_with_url,rewrite_css,rewrite_images

Nginx:

pagespeed EnableFilters rewrite_style_attributes_with_url,rewrite_css,rewrite_images;

in the configuration file. If both are enabled, rewrite_style_sttributes takes precedence.

Description

The "Rewrite Style Attributes" filter rewrites CSS inside elements' style attribute. It requires rewrite_css to also be enabled. See the settings for rewrite_css to control CSS minification, image rewriting, image recompression, and cache extension.

rewrite_style_attributes enables the filter for all style attributes. rewrite_style_attributes_with_url enables it only for style attributes that contain the text 'url(', for which you will generally want to enable one or more image optimization filters.

rewrite_style_attributes_with_url is more efficient because it does not always parse the CSS, but it will not optimize CSS that doesn't reference any URLs. rewrite_style_attributes will always parse the CSS and optimize everything possible. Because images are generally the source for greatest improvement and are enclosed in url(), rewrite_style_attributes_with_url is a good balance for most uses, while rewrite_style_attributes is available for more aggressive optimization.

Operation

This filter inspects the style attributes of all tags other than <style> (since they cannot have a style attribute) and rewrites them according to the configured rewrite_css filter, which can include CSS minification, image rewriting, image recompression, and cache extension.

As explained above, if rewrite_style_attributes_with_url is enabled the style attribute's contents are first scanned to ensure that they contain the text url( and are processed only if so.

For example, if a <div> tag looks like this:

<div style="background-image: url('images/Puzzle.jpg');"/>

Then, if the image is optimizable, PageSpeed will convert it to something like:

<div style="background-image:url('images/Puzzle.jpg.pagespeed.ic.7X5cYtoCx-.jpg');"/>

Example

You can see the filter in action at www.modpagespeed.com on this example.

Risks

This filter is considered minimal risk. rewrite_style_attributes_with_url is a core filter but rewrite_style_attributes is not.