CSS Beautifier 및 포맷터 온라인
지저분하거나 압축된 CSS 스타일시트를 실시간으로 즉시 형식화하고 축소 해제하고 구성합니다. 상태 머신 CSS 포맷터는 중첩된 @media 쿼리, @keyframes, CSS 변수(--var), https:// URL 및 inline SVG 데이터 URI—생산으로 배송할 준비가 되면 원클릭 CSS Minifier가 포함됩니다.
CSS 온라인을 아름답게 만들고 축소하는 방법
- CSS: 붙여넣기 압축된
.min.css또는 지저분한 스타일시트를 왼쪽의 Input CSS 편집기에 붙여넣거나 Load Sample를 클릭하여 중첩된@media를 테스트합니다. 쿼리, 변수 및 URL. - 사전 설정 선택 또는 설정 사용자 정의: 빠른 사전 설정 막대에서 2 Spaces, 4 Spaces, 정리 및 정렬 A~Z 또는 Minify(.min.css)를 선택합니다. 또는 오른쪽에서 들여쓰기, 중괄호 배치, 선택기 분할 및 색상 압축을 조정합니다.
- 실시간 통계 검사: Input, Output, Rules 및 Lines 카운터가 옵션을 입력하거나 전환하는 즉시 업데이트되는 것을 확인하세요.
- 복사 또는 다운로드: clipboard로 복사 또는 Download .css를 클릭하여 형식이 지정된 스타일시트를
styles.beautified.css(또는styles.min.css)로 저장합니다. 축소 모드).
CSS 형식화 및 최적화 옵션 설명
| 옵션 | 그것이 하는 일 | 전에 | 후에 |
|---|---|---|---|
| 축소 해제 및 들여쓰기 | 한 줄 규칙과 중첩된 @media / @keyframes 블록을 2, 4 또는 8개의 공백이나 탭으로 확장합니다. |
@media(최대 너비:768px){.box{너비:100%}} |
@media (최대 너비: 768px) { |
| 라인당 하나의 선택기 | :is() 또는 :not() 내부에서 쉼표를 무시하면서 쉼표로 구분된 선택기 목록을 개별 줄로 분할합니다. |
.btn, .card, .modal { ... } |
.btn, |
| 색상 값 압축 | 주변 토큰을 유지하면서 rgb() 및 6자리 16진수 코드를 선언 값 내의 3자리 16진수 코드로 변환합니다. |
border: 1px 솔리드 rgb(255, 0, 0); |
border: 1px 솔리드 #f00; |
| 정렬 속성(A–Z) | 코드 검토를 표준화하고 중복 속성을 표시하기 위해 각 블록 내부의 선언을 알파벳순으로 정렬합니다. | z-인덱스: 5; 디스플레이: 플렉스; 항목 정렬: 중앙; |
align-items: center; |
상태 머신 CSS Beautifier를 사용하는 이유는 무엇입니까?
많은 간단한 온라인 CSS 포맷터는 모든 콜론(:), 세미콜론(;) 또는 중괄호(})로 코드를 분할합니다. 스타일시트에 다음과 같은 최신 CSS 기능이 포함되면 이러한 접근 방식은 무너집니다.
- 중첩된 At-규칙 및 네이티브 CSS 중첩:
@media쿼리,@supports기능 쿼리,@keyframes애니메이션,@layer블록 및 중첩된 하위 선택기 다단계 들여쓰기 추적이 필요합니다. - 외부 URL 및 인라인 SVG 데이터 URI:
배경과 같은 속성: url("https://...")또는url("data:image/svg+xml;utf8,에는 CSS 속성으로 분할해서는 안 되는 콜론과 세미콜론이 포함되어 있습니다. 구분 기호.") - Pseudo-Element Content Strings:
content: "Item: 1; Status: OK"와 같은 선언은 정확한 내부 문자와 공백을 그대로 유지합니다. - W3C-정확한 색상 단축: 명명된 색상은 CSS 사양에서 16진수 값이 엄격하게 더 짧고 동일한 경우에만 단축됩니다(예:
white→#fff및black→#000,#008000가 더 길고#0f0가 실제로는green를green로 유지합니다.lime).
자주 묻는 질문
온라인에서 .min.css 파일의 축소를 어떻게 취소합니까?
압축된 .min.css 코드를 왼쪽의 Input CSS 상자에 붙여넣습니다. 이 도구는 선택기, 선언, @media 쿼리 및 @keyframes를 실시간으로 깔끔하게 들여쓰기된 여러 줄 CSS로 자동 구문 분석합니다.
이 CSS beautifier는 @media 쿼리, @keyframes 및 data: URI를 지원합니까?
예. 단순한 분할 기반 포맷터와 달리 이 도구는 중첩된 블록(@media, @supports, @keyframes, @layer 및 기본 CSS 중첩)을 보존하는 상태 기계 CSS 파서를 사용합니다. url("https://..."), data:image/svg+xml URI 내부의 콜론과 세미콜론 및 인용된 content 문자열도 포함됩니다.
CSS 속성을 알파벳순으로 정렬하는 것이 안전합니까?
알파벳순 정렬을 사용하면 큰 규칙을 더 쉽게 검색할 수 있으며 중복된 선언을 찾는 데 도움이 됩니다. 그러나 규칙이 보다 구체적인 재정의가 뒤따르는 단축 속성에 의존하는 경우(또는 그 반대, 예를 들어 Background-color 대 Background와 같이) 선언 순서를 변경하면 어떤 속성이 적용되는지가 바뀔 수 있습니다. 규칙이 속기 재정의 순서에 의존하지 않는 경우 정렬을 활성화합니다.
이 도구를 사용하여 CSS도 축소할 수 있나요?
예. Minify CSS 버튼을 클릭하거나 설정 패널에서 Minify(Single-Line .min.css)를 선택하여 주석, 공백 및 후행 세미콜론을 제거하고 색상 값을 컴팩트 제작 스타일시트로 압축합니다.
내 CSS 코드가 다른 서버에 업로드됩니까?
아니요. 모든 CSS 형식 지정 및 축소는 JavaScript를 사용하여 브라우저에서 로컬로 100% 실행됩니다. 스타일시트는 컴퓨터를 떠나지 않습니다.