# Minify CSS (rewrite_css)

Minifies CSS, rewrites embedded URLs. How the mod_pagespeed rewrite_css filter works, when to use it, its risks and the Apache, nginx and IIS directives.

Canonical URL: https://modpagespeed.com/docs/filters/rewrite_css/

- Category: CSS
- CoreFilters: Yes
- OptimizeForBandwidth: Yes
- Risk: Generally safe

`rewrite_css` parses each stylesheet, minifies it, and rewrites the `url()` references inside it so images and fonts go through mod_pagespeed's optimization and cache-extension pipeline. The result is served from a rewritten `.pagespeed.cf.` URL with a long cache lifetime; the original file on disk is never touched. In OptimizeForBandwidth mode the minified bytes replace the original response in place and the URL stays as authored.

## How it works

Live demo: [rewrite_css](https://modpagespeed.com/examples/rewrite_css/).

### When it helps and when it does not

Minification helps most on hand-maintained CSS with comments and generous formatting, and the URL rewriting helps wherever stylesheet-referenced images are not already optimized. A build pipeline that already minifies and fingerprints its CSS leaves the filter little to do; running it anyway only adds a rewrite step. Because the parser declines a stylesheet it cannot fully parse rather than guessing, heavily hack-laden legacy CSS may pass through unminified — the companion `fallback_rewrite_css_urls` still rewrites the URLs inside such files.

### How it decides

The filter runs a real CSS parser over the file. On a parse failure it produces no minified output and leaves minification to no one: only URL rewriting can still happen, through `fallback_rewrite_css_urls`. Values are shortened only where the equivalence is exact, such as `0px` to `0` and `#ffffff` to `#fff`. The stylesheet must sit on a domain the module is authorized to fetch, and the rewritten URL embeds a content hash so a changed file is picked up without a purge.

## When to use it

- In CoreFilters, the default RewriteLevel: it runs unless you disable it.
- Part of OptimizeForBandwidth, the level that optimizes resources without changing their URLs.
- Risk rating on these docs: **Generally safe**.

## Risks

- A stylesheet that relies on parser-error recovery (old browser hacks) can be declined or rewritten differently than a browser would interpret it; test such files before rolling out.

- Verify with the `X-Mod-Pagespeed` response header and a `?PageSpeedFilters=-rewrite_css` comparison; [Is it working?](https://modpagespeed.com/docs/is-it-working/) has the steps.

## Configuration

Enable it in the module configuration, at server, virtual-host or location scope:

**Apache**

```apache
ModPagespeedEnableFilters rewrite_css
```

**nginx**

```nginx
pagespeed EnableFilters rewrite_css;
```

**IIS (pagespeed.config)**

```text
pagespeed EnableFilters rewrite_css
```

It is on by default under CoreFilters; to turn it off:

```text
ModPagespeedDisableFilters rewrite_css   # Apache
pagespeed DisableFilters rewrite_css;   # nginx
pagespeed DisableFilters rewrite_css   # IIS
```

```text
/* before */
/* Site header, see ticket 412 */
.header {
  margin: 0px 0px 16px 0px;
  background: #ffffff url(/img/banner.png) no-repeat;
}

/* after */
.header{margin:0 0 16px 0;background:#fff url(/img/banner.png.pagespeed.ce.HASH.png) no-repeat}
```

### On the worker

The worker runs its own pipeline, configured by flags. Its equivalent of this filter is the [css minification](https://modpagespeed.com/docs/worker-configuration/#css-minification) transform. Always-on under `pagespeed on;`; use `--disable-css` to skip CSS rewriting entirely.

Scoping, `ForbidFilters` and the thresholds filters read: [Choosing filters](https://modpagespeed.com/docs/filter-selection/).

## Live example

See the before and after, with the source diff: [rewrite_css example](https://modpagespeed.com/examples/rewrite_css/).

## Frequently asked questions

**What does the rewrite_css filter do?**

`rewrite_css` parses each stylesheet, minifies it, and rewrites the `url()` references inside it so images and fonts go through mod_pagespeed's optimization and cache-extension pipeline. The result is served from a rewritten `.pagespeed.cf.` URL with a long cache lifetime; the original file on disk is never touched. In OptimizeForBandwidth mode the minified bytes replace the original response in place and the URL stays as authored.

**Is rewrite_css enabled by default?**

Yes. `rewrite_css` is in CoreFilters, the default RewriteLevel, so it runs unless you turn it off with `DisableFilters`. It is also part of the OptimizeForBandwidth level.

**How do I turn off rewrite_css?**

Add `ModPagespeedDisableFilters rewrite_css` on Apache or `pagespeed DisableFilters rewrite_css;` on nginx. On IIS, add `pagespeed DisableFilters rewrite_css` to pagespeed.config.

## Related filters

- [`combine_css`](https://modpagespeed.com/docs/filters/combine_css/): Combine CSS
- [`inline_css`](https://modpagespeed.com/docs/filters/inline_css/): Inline CSS
- [`prioritize_critical_css`](https://modpagespeed.com/docs/filters/prioritize_critical_css/): Prioritize critical CSS
- [`compute_critical_css`](https://modpagespeed.com/docs/filters/compute_critical_css/): Compute critical CSS
- [`extend_cache_css`](https://modpagespeed.com/docs/filters/extend_cache_css/): Extend cache for CSS
- [`fallback_rewrite_css_urls`](https://modpagespeed.com/docs/filters/fallback_rewrite_css_urls/): Fallback CSS URL rewriting
- [`flatten_css_imports`](https://modpagespeed.com/docs/filters/flatten_css_imports/): Flatten CSS @imports
- [`inline_google_font_css`](https://modpagespeed.com/docs/filters/inline_google_font_css/): Inline Google Fonts CSS

This page is drawn from the [rewrite_css entry on CSS filters](https://modpagespeed.com/docs/css-filters/#rewrite_css). Every filter in one table: [PageSpeed filters](https://modpagespeed.com/docs/filters/).