과거와 현재의 너무 많은 사람들이 작업 한 동적으로 생성 된 사이트가 있고 이제 20,000 줄 이상의 CSS가 포함 된 공유 스타일 시트 모음이 있다고 가정 해 보겠습니다. 전혀 구성되지 않았고 클래스 및 ID 기반 선택자가 있지만 태그 기반 선택기가 너무 많습니다. 그런 다음 컨트롤러를 통해 이러한 스타일을 사용하는 100 개의 템플릿이 있다고 가정합니다.
URL을 가리키면 해당 페이지에 적용 할 수있는 모든 CSS 선택기를 결정하고 파일에 덤프 할 수있는 Firebug와 같이 작동하는 도구가 있습니까? 기본적으로 페이지별로 공유 스타일 시트를 분리하는 방법입니다.
답변:
Firefox 플러그인 인 Dust-Me Selectors를 사용했습니다. CSS 값이 사용되는 여러 페이지에서 결합 된 목록을 유지하므로 사용하기가 매우 쉽고 다용도입니다.
단점은 전체 사이트를 스파이더 링하도록 자동화 할 수 없었기 때문에 결국 내 사이트의 주요 페이지 / 템플릿에서만 사용하게되었습니다. 그럼에도 불구하고 매우 유용합니다.
http://www.sitepoint.com/dustmeselectors/
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
위의 설명과 달리 Dust-Me Selectors 2.2는 Firefox 3.6과 호환됩니다 (방금 설치했습니다).
(파이어 폭스는 아니지만 누군가에게 도움이 될 수 있습니다)
크롬에서 작업하는 경우 다음 확장 프로그램을 사용할 수 있습니다.
CSS 제거 및 결합 ( https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh )
나는 우연히 Uncss - 온라인 - 비공식 서버를 매우 편리를 사용 일회성 테스트하거나 위해! 내가 본 최고의 도구라고 생각합니다.
UnCSS는 스타일 시트에서 사용하지 않는 CSS를 제거하는 도구입니다. 여러 파일에서 작동하며 Javascript 삽입 CSS를 지원합니다. 다음과 같은 방식으로 사용할 수 있습니다.
이 도구를 사용하는 다른 고급 방법 은 Github 페이지 에서 확인할 수 있습니다.
SnappySnippet
SnappySnippet 이라는 크롬의 오픈 소스 애드온 이 있습니다. 크롬에서 이미 사용 가능한 개발자 도구를 확장하는 것보다 훨씬 더 나은 것으로 나타났습니다. 페이지의 한 부분 만 모든 관련 CSS를 추출 할 수도 있습니다. 봐 이 유래 포스트
JavaScript를 사용하는 내 솔루션은 다음과 같습니다.
var css = [];
for (var i=0; i<document.styleSheets.length; i++)
{
var sheet = document.styleSheets[i];
var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
if (rules)
{
css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
for (var j=0; j<rules.length; j++)
{
var rule = rules[j];
if ('cssText' in rule)
css.push(rule.cssText);
else
css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
}
}
}
var cssInline = css.join('\n')+'\n';
마지막으로 cssInline페이지의 모든 강판과 그 내용의 텍스트 목록입니다.
예 :
/* Stylesheet : http://example.com/cache/css/javascript.css */
.javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
.javascript { color: rgb(172, 172, 172); }
.javascript .imp { font-weight: bold; color: red; }
/* Stylesheet : http://example.com/i/main_master.css */
html { }
body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
a { color: rgb(204, 0, 51); text-decoration: none; }
a:hover { color: rgb(153, 153, 153); text-decoration: none; }
.icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
#header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
#super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
#monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
#header a { color: rgb(255, 255, 255); }
#menu_2 { height: 290px; }
/* Stylesheet : [inline styles] */
.hidden { display: none; }
PurifyCSS를 확인하고 CLI 또는 Gulp / Grunt / Webpack을 처리 할 수있는 사용자 를 위해이 항목을 확인하십시오.
클래스가 자바 스크립트에 의해 삽입되는 경우에도 단일 페이지 또는 여러 페이지 또는 전체 프로젝트에서 사용하지 않는 스타일을 제거 할 수 있습니다.
Google을 검색 할 수 있다면 PurifyCSS에 대해 배울 수있는 수많은 리소스가 있습니다.
이 Firefox 확장 프로그램은 Dust-Me Selectors 문제를 해결할 것입니다 . CssCleaner 또는 CssHelper라는 작은 데스크톱 앱도 있지만 링크를 찾을 수 없습니다 ... (오래 전에 비슷한 작업을 위해 내 컴퓨터에 다운로드했습니다)
단일 페이지를 처리하는 경우 내 북마크릿을 사용하여 웹 페이지에서 실제로 사용되는 CSS 만 빠르게 가져올 수도 있습니다.
그게 다야. 이제 정적 페이지를 캡슐화 할 때마다 (예 : 이식 가능하게 만들거나 자체 iframe에서 제공하려는 경우) 북마크를 클릭하기 만하면 현재 페이지에서 사용 된 모든 CSS가 오버레이로 표시됩니다. 오버레이를 닫으려면 그림자를 클릭하십시오.
이 솔루션의 한 가지 좋은 점은 미디어 쿼리도 추출되기 때문에 반응 형 페이지를 지원한다는 것입니다. 보너스로, 미디어 쿼리는 뷰포트 크기 특이성 (예를 들어,으로 분류되어 @media (max-width: 767px)올 것이다 후 @media (max-width: 1023px) ).
필요한 경우 생성 된 CSS를 축소하는 옵션을 추가 할 수도 있습니다. 이 북마크릿은 내 필요에 대해서만 사용했기 때문에 널리 테스트되지 않았으므로 의견에 문제가 있으면 신고하십시오.
참고 :이 북마크릿이 Chrome의 로컬 파일에서 작동 --allow-file-access-from-files하도록하려면 Chrome 바로 가기 대상에 추가하십시오 . 예:
"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
이 도구는 간단한 js 스크립트입니다 https://github.com/shashwatsahai/CSSExtractor/ 이 도구는 활성 스타일에 대한 모든 소스를 나열하는 특정 페이지에서 CSS를 가져오고 소스를 다음과 같이 JSON에 저장하는 데 도움이됩니다. 가치로 키와 규칙. href 링크에서 모든 CSS를로드하고 여기에서 적용된 모든 스타일을 알려줍니다. 출력을 임의의 이름으로 JSON 파일에 저장할 수 있습니다.
흠 .. CSS 파일의 서버 측 구문 분석을 사용하여 다양한 CSS 선택기를 추출하여이 작업에 약간의 무차별 대입을 던진 다음 각각을 브라우저 내에서 jQuery 선택기로 실행합니다. 별로 우아하지는 않지만 작동해야합니까?
2020 년 9 월 현재이 질문은 거의 10 년 전입니다. 제공된 솔루션의 대부분이 더 이상 작동하지 않거나 연결된 프로젝트가 사라졌습니다.
그러나 Google은 이제 페이지 속도를 우선 순위 측정 항목 중 하나로 사용하므로 질문은 여전히 매우 관련이 있습니다.
나열된 모든 링크를 조사한 후 purgecss.com을 찾았 습니다 . Angular, React, Vue 등을 사용하여 최신 웹 앱 / SPA에서 사용되지 않는 CSS를 정리하는 가장 좋은 옵션 인 것 같습니다. PostCSS, Webpack, Grunt 및 Gulp와의 통합도 빌드합니다.
또한 UnCSS는 여전히 유지되는 것 같습니다. PurgeCSS만큼 강력하지만 빌드 프로세스 또는 단일 페이지 자바 스크립트 앱에 통합되지는 않습니다.
http://getcssusedinapage.com 을 사용하여 페이지에 사용 된 CSS를 가져올 수도 있습니다 . 무료이며 빠르며 웹 사이트에 복사하여 붙여 넣을 수있는 최소화 및 최적화 된 CSS 코드와 함께 많은 세부 정보를 제공합니다.