You can write a CSS coverage test script with just 20 lines of code

Document.styleSheets stores a collection of all CSS rules on the current page. Through it, you can traverse all selectors defined in the page , and access the selectorText attribute to get the matching rules of the selector. Then pass the rule rule to document.querySelectorAll to get a list of elements in the page that match this rule.

Here we only want the coverage of CSS rules, so just access querySelectorAll().length. By sorting, you can see the usage of each CSS.

The code is very simple.

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); }

Exhale 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.

By the way, post the test results:

You can write a CSS coverage test script with just 20 lines of code_Basic knowledge