과거와 현재의 너무 많은 사람들이 작업 한 동적으로 생성 된 사이트가 있고 이제 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 )
- 사용 된 모든 스타일과 결합 된 CSS를 다운로드 할 수 있습니다.
- 팝업 창에 사용하지 않는 스타일을 표시합니다.
- 생성 된 스타일 포함
답변
나는 우연히 Uncss – 온라인 – 비공식 서버를 매우 편리를 사용 일회성 테스트하거나 위해! 내가 본 최고의 도구라고 생각합니다.
UnCSS는 스타일 시트에서 사용하지 않는 CSS를 제거하는 도구입니다. 여러 파일에서 작동하며 Javascript 삽입 CSS를 지원합니다. 다음과 같은 방식으로 사용할 수 있습니다.
- 제공된 상자에 HTML 및 CSS를 복사하여 붙여 넣습니다.
- 클릭 버튼
- 마법이 일어날 때까지 기다리세요
- 사용하지 않는 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; }
