집 > 기사 > 웹 프론트엔드 > CSS 적용 범위 테스트 스크립트를 구현하는 코드

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

不言원래의: 2018-06-28 11:11:531498검색

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

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

document.styleSheets는 현재 페이지의 모든 CSS 규칙 모음을 저장합니다. 이를 통해 페이지c9ccee2e6ea535a969eb3f532ad9fe89에 정의된 모든 선택기를 탐색하고 selectorText 속성에 액세스하여 선택기의 일치 규칙을 얻을 수 있습니다. 그런 다음 규칙 규칙을 document.querySelectorAll에 전달하여 이 규칙과 일치하는 페이지의 요소 목록을 가져옵니다.
여기서는 CSS 규칙만 적용하기를 원하므로 querySelectorAll().length에 액세스하면 됩니다. 정렬을 통해 각 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 중국어 홈페이지를 참고해주세요!

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

관련 기사