Code to implement CSS coverage test script

This article mainly introduces the code for implementing CSS coverage test scripts. It has certain reference value. Now I share it with you. Friends in need can refer to it.

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

document.styleSheets stores a collection of all CSS rules on the current page. Through it, you can traverse all selectors defined in the pagec9ccee2e6ea535a969eb3f532ad9fe89, 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 seek 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.

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

Call 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 the 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, post the test results:

It is clear at a glance 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:)

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to write JS and CSS in the same file

About CSS programming Introduction to OOCSS and SMACSS design patterns

The above is the detailed content of Code to implement CSS coverage test script. For more information, please follow other related articles on the PHP Chinese website!