Output will appear here...CSS 포맷터는 스타일시트를 읽고 일관된 간격, 들여쓰기 및 줄 바꿈으로 다시 작성하므로 읽고 유지하기 쉽습니다. CSS를 규칙, 선택기, 선언, at-규칙 및 주석의 기본 구조로 구문 분석한 다음 예측 가능한 레이아웃을 사용하여 해당 구조를 다시 인쇄합니다: 줄당 하나의 선언, 각 콜론 뒤의 단일 공간, 부모보다 한 단계 더 깊은 들여쓰기된 각 중첩 블록 스타일 규칙은 동일하게 유지되지만 하나의 긴 끊어지지 않은 줄로 도착한 파일은 실제로 스캔하고 편집할 수 있는 것이 됩니다.
동일한 도구는 CSS 축소기와 반대로 작동합니다. 축소 모든 공간,탭, 줄 바꿈 및 (선택적으로) 브라우저가 필요하지 않은 주석 스트립,스타일 시트를 가장 작은 바이트 - 바이트 등가물로 축소합니다. 잘 포맷 된 6 KB 스타일 시트는 종종 공백이 사라지면 4 KB 아래로 떨어지며,이는 네트워크를 통해 더 적은 바이트와 더 빠른 첫 번째 페인트를 의미합니다. 작성 및 디버깅하는 동안 아름답게; 생산에 배송하는 복사본을 축소합니다.
이 포맷터는 순진한 찾기 및 바꾸기 스크립트를 트립하는 CSS 의 부분을 이해합니다. @media 및 @supports 와 같은 중첩된 at-규칙은 내부 규칙을 올바르게 들여쓰기하고,백분율 단계가 있는 @keyframes 블록은 보존되며,콘텐츠 및 url() 값의 문자열 리터럴은 작성된 대로 정확하게 남고,요청 시 주석은 유지 또는 제거됩니다. 모든 것은 브라우저에서 완전히 실행되므로 독점 디자인 토큰이나 내부 클래스 이름을 포함한 스타일시트는 업로드되지 않으며 연결되지 않은 상태에서도 페이지가 로드된 후에도 도구가 계속 작동합니다.
입력 영역에 스타일시트를 붙여넣거나 입력합니다. @media, @keyframe,주석이 있는 파일을 포함하여 CSS 를 모두 축소,수기 또는 내보냈습니다.
Beautify 를 클릭하여 읽을 CSS 를 다시 들여쓰거나 Minify 를 클릭하여 배송할 공백을 제거합니다. beautify 레이아웃을 위해 2 칸,4 칸 또는 탭을 선택합니다.
포맷된 CSS 는 바이트 변경을 보여주는 크기 배지와 함께 오른쪽에 나타납니다. 닫히지 않은 중괄호와 같은 모든 구문 분석 알림은 경고로 나열됩니다.
출력을 클립보드에 복사하거나.css 파일로 다운로드하여 프로젝트에 드롭하거나 파이프라인을 빌드할 준비가 됩니다.
하나의 도구는 읽기 위해 CSS를 다시 들여쓰고 배송을 위해 다시 제거하므로 두 개의 별도 유틸리티가 필요하지 않습니다
@media, @supports, @keyframe 내부의 규칙을 평평하게 하거나 망가뜨리는 대신 올바르게 들여쓰기합니다
인용된 문자열과 url() 값의 내용을 그대로 두므로 콘텐츠 텍스트와 데이터 URI는 서식이 그대로 유지됩니다
프로젝트 스타일이나 편집기 설정과 일치하도록 두 칸, 네 칸 또는 탭으로 포맷합니다
Format, validate, and minify JSON data
Validate YAML syntax and convert to JSON format
Minify CSS to cut file size or beautify minified stylesheets for debugging
Format messy SQL into readable, indented queries or minify SQL to a single line
0 comments
No comments yet. Be the first to share your thoughts!