SnappySnippet

마침내이 도구를 만들 시간이있었습니다. Github에서 SnappySnippet 을 설치할 수 있습니다 . 지정된 (마지막으로 검사 한) DOM 노드에서 HTML + CSS 추출이 용이합니다. 또한 코드를 CodePen 또는 JSFiddle로 바로 보낼 수 있습니다. 즐겨!

다른 특징들

• HTML 정리 (불필요한 속성 제거, 들여 쓰기 수정)
• 읽을 수 있도록 CSS 최적화
• 완전 구성 가능 (모든 필터를 끌 수 있음)
• 와 작품 ::before및 ::after의사 요소
• Bootstrap & Flat-UI 프로젝트 덕분에 멋진 UI

암호

SnappySnippet은 오픈 소스이며 GitHub 에서 코드를 찾을 수 있습니다 .

이행

나는 이것을 만드는 동안 많은 것을 배웠기 때문에 내가 경험 한 문제와 그에 대한 해결책을 공유하기로 결정했습니다. 어쩌면 누군가가 흥미로울 것입니다.

첫 번째 시도-getMatchedCSSRules ()

처음에는 웹 사이트의 CSS 파일에서 나오는 원래 CSS 규칙을 검색하려고했습니다. 놀랍게도 이것은 덕분에 매우 간단 window.getMatchedCSSRules()하지만 잘 작동하지 않았습니다. 문제는 전체 문서의 컨텍스트에서 일치하는 HTML 및 CSS 선택기의 일부만 HTML 스 니펫의 컨텍스트에서 더 이상 일치하지 않는다는 것입니다. 선택자를 파싱하고 수정하는 것은 좋은 생각처럼 보이지 않았 으므로이 시도를 포기했습니다.

두 번째 시도-getComputedStyle ()

그런 다음 @CollectiveCognition에서 제안한 것부터 시작했습니다 getComputedStyle(). 그러나 모든 스타일을 인라인하는 대신 CSS 양식 HTML을 분리하고 싶었습니다.

문제 1-HTML에서 CSS 분리

이 솔루션은 매우 아름답지는 않지만 매우 간단했습니다. 선택한 하위 트리의 모든 노드에 ID를 할당하고 해당 ID를 사용하여 적절한 CSS 규칙을 작성했습니다.

문제 2-기본값으로 속성 제거

노드에 ID를 할당하면 문제가 없지만 CSS 규칙마다 ~ 300 개의 속성이있어 전체 CSS를 읽을 수 없음을 알았습니다. 주어진 요소에 대해 계산 된 가능한 모든 CSS 속성과 값
을 getComputedStyle()반환합니다. 일부는 비어 있고 일부는 브라우저 기본값이 있습니다. 기본값을 제거하려면 먼저 브라우저에서 가져와야했습니다 (각 태그마다 다른 기본값이 있습니다). 해결책은 웹 사이트에서 오는 요소의 스타일을 빈 요소에 삽입 된 동일한 요소와 비교하는 것입니다 <iframe>. 여기서의 논리는 empty에 스타일 시트가 없으므로 거기에 <iframe>추가 한 각 요소에는 기본 브라우저 스타일 만 있습니다. 이렇게하면 중요하지 않은 대부분의 속성을 제거 할 수있었습니다.

문제 3-속기 속성 만 유지

내가 발견 한 다음 것은 속기 동등한 특성을 갖는 불필요하게 인쇄 된 것이 었습니다 (이 있었다 예를 들어, border: solid black 1px다음 border-color: black;, border-width: 1pxITD.).
이 문제를 해결하기 위해 간단히 해당 속성이있는 속성 목록을 만들고 결과에서 필터링했습니다.

문제 4-접두사 속성 제거

각 규칙의 속성의 수는 현저하게 이전 작업 후 낮은했지만 내가 많이했다 문턱 것으로 나타났습니다 -webkit-나는 결코 듣고의했습니다 것을 접두사 속성을 ( -webkit-app-region? -webkit-text-emphasis-position?).
그들 중 일부는 유용한 듯 때문에 나는 (이러한 속성 중 하나를 유지해야 궁금 해서요 -webkit-transform-origin, -webkit-perspective-origin등). 나는 이것을 확인하는 방법을 알지 못했지만이 속성이 대부분 쓰레기라는 것을 알고 있었기 때문에 모두 제거하기로 결정했습니다.

문제 5-동일한 CSS 규칙 결합

내가 발견 한 다음 문제는 동일한 CSS 규칙이 반복해서 반복된다는 것입니다 (예 : <li>정확히 동일한 스타일을 가진 각각에 대해 작성된 CSS 출력에 동일한 규칙이 있음).
이것은 규칙을 서로 비교하고 정확히 동일한 속성 및 값 집합을 가진 규칙을 결합하는 문제였습니다. 그 결과, 대신에 #LI_1{...}, #LI_2{...}내가있어 #LI_1, #LI_2 {...}.

문제 6-HTML 들여 쓰기 정리 및 수정

결과에 만족했기 때문에 HTML로 옮겼습니다. outerHTML속성은 서버에서 반환 된 것과 똑같이 서식을 유지 하기 때문에 혼란스러워 보입니다 .
HTML 코드가 outerHTML필요한 유일한 것은 간단한 코드 재 포맷이었습니다. 모든 IDE에서 사용할 수있는 것이기 때문에 정확히 수행하는 JavaScript 라이브러리가 있다고 확신했습니다. 그리고 그것은 옳았습니다 (jquery-clean) . 무엇보다, 나는 불필요한 속성을 제거 추가 (있어 style, data-ng-repeat등).

문제 7-CSS를 깨는 필터

경우에 따라 위에서 언급 한 필터가 스 니펫에서 CSS를 손상시킬 수 있으므로 모든 필터를 선택 사항으로 설정했습니다. 설정 메뉴 에서 비활성화 할 수 있습니다 .

답변

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

var html = require("divclip").bySel(".article-body");
console.log(html);

.menu {
    margin: 0;
}
.menu li {
    list-style: none;
}