CSS 압축·정리

사용 방법

CSS를 붙여넣고 압축을 누르면 주석과 줄바꿈, 여분의 공백이 사라진 한 덩어리가 나옵니다. 정리를 누르면 반대로 규칙마다 줄을 나누고 중괄호 깊이에 맞춰 들여쓰기합니다. 원본과 결과 용량, 줄어든 비율을 함께 보여줍니다.

압축할 때 하는 일

주석을 지우고 연속된 공백을 하나로 줄인 다음, 중괄호와 세미콜론, 콜론, 쉼표, 결합자 주변의 공백을 없앱니다. 블록 안 마지막 세미콜론도 뺍니다. 선택자 이름이나 속성값을 바꾸지는 않으므로 색상 값을 짧게 줄이거나 같은 규칙을 합치는 수준의 최적화는 하지 않습니다.

건드리지 않는 부분

따옴표로 감싼 문자열과 url() 안의 내용은 통째로 보존합니다. content 속성에 넣은 공백이나 base64로 박아 넣은 이미지 주소가 망가지지 않게 하기 위해서입니다. 주석처럼 보이더라도 문자열 안에 있으면 지우지 않습니다.

한계

문법이 깨진 CSS를 넣으면 결과도 깨집니다. 압축 전에 원본을 따로 보관하세요. 미디어 쿼리나 중첩된 규칙도 처리하지만, 최신 문법을 쓰는 큰 파일이라면 결과를 브라우저에서 한 번 확인하고 쓰는 편이 안전합니다. 자바스크립트 압축은 세미콜론 자동 삽입 규칙 때문에 잘못 줄이면 동작이 바뀔 수 있어 넣지 않았습니다.