프로젝트의 여러 CSS 파일에서 사용되지 않는 CSS 정의를 식별하는 방법
CSS 파일이 많이 들어와서 지금은 좀 정리하려고 합니다.
전체 프로젝트에서 사용되지 않는 CSS 정의를 효율적으로 식별하려면 어떻게 해야 합니까?
Chrome Developer Tools에는 사용하지 않는 CSS 셀렉터를 보여줄 수 있는 Audits 탭이 있습니다.
감사를 실행한 다음 웹 페이지 성능 아래에서 사용되지 않는 CSS 규칙 제거를 참조하십시오.
방금 이 사이트를 찾았습니다. http://unused-css.com/
좋아 보이지만 출력된 '깨끗한' CSS를 내 사이트에 업로드하기 전에 철저히 확인해야 할 것입니다.
또한 이 모든 도구들과 마찬가지로 나는 그것이 id와 스타일이 없는 클래스를 제거한 것이 아니라 자바스크립트 셀렉터로 사용되는지 확인해야 할 것입니다.
아래 내용은 http://unused-css.com/ 에서 가져온 것이므로 다른 솔루션을 추천해 주신 분들께 감사드립니다.
Latish Sehgal은 사용하지 않는 CSS 클래스를 찾아서 제거하는 윈도우 어플리케이션을 작성했습니다.테스트를 해보지는 않았지만 설명을 보니 html 파일과 CSS 파일 하나의 경로를 제공해주셔야 합니다.그러면 프로그램은 사용되지 않은 CSS 셀렉터를 나열합니다.스크린샷을 보니 이 목록을 내보내거나 새로운 클린 CSS 파일을 다운로드할 방법이 없어 보입니다.또한 CSS 파일 하나로 서비스가 제한되어 있는 것 같습니다.정리하려는 파일이 여러 개일 경우 일일이 정리해야 합니다.
Dust-Me Selectors는 사용되지 않는 CSS Selector를 찾는 Firefox 확장(v1.5 이상용)입니다.현재 보고 있는 페이지의 모든 스타일시트에서 모든 선택기를 추출한 다음 해당 페이지를 분석하여 사용되지 않는 선택기를 확인합니다.그런 다음 데이터가 저장되어 후속 페이지를 테스트할 때 셀렉터를 목록에서 삭제할 수 있습니다.이 도구는 전체 웹사이트를 탐색할 수 있어야 하지만 안타깝게도 작동할 수 있습니다.또한 스타일을 제거한 CSS 파일을 구성하고 다운로드 할 수 없다고 생각합니다.
Topstyle은 CSS를 편집하기 위한 많은 도구들을 포함하는 윈도우 어플리케이션입니다.테스트를 많이 해보지는 않았지만 사용하지 않는 CSS 셀렉터를 제거할 수 있는 기능이 있는 것 같습니다.이 소프트웨어의 가격은 80달러입니다.
Liquidcity CSS cleaner는 정규 표현을 사용하여 한 페이지의 스타일을 확인하는 php 스크립트입니다.HTML 코드로 사용할 수 없는 클래스를 알려드리겠습니다.저는 이 솔루션을 테스트해 본 적이 없습니다.
데드웨이트는 CSS 커버리지 툴입니다.스타일시트 집합과 URL 집합이 주어지면 실제로 사용되는 선택기를 결정하고 "안전하게" 삭제할 수 있는 목록을 나열합니다.이 도구는 루비 모듈이며 레일 웹 사이트에서만 작동합니다.사용하지 않은 셀렉터는 CSS 파일에서 수동으로 제거해야 합니다.
헬륨 CSS는 웹사이트의 많은 페이지에서 사용되지 않는 CSS를 발견하기 위한 자바스크립트 도구입니다.먼저 테스트할 페이지에 javascript 파일을 설치해야 합니다.그런 다음 헬륨 기능을 호출해서 청소를 시작해야 합니다.
UnusedCSS.com 은 사용하기 쉬운 인터페이스를 가진 웹 애플리케이션입니다.사이트의 url을 입력하면 CSS 셀렉터 목록이 나타납니다.각 셀렉터에 대해 숫자는 셀렉터가 사용된 횟수를 나타냅니다.이 서비스는 몇 가지 제한 사항이 있습니다.@import 문은 지원되지 않습니다.당신은 새로운 클린 CSS 파일을 구성하고 다운로드 할 수 없습니다.
CSSESS는 사용하지 않는 CSS 셀렉터를 어느 사이트에서나 찾을 수 있도록 도와주는 북마크렛입니다.이 도구는 사용하기 쉽지만 깨끗한 CSS 파일을 구성하고 다운로드할 수 없습니다.사용하지 않는 CSS 파일만 나열합니다.
Google Chrome Developer Tools에는 사용하지 않는 CSS 규칙을 찾을 수 있는 CSS Overview(현재 실험 중인) 기능이 있습니다.
이를 활성화하려면 다음 단계를 따릅니다.
- 개발 도구 열기(Mac에서 명령+옵션+I, 제어+Windows에서 Shift+I)
- DevTool 설정(Mac의 경우 Function+F1, Windows의 경우 F1)으로 이동
- Experiments(실험) 섹션 열기를 클릭합니다.
- CSS Overview(CSS 개요) 옵션 사용
언급URL : https://stackoverflow.com/questions/135657/how-to-identify-unused-css-definitions-from-multiple-css-files-in-a-project
'programing' 카테고리의 다른 글
| Chrome CSS 3 전환 매끄럽지 않음 (0) | 2023.10.28 |
|---|---|
| 무료 Xml Diff/Merge 도구가 있습니까? (0) | 2023.10.28 |
| 요소를 사용합니다.AddClass를 사용하여 'Class' 역할을 하도록 제한된 각도 js 지시문을 추가합니다. (0) | 2023.10.28 |
| 자바 결과 집합을 JSON으로 변환하는 방법은? (0) | 2023.10.28 |
| Spring Data Rest를 사용할 때 @Repository를 구성 요소 검색에서 제외하는 방법 (0) | 2023.10.28 |