특정 페이지에서 사용 된 CSS 만 추출
과거와 현재의 너무 많은 사람들이 작업 한 동적 생성 사이트가 있고 이제 20,000 줄 이상의 CSS가 포함 된 공유 스타일 시트 모음이 있다고 가정 해 보겠습니다. 전혀 구성되지 않았고 클래스 및 ID 기반 선택자가 있지만 태그 기반 선택기가 너무 많습니다. 그런 다음 컨트롤러를 통해 이러한 스타일을 사용하는 100 개의 템플릿이 있다고 가정합니다.
URL을 가리키면 해당 페이지에 적용 할 수있는 모든 CSS 선택기를 결정하고 파일에 덤프 할 수있는 Firebug와 같이 작동하는 도구가 있습니까? 기본적으로 페이지별로 공유 스타일 시트를 분리하는 방법입니다.
Firefox 플러그인 인 Dust-Me 선택기를 사용했습니다. 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 만 가져 와서 원하는 작업을 정확히 수행하고 클립 보드에 간단히 복사하여 붙여 넣을 수있는 가장 좋은 방법은이 Chrome 확장 CSS 사용
예쁜 그림 예
유망 해 보입니다.
(Firefox는 아니지만 누군가에게 도움이 될 수 있습니다)
크롬에서 작업하는 경우 다음 확장 프로그램을 사용할 수 있습니다.
CSS 제거 및 결합 ( https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh )
- 사용 된 모든 스타일과 결합 된 CSS를 다운로드 할 수 있습니다.
- 팝업 창에 사용하지 않는 스타일을 표시합니다.
- 생성 된 스타일 포함
나는 우연히 Uncss - 온라인 - 비공식 서버를 매우 편리를 사용 일회성 테스트하거나 위해! 내가 만난 최고의 도구라고 생각합니다.
UnCSS는 스타일 시트에서 사용하지 않는 CSS를 제거하는 도구입니다. 여러 파일에서 작동하며 Javascript 삽입 CSS를 지원합니다. 다음과 같이 사용할 수 있습니다.
- 제공된 상자에 HTML 및 CSS를 복사하여 붙여 넣습니다.
- 클릭 버튼
- 마법이 일어날 때까지 기다리세요
- 사용하지 않는 CSS는 사라졌습니다. 나머지는 그대로 사용하세요!
이 도구를 사용하는 다른 고급 방법 은 Github 페이지 에서 확인할 수 있습니다.
SnappySnippet
SnappySnippet 이라는 크롬의 오픈 소스 애드온 이 있습니다. 크롬에서 이미 사용 가능한 개발자 도구를 확장하는 것보다 훨씬 더 나은 것으로 나타났습니다. 페이지의 한 부분 만 모든 관련 CSS를 추출 할 수도 있습니다. 봐 이 유래 포스트
- uncss : 사용하지 않는 CSS 찾기-cli 도구, phantomjs 사용 및 페이지에서 JS 실행, URL에서 사용할 수 있음
- grunt-uncss- 정적 파일에서만 작동
- ( critical css- 브라우저 창에 표시되는 요소에 대한 CSS 추출)
이 Firefox 확장 프로그램은 Dust-Me Selectors 문제를 해결할 것입니다 . CssCleaner 또는 CssHelper라는 작은 데스크탑 앱도 있지만 링크를 찾을 수 없었습니다 ... (오래 전에 비슷한 작업을 위해 다운로드 한 내 컴퓨터에 있습니다)
단일 페이지를 처리하는 경우 내 북마크릿을 사용하여 웹 페이지에서 실제로 사용되는 CSS 만 빠르게 가져올 수도 있습니다.
- 여기로 이동 하십시오 (이 링크가 끊어진 경우 pastebin 에서 가져올 수도 있습니다 ).
- "Bookmarklet 다운로드"아래에있는 큰 버튼을 북마크 도구 모음으로 드래그합니다.
그게 다야. 이제 정적 페이지를 캡슐화 할 때마다 (예 : 이식 가능하게 만들거나 자체 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
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에 대해 배울 수있는 수많은 리소스가 있습니다.
이 도구는 간단한 js 스크립트입니다 https://github.com/shashwatsahai/CSSExtractor/ 이 도구는 활성 스타일에 대한 모든 소스를 나열하는 특정 페이지에서 CSS를 가져오고 소스를 다음과 같이 JSON에 저장하는 데 도움이됩니다. 가치로서의 열쇠와 규칙. href 링크에서 모든 CSS를로드하고 여기에서 적용된 모든 스타일을 알려줍니다. 출력을 임의의 이름으로 JSON 파일에 저장할 수 있습니다.
흠 .. CSS 파일의 서버 측 구문 분석을 사용하여 다양한 CSS 선택기를 추출하여이 작업에 약간의 무차별 대입을 던진 다음 각각을 브라우저 내에서 jQuery 선택기로 실행합니다. 별로 우아하지는 않지만 작동해야합니까?
참고 URL : https://stackoverflow.com/questions/4867005/extracting-only-the-css-used-in-a-specific-page
'program story' 카테고리의 다른 글
| git 후크에서 현재 작업 디렉토리가 git 저장소 내에 있음을 보장합니까? (0) | 2020.11.02 |
|---|---|
| Microsoft.Net.Compilers의 목적은 무엇입니까? (0) | 2020.11.02 |
| 전화 번호 [libphonenumber]에서 코드 국가 추출 (0) | 2020.11.02 |
| TypeScript의 개인 "함수" (0) | 2020.11.02 |
| Node.js 스트림 vs. Observable (0) | 2020.11.02 |