사용 방법
- CSS를 붙여 넣거나,
.css파일을 열거나, 샘플로 시작하세요. - 입력하는 대로 압축된 CSS가 전후 크기와 함께 표시됩니다.
- 복사하거나
styles.min.css로 다운로드하세요.
기능
CSS 압축기는 CSSO를 사용하며, 공백과 주석 제거에 그치지 않습니다.
- 값을 줄입니다.
#ff0000은red가 되고,0px은0이 되고,padding: 0 16px 0 16px은padding: 0 16px이 됩니다. - 선택자가 같은 규칙과 선언이 같은 선택자를 합칩니다.
- 같은 규칙에서 나중 선언이 덮어쓰는 선언을 제거합니다.
스타일시트의 의미를 유지하는 변경만 하므로 페이지 모양은 같습니다.
효과가 있나요?
스타일시트는 로드될 때까지 페이지 표시를 막으므로 CSS가 작을수록 첫 페인트가 빨라집니다. 압축하면 호스트가 적용하는 gzip이나 Brotli에 더해 보통 5~15%를 더 줄일 수 있으며, 주석이 많은 스타일시트는 더 줄어듭니다. Vite 같은 빌드 도구를 사용하면 프로덕션용 CSS가 이미 압축되므로, 이 페이지는 직접 작성해 배포하는 스타일시트에 적합합니다.
자주 묻는 질문
압축하면 CSS가 깨질 수 있나요?
CSSO의 변경은 유효한 CSS의 의미를 유지합니다. 오래된 브라우저를 위해 잘못된 구문에 의존하는 핵은 남지 않을 수 있습니다. 읽기 쉬운 버전을 소스로 보관하고 복사본을 압축하세요.
사용하지 않는 CSS를 제거하나요?
아니요. 페이지에서 어떤 선택자를 사용하는지 볼 수 없습니다. PurgeCSS 같은 도구가 빌드 중에 이를 수행합니다.
읽기 쉬운 버전으로 되돌리려면 어떻게 하나요?
원본을 보관하세요. CSS 포매터는 압축된 CSS를 다시 들여쓰지만, 주석은 되돌릴 수 없습니다.
CSS가 업로드되나요?
아니요. 압축은 브라우저에서 이루어집니다.