From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/tools/css_coverage/index.html | 149 +++++++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 files/ja/tools/css_coverage/index.html (limited to 'files/ja/tools/css_coverage') diff --git a/files/ja/tools/css_coverage/index.html b/files/ja/tools/css_coverage/index.html new file mode 100644 index 0000000000..cf45c2988e --- /dev/null +++ b/files/ja/tools/css_coverage/index.html @@ -0,0 +1,149 @@ +--- +title: CSSカバレッジ +slug: Tools/CSS_Coverage +tags: + - Experimental + - Firefox + - ガイド + - ツール + - 初心者 +translation_of: Tools/CSS_Coverage +--- +

{{ToolsSidebar}}

+ +
+

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

+
+ +

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

+ +

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

+ +

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

+ + + +

もう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>
+
+ +

技術的には span:hover は、「テスト」という言葉がいつも紫色ではなかったという点で使われていませんでした。しかしながら CSS のカバレッジは実際にルールが関連性があるか無関係かを調べることです。また span:hover は明らかにページとの関連性があります。

+ +

同様に、あなたのCSSが次のものを持っているとします：

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

関連性を測定するには、テレビを自分の環境に接続する必要がありますか？

+ +

しかし、「使用」は関連性だけではありません...
+ 次のルールは適切ですか？

+ +
<style>
+  span { }
+</style>
+
+<span>Test</span>
+
+ +

ページに影響を及ぼさず安全に削除できるため、関連性がないと主張することができます。

+ +

しかし、次のものはどうでしょうか？

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

それが使用されているかどうかを知っているかどうかは、おそらく検索エンジンと分析技術の使用を必要とし、おそらくサイトのサポートされているブラウザのバージョンに関する知識です。 これらはすべて特異点までこのツールの範囲を超えているとみなされます。

+ +

以下の例で div ルールが "used" とみなされる理由についても説明します。

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

div ルールはページの最終的なレンダリングには影響しないので未使用だと主張できますが、この代替定義を検討してください：

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

ボーダールールが使用されているかどうかを知ることは難しく、他にもさまざまなバリエーションがあります。 「使用」の定義をさらに複雑にする不透明度、可視性および色変換を考慮する。 物事を単純にするために、 "use"はセレクタが要素にマッチすることを意味します。

+ +

明らかに、テスト中にタッチしたスタイルシートに、テスト中に見られない特定のページだけのルールが含まれている場合は、そのルールが使用されているにもかかわらず、そのルールを「未使用」としてマークします。 実際にCSSファイルからルールを削除する前に、二重チェックの価値があります。

+ +

警告

+ +

知っておくべきこと：

+ + + +

バグ

+ +

私たちはいくつかの重要なバグに取り組んでいます：

+ + + +

代替候補

+ +

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

+ + -- cgit v1.2.3-54-g00ecf