CSS カバレッジ テスト スクリプトを実装するコード

この記事では主に CSS カバレッジ テスト スクリプトを実装するためのコードを紹介します。これには特定の参考値があります。必要な友達はそれを参照してください。ここでは CSS ルールのカバレッジのみを求めますので、querySelectorAll にアクセスしてください。 ).長さは十分です。並べ替えることで、各 CSS の使用状況を確認できます

document.styleSheets は、現在のページ上のすべての CSS ルールのコレクションを保存します。これにより、ページc9ccee2e6ea535a969eb3f532ad9fe89で定義されたすべてのセレクターをトラバースし、selectorText属性にアクセスしてセレクターの一致ルールを取得できます。次に、ルール ルールを document.querySelectorAll に渡して、このルールに一致するページ内の要素のリストを取得します。

ここでは CSS ルールの範囲のみが必要なので、querySelectorAll().length にアクセスするだけです。並べ替えることで、各 CSS の使用状況がわかります。

コードは非常にシンプルです。

var usage = [];
var sheets = document.styleSheets;
for(var i = sheets.length - 1; i != -1; i--) {
    var rules = sheets[i].rules;

    for(var j = rules.length - 1; j != -1; j--) {
        var rule = rules[j];
        var text = rule.selectorText;

        usage.push({name: text, count: document.querySelectorAll(text).length});
    }
}
usage.sort(function(a, b){return a.count - b.count});
for(var i = usage.length - 1; i != -1; i--) {
    console.log("选择器：" + usage[i].name + "\n\t匹配数：" + usage[i].count);
}

F12 を呼び出し、コードをコンソールに貼り付けて Enter を押します。

もちろん、権限の問題により、外部からインポートされた CSS にはアクセスできないため、現時点では考慮しません。 styleSheets をサポートしていない壊れた IE については、expression または behaviour.htc の使用を検討し、別の日に試してください。

純粋な JS 実装は以上です。将来的には、ローカルプログラムと連携して外部CSSの解析を実装していきます。

ところで、テスト結果を投稿してください:

どの CSS が役に立たないのかは明らかです:

もちろん、0 件の CSS が役に立たないという意味ではありません。最も典型的な例は:hover で、これはマウスが上に移動された場合にのみ一致します。 className、[attr=]、#dynamic ID、動的要素によるコントロールもあります。 。 。 。などのスタイルは合わせにくいです。

つまり、上記のコードはあまり意味がありません。現在主流のブラウザにはプロファイル機能が組み込まれており、セレクターによって一致する要素の数をリアルタイムで追跡できるため、IE バージョンを作成するのは理にかなっています:)

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

同じファイルに JS と CSS を記述する方法

CSS プログラミングの OOCSS および SMACSS デザイン パターンの紹介

以上がCSS カバレッジ テスト スクリプトを実装するコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。