20줄의 code_javascript 기술로 구현된 CSS 커버리지 테스트 스크립트

Document.styleSheets는 현재 페이지의 모든 CSS 규칙 모음을 저장합니다. 이를 통해 페이지 에 정의된 모든 선택기를 탐색하고 selectorText 속성에 액세스하여 선택기의 일치 규칙을 얻을 수 있습니다. 그런 다음 규칙 규칙을 document.querySelectorAll에 전달하여 이 규칙과 일치하는 페이지의 요소 목록을 가져옵니다. 여기서는 CSS 규칙의 적용 범위만 추구하므로 querySelectorAll().length에 액세스하면 됩니다. 정렬을 통해 각 CSS의 사용법을 확인할 수 있습니다. 코드는 매우 간단합니다.

코드 복사 코드는 다음과 같습니다. var Usage = []; var sheet = document.styleSheets; for(var i = sheet.length - 1; i != -1; i--) { var rule = sheet[i].rules;

for(var j = 규칙 .length - 1; j != -1; j--) { var rule = rule[j]; var text = rule.selectorText;

Usage.push({이름: 텍스트, 개수: document.querySelectorAll(text).length}); } } usage.sort(function(a, b){return a.count - b.count});

for(var i = 사용법.길이 - 1; i != -1; i--) { console.log("선택기: " 사용법[i].name "일치하는 숫자 없음: " 사용법 [ i].count); }

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

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

그런데 테스트 결과를 게시하겠습니다:

어떤 CSS가 사용되지 않는지는 분명합니다.

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

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