A CSS coverage test script implemented in 20 lines of code_javascript skills

Document.styleSheets stores a collection of all CSS rules on the current page. Through it, you can traverse all selectors defined in the page

Copy code The code is as follows:

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("Selector: " usage[i].name "nt matching number: " usage [i].count);
}

Call out F12, paste the code into the console and press Enter.

Of course, due to permission issues, externally imported CSS cannot be accessed anyway, so we won’t consider it for now. As for broken IE that does not support styleSheets, you can consider using expression or behavior.htc and try it another day.
That’s it for the pure JS implementation. In the future, we will cooperate with local programs to implement analysis of external CSS.

By the way, I’ll post the test results:

It’s clear which CSS is not used:

Of course, 0 matches does not mean it is useless. The most typical example is:hover, which will match only when the mouse is moved up. There are also controls through className, [attr=], #dynamic ID, dynamic elements. . . . The styles of etc. are not easy to match.

So the above code does not make much sense, and currently mainstream browsers have built-in Profiles function and can track the number of elements matched by the selector in real time, so it makes sense to make an IE version :)