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 page

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!