특정 DOM 요소에 대한 HTML CSS JS를 추출하는 방법:

웹 개발자와 마찬가지로 마크업 분석을 위해 웹사이트 소스 코드를 검사하는 것은 통찰력이 있을 수 있습니다. 그러나 로컬 평가를 위해 특정 섹션을 추출하는 경우 이 프로세스가 지루해질 수 있습니다. 개별 요소와 관련 CSS를 복사하는 것은 번거로울 수 있으며, 관련 없는 코드를 삭제하기 위해 전체 소스를 저장하는 것은 비효율적입니다.

SnappySnippet: 실용적인 솔루션

저는 SnappySnippet을 개발했습니다. 이 문제를 해결하세요. GitHub에서 사용할 수 있는 이 오픈 소스 도구를 사용하면 마지막으로 검사한 DOM 노드에서 HTML CSS 코드를 쉽게 추출할 수 있습니다. 또한 CodePen 또는 JSFiddle과 직접 코드를 공유하기 위한 옵션도 제공합니다.

SnappySnippet 기능:

• HTML 정리: 불필요한 속성을 제거하고 들여쓰기가 향상됩니다.
• CSS 최적화: 가독성이 향상됩니다. 코드 구조를 간소화합니다.
• 완전 구성 가능: 사용자는 필요에 따라 다양한 필터를 비활성화하거나 활성화할 수 있습니다.
• 의사 요소 지원: ::before 및 ::after 의사 요소가 지원됩니다.
• 사용자 친화적인 인터페이스: 내장 직관적인 사용자 경험을 위한 Bootstrap 및 Flat-UI.

구현 과제 및 솔루션:

SnappySnippet을 만드는 데는 몇 가지 과제가 있었습니다. 이를 극복한 방법은 다음과 같습니다.

일치하는 CSS 규칙 가져오기:

처음에는 CSS 파일에서 원본 CSS 규칙을 검색하려고 시도했습니다. 그러나 이 접근 방식으로 인해 선택기가 일관되지 않아 HTML 조각의 컨텍스트에서 코드 추출이 효과적이지 않게 되었습니다.

getCompulatedStyle() 사용:

저는 getCompulatedStyle()로 초점을 옮겼습니다. , 그러나 원하는 CSS 분리는 여전히 파악하기 어렵습니다.

문제 1: CSS를 다음과 분리 HTML

CSS를 HTML에서 분리하기 위해 선택한 노드에 고유 ID를 할당하고 이를 대상 CSS 규칙 생성에 사용했습니다.

문제 2: 기본값 제거

getCompulatedStyle()은 빈 값과 브라우저 기본값을 포함하여 요소에 대한 모든 CSS 속성과 값을 반환합니다. 기본 스타일을 추출하고 HTML 코드 조각에서 중요하지 않은 속성을 제거하기 위해 빈 iframe을 만들었습니다.

문제 3: 단축 속성만 유지

다음과 같은 단축 속성이 있는 속성을 제거했습니다. 코드 가독성을 향상시킵니다.

문제 4: 접두어 제거 속성

접두사가 붙은 속성(-webkit- 등)을 과도하게 사용하면 문제가 발생했습니다. 관련성이 불확실하고 대부분 불필요했기 때문에 이러한 속성을 제거하기로 결정했습니다.

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

반복적인 CSS 규칙은 다음과 같은 규칙을 결합하여 최적화되었습니다. 속성과 값이 동일하므로 코드가 더욱 간결해집니다.

문제 6: 정리 및 들여쓰기 HTML

jquery-clean 라이브러리를 활용하여 HTML 코드 형식을 다시 지정하여 가독성을 높이고 원치 않는 속성을 제거했습니다.

문제 7: 필터 유연성

사용자는 설정 메뉴에서 필터를 비활성화하여 특정 사용 사례에 유연성을 제공할 수 있습니다.