🎨
무료 CSS 정리기
압축된 CSS를 일관된 들여쓰기로 보기 좋게 정리하거나 압축합니다. 속성을 알파벳순으로 정렬하는 옵션으로 변경 내역(diff)을 더 일정하게 비교할 수 있습니다.
한 번 로드하면 오프라인에서도 작동
여기에 파일을 놓거나 클릭해서 선택하세요
CSS · 기기에서 처리됨
또는 Ctrl+V를 눌러 클립보드에서 붙여넣기
정리된 CSS
여기에 출력이 표시됩니다…주요 용도
- 프로덕션 CSS 디버그프로덕션 사이트에서 축소된 CSS를 읽을 수 있는 형식으로 보고 스타일을 찾고 역엔지니어링합니다.
- 팀 CSS 스타일 적용팀이 제출한 CSS를 일관된 아름다운 포매터를 통해 실행하여 diff가 형식이 아닌 콘텐츠에 대해 있도록 합니다.
- 공급업체 접두사 CSS 포맷공급업체 접두사 CSS (autoprefixer 출력)에는 종종 많은 -webkit-, -moz-, -ms- 변형이 있습니다. 검사를 위해 포맷합니다.
- 전문가 CSS에서 배우기유명한 디자인 시스템에서 컴파일된 출력을 포맷하여 CSS를 연구합니다.
- 버그 보고서용 CSS 포맷CSS 버그를 파일할 때 포맷된 CSS는 검토자가 읽고 이해하기가 훨씬 쉽습니다.
사용 방법
이 도구는 페이지에 직접 내장된 재귀 파서로 CSS를 서식화합니다. 서드파티 라이브러리도 서버 호출도 없습니다. 파서는 CSS를 한 글자씩 훑으며, 단순한 정규식 기반 방식을 혼란스럽게 하는 따옴표 문자열, url() 값, 중첩된 at-규칙, 주석을 올바르게 처리합니다.
- 1문자 단위 토큰화walkCss 함수는 원시 입력을 한 글자씩 훑으며 따옴표 상태와 괄호 깊이를 추적하므로, url(), 문자열 값, 주석 안의 세미콜론이나 중괄호가 구조적 구분자로 오인되지 않습니다.
- 2블록과 선언 분리스캐너가 최상위 여는 중괄호를 찾으면 앞부분(선택자 또는 at-규칙 키워드)을 추출하고 블록 본문을 재귀적으로 처리합니다. 본문에는 더 깊은 재귀 단계에서 처리되는 중첩 규칙(@media, @supports, 기본 CSS 중첩)이 포함될 수 있습니다.
- 3속성 정렬과 들여쓰기각 블록의 선언은 하나로 모은 뒤 선택에 따라 속성 이름순으로 정렬하고, 선택한 들여쓰기 너비(공백 2칸 또는 4칸)로 출력합니다. 압축 모드는 공백을 모두 생략하고 주석을 제거합니다.
- 4브라우저에서 즉시 출력useMemo 훅으로 입력하는 대로 결과가 나타나며 어디로도 전송되지 않습니다. 서식화되거나 압축된 CSS는 클립보드에 복사하거나 .css 파일로 다운로드할 수 있고, 패널에 원본 대비 크기 차이가 표시됩니다.