Utilore

CSS 압축

스타일시트를 붙여넣으면 압축된 채로 돌아옵니다. 입력란 아래에 전후 용량이 나오므로 값어치가 있었는지 바로 판단할 수 있습니다.

코드는 이 페이지를 벗어나지 않습니다. 정렬은 브라우저에서 이뤄집니다.

사용 방법

  1. 첫 번째 칸에 CSS를 붙여넣습니다. 입력하는 대로 압축됩니다.
  2. 입력란 아래에 나온 전후 용량을 비교합니다.
  3. 결과를 복사합니다. 「정렬」을 누르면 다시 읽기 좋게 펼쳐집니다.

알아두면 좋은 점

무엇이 지워지나

주석, 줄바꿈, 들여쓰기, 콜론과 결합자 주변의 공백, 그리고 닫는 중괄호 바로 앞의 세미콜론입니다. 그 세미콜론은 표준이 요구한 적이 없습니다. 선택자에서는 자손과 조상을 가르는 공백 하나를 남깁니다. 그것을 지우면 규칙이 적용되는 대상 자체가 달라지기 때문입니다.

문자열을 건드리지 않는 이유

content: "a;b" 안의 세미콜론과 인라인 SVG 데이터 URI 안의 중괄호는 정규식이 보기에 구조와 구별되지 않습니다. 패턴 대조로 동작하는 압축기는 그런 파일을 조용히 망가뜨리고, 피해는 운영에서 아이콘 하나가 사라지는 모습으로 나타납니다. 이 도구는 한 글자씩 읽고 따옴표 안 문자열을 통째로 옮깁니다.

자주 묻는 질문

스타일시트가 똑같이 동작하나요?

그렇습니다. 이름을 바꾸거나 순서를 바꾸거나 버리는 일이 없습니다. 사라지는 것은 공백과 주석뿐이며 둘 다 규칙 적용에 영향을 주지 않습니다.

파일이 얼마나 줄어드나요?

손으로 쓴 스타일시트라면 대개 20~30퍼센트 줄어듭니다. gzip을 거치면 차이가 훨씬 작아집니다. 압축이 이미 반복된 공백을 처리하기 때문입니다.

코드가 서버로 가나요?

아니요. 전 과정이 페이지 안에서 이뤄집니다. 아직 공개하지 않은 스타일시트를 다룰 때 중요한 점입니다.

나중에 다시 읽을 수 있나요?

「정렬」을 누르면 한 줄에 한 선언씩 펼쳐집니다. 원래 주석은 사라졌지만 규칙은 전부 남아 있습니다.

관련 도구