この翻訳は不完全です。英語から この記事を翻訳 してください。

この機能は実験的なもので、Firefoxではまだ利用できません。

CSSカバレッジは、Firefox開発者向けのコマンドセットで、使い古されていないCSSを指摘し、初期レンダリングに必要なCSSファイルの部分を示すことで、乱雑なCSSを解くのに役立ちます。

これらのツールは、「使用」の定義が複雑であるため、多少実験的ですが、実際に何が起こっているかを理解する手助けとなることが期待されます。

それらが一般的に使用される方法は次のとおりです。

  • カバレッジトラッカーを開始("csscoverage start")する
  • あなたのウェブサイトの代表的なページにアクセスする
  • トラッカーを停止("csscoverage stop")し、スタイルエディタで未使用のルールを表示する
  • 各ページに表示されるルールを含むレポートを表示("csscoverage report")する

もう1つのコマンド("csscoverage oneshot")では、効果的に実行("csscoverage start; csscoverage stop")できます。

「使用」が意味するのは?

TL;DR:

CSSカバレッジは、以下の例のtag#id.classセレクタが一連のWebページに存在するかどうかを確認します。

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

なぜ?

あなたのCSSに次のものが設定されているとします。テスト中にマウスがスパンに入っていない場合。 ルールは使用されるでしょうか?

<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.

警告

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.

バグ

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.

代替候補

Firefoxを使わずに未使用のCSSを見つけるのに役立つ複数のツールがあります。

  • Unused CSS recursively crawls your site to detect unused CSS selectors. A free online tool with no ads
  • PurifyCSS an NPM package that you can use as a console tool after the installation
  • unused-css.com another online tool. This one is not free

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto
最終更新者: silverskyvicto,