20 行の code_javascript スキルで実装された CSS カバレッジテストスクリプト

Document.styleSheets には、現在のページ上のすべての CSS ルールのコレクションが保存されます。これにより、ページ で定義されたすべてのセレクターをトラバースし、selectorText属性にアクセスしてセレクターの一致ルールを取得できます。次に、ルール rules を document.querySelectorAll に渡して、このルールに一致するページ内の要素のリストを取得します。 ここでは CSS ルールの範囲のみを求めているため、querySelectorAll().length にアクセスするだけです。並べ替えることで、各 CSS の使用状況がわかります。 コードは非常に簡単です。

コードをコピー コードは次のとおりです: var use = []; varsheets = 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 rules = rules[j]; var text = rules.selectorText;

use.push({name:テキスト、カウント: document.querySelectorAll(text).length}); } } usage.sort(function(a, b){return a.count - b.count});

for(var i = use.length - 1; i != -1; i--) { console.log("セレクター: " use[i].name "nt 一致する番号: " use [ i].count); }

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

もちろん、権限の問題により、外部からインポートされた CSS にはアクセスできないため、現時点では考慮しません。スタイルシートをサポートしていない壊れた IE については、expression または behaviour.htc の使用を検討し、別の日に試してください。 純粋な JS 実装は以上です。将来的にはローカルプログラムと連携し、外部CSSの解析を実現していきます。

ちなみにテスト結果を載せておきます:

どの CSS が使用されていないのかは明らかです:

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

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

20 行の code_javascript スキルで実装された CSS カバレッジ テスト スクリプト

20 行の code_javascript スキルで実装された CSS カバレッジテストスクリプト