같은 스타일시트에 대한 정반대의 두 작업입니다. 압축은 사람에게만 필요한 것, 즉 주석과 들여쓰기를 걷어냅니다. 정리는 그것을 되돌려, 물려받은 파일을 다시 읽을 수 있게 만듭니다. 둘 다 여러분이 준 텍스트를 다루고, 둘 다 CSS의 의미는 건드리지 않습니다.

사용 방법

1. 1 CSS를 붙여 넣으세요. 파일 전체든 규칙 하나든 됩니다.
2. 2 줄이려면 압축을, 들여쓰기로 펼치려면 정리를 누르세요.
3. 3 바이트 수를 확인한 뒤 결과를 복사하세요.

선택자의 공백은 장식이 아닙니다

".a .b"는 .a 안의 .b를 고르고, ".a.b"는 두 클래스를 함께 지닌 한 요소를 고릅니다. 서로 다른 선택자이며, 공백을 군더더기로 보는 압축기는 조용히 엉뚱한 요소를 칠합니다. 여기서는 선택자 조각 사이의 공백이 언제나 살아남고, > 나 + 같은 결합자 주변의 공백만 사라집니다.

calc()에는 공백이 필요합니다

"calc(100% - 10px)"에서 빼기 기호 양옆의 공백은 문법이 요구하는 것입니다. 없으면 브라우저는 "-10px"를 음수 길이로 읽고, 식은 무효가 되며, 선언 전체가 버려집니다. 아무도 경고하지 않습니다. 그저 레이아웃이 틀어질 뿐입니다. 이 도구는 괄호 안의 공백을 결코 지우지 않습니다.

라이선스 주석은 남습니다

/*! 로 시작하는 주석에는 저작권이나 라이선스 고지가 담겨 있고, 관례상 모든 압축기가 이를 남깁니다. 지운다는 것은 라이브러리가 함께 배포하라고 요구한 표기를 없애는 일입니다. 평범한 /* 주석은 여러분과 팀을 위한 것이니 그것들은 사라집니다.

CSS 압축은 gzip만큼 벌어 주지 않습니다

서버는 이미 스타일시트를 내보낼 때 압축하고, gzip은 반복되는 공백에 아주 강합니다. 그러니 그 위에 압축을 더해도 대개 몇 퍼센트를 아낄 뿐, 절반이 아닙니다. 이 작업을 하는 이유는 그 파일이 곧 배포되는 물건이고 작고 안정적이길 바라기 때문이지, 페이지가 눈에 띄게 빨라져서가 아닙니다.