Just 20 lines of code to write CSS coverage test Script _ Basics

Document.stylesheets holds a collection of all the CSS rules on the current page. It allows you to traverse all selector defined in the page <style>, and access the matching rules for the Selectortext property to the selector. The rule rule is then passed to the Document.queryselectorall to get a list of elements within the page that match this rule.

Here we just ask for the coverage of the CSS rules, so we can access Queryselectorall (). length. You can see each CSS usage by sorting.

The code is simple.

Copy Code code 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 + "\n\t Match number:" + usage[i].count);
}

Exhale the F12, stick the code in the console and enter.

Of course, due to permissions issues, the external import of CSS can not be accessed in any case, for the time being not considered. As for not supporting the stylesheets of the broken ie, you can consider using expression or BEHAVIOUR.HTC, another day to try.

By the way, put a test result: