CSS 적용 범위 테스트 스크립트를 구현하는 코드

이 글은 CSS Coverage 테스트 스크립트를 구현하기 위한 코드를 주로 소개합니다. 이제 모든 사람과 공유합니다. 필요한 친구들이 참고할 수 있습니다.

여기서는 CSS 규칙의 Coverage만 검색하므로 querySelectorAll을 방문하세요. ).길이면 충분합니다. 정렬하면 각 CSS의 사용법을 확인할 수 있습니다.

document.styleSheets는 현재 페이지의 모든 CSS 규칙 모음을 저장합니다. 이를 통해 페이지

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

F12를 호출하고 코드를 콘솔에 붙여넣은 다음 Enter를 누르세요.

물론 권한 문제로 인해 외부에서 가져온 CSS에는 접근할 수 없으므로 지금은 고려하지 않겠습니다. styleSheets를 지원하지 않는 손상된 IE의 경우 Expression 또는 Behavior.htc 사용을 고려하고 나중에 시도해 볼 수 있습니다.
순수한 JS 구현은 여기까지입니다. 앞으로 우리는 외부 CSS 분석을 실현하기 위해 현지 프로그램과 협력할 것입니다.

그런데 테스트 결과를 게시하세요:

어떤 CSS가 쓸모 없는지는 분명합니다:

물론 일치하는 항목이 0개라고 해서 쓸모 없다는 의미는 아닙니다. 가장 일반적인 예는 hover입니다. 이는 마우스를 위로 움직일 때만 일치합니다. className, [attr=], #dynamic ID, 동적 요소를 통한 컨트롤도 있습니다. . . . 등의 스타일이 일치하기 쉽지 않습니다.

그래서 위의 코드는 별로 의미가 없고 현재 주류 브라우저에는 프로필 기능이 내장되어 있으며 선택기와 일치하는 요소 수를 실시간으로 추적할 수 있으므로 IE 버전을 만드는 것이 합리적입니다 :)

이상이 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!

관련 추천:

JS와 CSS를 같은 파일에 작성하는 방법

CSS 프로그래밍의 OOCSS 및 SMACSS 디자인 패턴 소개

위 내용은 CSS 적용 범위 테스트 스크립트를 구현하는 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!