"Fossies" - the Fresh Open Source Software Archive

Member "incubator-pagespeed-mod-1.14.36.1/html/doc/filter-rewrite-style-attributes.html" (28 Feb 2020, 4535 Bytes) of package /linux/www/apache_httpd_modules/incubator-pagespeed-mod-1.14.36.1.tar.gz:


Caution: In this restricted "Fossies" environment the current HTML page may not be correctly presentated and may have some non-functional links. You can here alternatively try to browse the pure source code or just view or download the uninterpreted raw source code. If the rendering is insufficient you may try to find and view the page on the incubator-pagespeed-mod-1.14.36.1.tar.gz project site itself.

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.