CSS Coverage

CSS Coverage is a set of commands for Firefox Developer tools that help untangle messy CSS by pointing out the CSS that isn't "used", and indicating the parts of your CSS files that are needed for initial rendering.

These tools are somewhat experimental because the definition of "use" is complicated, but it's hoped that this will give a helping hand in working out what is going on.

The way they are used in general is:

• Start the coverage tracker ("csscoverage start")
• Visit a representative set of pages in your website
• Stop the tracker ("csscoverage stop") and view the unused rules in the Style Editor
• View a report ("csscoverage report") that contains the rules that could be in-lined on each page

One other command ("csscoverage oneshot") allows you to effectively run ("csscoverage start; csscoverage stop").

What does "use" mean?

TL;DR:

CSS coverage checks to see if the tag#id.class selector in the example below exists in a set of web pages:

@media thing {
  tag#id.class:hover {
    foo: bar;
  }
}

Why?

Suppose your CSS has the following: If, during the test, your mouse didn't enter the span. Is the rule used?

<style>
  span:hover {
    color: purple;
  }
</style>

<span>Test</span>

Technically span:hover wasn't used in that the word 'Test' wasn't ever colored purple, however CSS coverage is really about seeing what rules are relevant or irrelevant, and span:hover clearly has relevance to the page.

Similarly, suppose your CSS has the following:

<style>
  @media tv {
    span {
      color: purple;
    }
  }
</style>

<span>Test</span>

Should you be required to plug a TV into your environment in order to measure relevance?

But 'use' isn't just about relevance...
Is the following rule relevant?

<style>
  span { }
</style>

<span>Test</span>

It could be argued that it is not relevant because it has no effect on the page and can therefore be safely removed.

However what about the following:

<style>
  span {
    -o-text-curl: minor;
  }
</style>

<span>Test</span>

Knowing if that is ever used or not probably requires the use of a search engine and some analytical skills, and maybe even knowledge of supported browser versions on your site. These are all considered beyond the scope of this tool until the singularity.

This also explains why the div rule is considered "used" in the following example.

<style>
  div { color: red; }
  span { color: blue; }
</style>

<div><span>Test</span></div>

It could be argued that the div rule is unused since it does not affect the final rendering of the page, however consider this alternate definition:

<style>
  div { color: red; border: none; }
  span { color: blue; }
</style>

It's hard to know if the border rule is used, and there are many other variations; consider opacity, visibility and color conversions which further complicate the definition of "use". To keep things simple, "use" means that the selector matches an element.

Clearly if a stylesheet that you touch during a test contains a rule just for a particular page that is not seen during the test, then we'll mark that rule as "unused" despite there being times when it is used. So it's worth double checking before you actually remove rules from CSS files.

Caveats

Things to be aware of:

• We assume that a URL returns the same set of bytes each time it's referenced throughout the period of the test.
• We don't track alternate stylesheets.

Bugs

We're working on a number of important bugs:

• We don't currently track changes to the CSSOM by JavaScript, including adding stylesheets. See bug 1007533.
• Markup in the style editor is made on a per-line basis, and we don't currently process source-maps, so things are going to get confused if you're running this on compressed CSS. See bug 1007073.
• We don't include @keyframe information in the pre-load summary. See bug 1034062.