Code to implement the CSS coverage test script

This article mainly introduces the implementation of the CSS coverage test script code, has a certain reference value, now share to everyone, the need for friends can refer to

Here we only ask for the coverage of the CSS rules, so access Queryselectorall (). length. The various CSS usage can be seen by sorting

Document.stylesheets holds a collection of all CSS rules on the current page. It is possible to iterate through all the selector defined in page <style> and access the Selectortext property to get the matching rules of the selector. The rule rules are then passed to Document.queryselectorall to get a list of elements within the page that match this rule.
Here we only ask for the coverage of the CSS rules, so access Queryselectorall (). length. By sorting, you can see each CSS usage.
The code is 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 ("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 in any case can not be accessed, temporarily without consideration. As for the stylesheets not support the broken IE, you can consider using expression or BEHAVIOUR.HTC, another day to try.
The pure JS implementation is here. In the future with the local program to implement external CSS analysis.

By the way, put a test result:

What CSS doesn't work at a glance:

Of course, a 0 match does not mean it is useless. The most typical example is: hover, only the mouse is moved up to match. There are also classname controls, [attr=], #动态ID, dynamic elements .... And so on and so on the style is not easy to match to.

So the above code meaning is not big, and the current mainstream browser has built-in profiles function, and real-time tracking selector matching the number of elements, so do a version of IE has some meaning:)

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!