개발자 도구
CSS 포맷터
중첩 at-규칙까지 처리하는 정렬과 압축
결과
모든 처리는 브라우저에서 이루어집니다. 데이터는 기기를 벗어나지 않습니다.
관련 도구
사용 방법
정렬은 원본의 줄바꿈이 아니라 중괄호와 세미콜론을 기준으로 이루어집니다. 따라서 완전히 압축된 입력도 들여쓰기가 엉망인 입력만큼 잘 정렬됩니다.
CSS 붙여넣기
압축된 스타일시트, 개발자 도구에서 복사한 조각, 직접 작성한 규칙 모두 동작합니다. 완전한 스타일시트일 필요는 없습니다.
정렬 또는 압축 선택
정렬은 선언마다 한 줄로 만들어 읽기와 비교에 적합합니다. 압축은 주석과 공백을 제거해 배포용으로 만듭니다.
중괄호 불일치 확인
중괄호 개수가 0으로 돌아오지 않으면 그 사실을 알려줍니다. 닫는 중괄호 하나가 빠지면 그 뒤의 모든 규칙이 조용히 삼켜지는데, 눈으로 찾기 어려운 버그입니다.
예시
압축된 스타일시트 펼치기
미디어 쿼리를 포함한 규칙 세 개짜리 압축 블록이 펼쳐지면서 각 선언이 자기 줄에 놓이고 미디어 쿼리 안의 규칙은 한 단계 들여써집니다. 캐스케이드를 읽을 수 있게 됩니다.
배포용 압축
주석이 포함된 정렬된 스타일시트는 보통 25~40% 줄어듭니다. 서버의 gzip과 결합하면 효과가 누적됩니다. 압축된 CSS도 gzip이 잘 적용됩니다.
도구 소개
선언 하나당 한 줄, 블록마다 올바른 들여쓰기로 CSS를 정렬하거나, 주석과 불필요한 공백을 모두 제거해 압축합니다. 미디어 쿼리와 supports 블록 같은 중첩 구조도 평평해지지 않고 제대로 들여써집니다.