Critical CSS 선택자 추출기
CSS와 HTML 조각을 붙여넣어 일치하는 요소의 규칙을 찾으세요. 실제 뷰포트 가시성은 측정하지 않습니다.
CSS와 HTML은 로컬 처리(각 100 KB). 선택자만 확인하며 페이지 렌더링이나 첫 화면 가시성은 측정하지 않습니다.
사용 방법
사용 방법
- CSS와 검사할 HTML 조각을 붙여넣습니다.
- 조각의 요소에 일치하는 규칙을 추출합니다.
- 사용 전에 결과를 검토하고 실제 렌더링과 대조합니다.
선택자 일치만 확인
브라우저가 CSS 규칙을 파싱해 제공된 HTML 조각과 선택자를 비교합니다. 실제 첫 화면 표시 여부, 런타임 클래스, 레이아웃 숨김 여부는 판단하지 않습니다.
문법과 한계
일치하는 일반 스타일 규칙과 중첩 @media/@supports 블록을 유지합니다. @import, keyframes, font-face 및 미지원 규칙은 제외합니다. 정적 조각에서는 일부 가상 상태 선택자가 일치하지 않을 수 있습니다. 직접 검토하세요.
로컬 처리와 제한
CSS와 HTML은 브라우저에서만 처리하며 각각 100 KB까지입니다. 완전한 프로덕션 critical CSS 결과로 간주하지 마세요.
자주 묻는 질문
더 알아보기
첫 화면에 보이는 것을 찾나요?
아니요. 레이아웃을 렌더링하지 않고 제공된 HTML에서 선택자만 확인합니다.
모든 CSS 기능을 보존하나요?
아니요. 스타일 규칙과 지원되는 media/supports 블록에 한정되며 생략된 부분을 확인해야 합니다.