CSS 포매터
선택자, 선언, 주석, 값과 at-rule 구조를 유지하면서 CSS에 일관된 들여쓰기를 적용합니다.
Make CSS easier to review
압축된 CSS는 선택자, 선언, 주석과 긴 값을 한 줄에 숨길 수 있습니다. 이 도구는 읽기 쉬운 레이아웃을 보여 줍니다.
서식은 표시만 바꾸며 유효성, 효율, 접근성이나 호환성을 증명하지 않습니다. 원본과 diff를 보관하세요.
선택자, 선언, 주석, custom property, media query와 인용 값이 있는 샘플을 사용합니다.
Formatting is not CSS validation
CSS는 선택자, 선언, 값, 주석, at-rule, 함수, custom property와 블록으로 구성됩니다. 들여쓰기는 경계를 보입니다.
Formatter는 공백과 token을 정리하지만 표준, specificity, 접근성, 성능이나 build 호환성을 검증하지 않습니다.
값에는 문자열, URL, escape, gradient, 변수와 vendor extension이 있을 수 있습니다.
How to format CSS
- 전체 stylesheet나 지원 fragment를 입력합니다.
- 선택자, 괄호, 선언, 주석, custom property, 함수와 at-rule을 확인합니다.
- 속성, 값, 따옴표, URL, 변수와 순서를 원본과 비교합니다.
- linter, build, 접근성와 브라우저 검사를 실행합니다.
- 개인 URL, token과 사용자 데이터를 제거합니다.
Formatting method
- 선택자, 선언, 값,
선택자, 선언, 값, 주석, 블록, 함수와 at-rule을 읽습니다.
- 규칙과 중첩 블록이
규칙과 중첩 블록이 보이도록 줄바꿈과 들여쓰기를 추가합니다.
- 원본 값, 문자열,
원본 값, 문자열, URL, custom property, 주석과 순서를 유지합니다.
parser 복구, dialect, vendor 확장, 주석, 공백과 오류 문구는 실제 엔진에서 확인해야 합니다.
Read the formatted result
성공 결과는 입력 CSS의 읽기 쉬운 배치입니다. 선택자, 선언, 값, 주석, 블록, 함수와 순서를 원본과 확인하세요.
실패가 parser 지원이나 recovery를 증명하지는 않습니다.
브라우저, linter와 build 문제는 별도 계약이며 서식은 최적화가 아닙니다.
흔한 실수
들여쓰기를 검증으로 오해하면 잘못된 값, specificity 문제나 접근성 문제를 놓칠 수 있습니다.
custom property, 문자열, URL, escape나 순서를 바꾸면 동작이 달라집니다.
vendor 확장이 모든 toolchain에서 같은 것으로 가정하지 마세요.
개인 URL, token과 사용자별 style은 데이터를 노출할 수 있습니다.
제한 사항 및 특수 사례
이 기능은 CSS 표시 형식이며 표준, lint, 접근성, 보안, 성능, 호환성이나 minify를 보장하지 않습니다.
custom property, at-rule, 확장, 함수, escape, 주석과 큰 stylesheet를 대상 도구로 시험하세요.
정책이 허용하지 않으면 기밀 style을 입력하지 마세요.
Examples
서식이 CSS를 검증하나요?
서식이 CSS를 검증하나요?
전체 stylesheet나 지원 fragment를 입력합니다.
성공 결과는 입력 CSS의 읽기 쉬운 배치입니다. 선택자, 선언, 값, 주석, 블록, 함수와 순서를 원본과 확인하세요.
cascade가 바뀌나요?
cascade가 바뀌나요?
선택자, 괄호, 선언, 주석, custom property, 함수와 at-rule을 확인합니다.
실패가 parser 지원이나 recovery를 증명하지는 않습니다.
값이 보존되나요?
값이 보존되나요?
속성, 값, 따옴표, URL, 변수와 순서를 원본과 비교합니다.
브라우저, linter와 build 문제는 별도 계약이며 서식은 최적화가 아닙니다.
주석이 보존되나요?
주석이 보존되나요?
linter, build, 접근성와 브라우저 검사를 실행합니다.
성공 결과는 입력 CSS의 읽기 쉬운 배치입니다. 선택자, 선언, 값, 주석, 블록, 함수와 순서를 원본과 확인하세요.
media query를 정렬할 수 있나요?
media query를 정렬할 수 있나요?
개인 URL, token과 사용자 데이터를 제거합니다.
실패가 parser 지원이나 recovery를 증명하지는 않습니다.
성능이 좋아지나요?
성능이 좋아지나요?
전체 stylesheet나 지원 fragment를 입력합니다.
브라우저, linter와 build 문제는 별도 계약이며 서식은 최적화가 아닙니다.
Frequently asked questions
서식이 CSS를 검증하나요?
아니요. parser, linter, build, 접근성과 브라우저 검사를 사용하세요.
cascade가 바뀌나요?
표시 공백만 바뀌어야 하지만 순서를 비교하고 시험하세요.
값이 보존되나요?
예제는 값, 문자열, URL과 함수를 유지하며 필요하면 diff를 확인합니다.
주석이 보존되나요?
예제는 주석을 유지하므로 실제 입력에서 확인하세요.
media query를 정렬할 수 있나요?
예제는 중첩 at-rule을 보여 주며 지원 여부를 확인해야 합니다.
성능이 좋아지나요?
아니요. profiling과 대상 최적화를 사용하세요.
잘못된 CSS를 고치나요?
자동 복구를 가정하지 말고 원본을 수정해 검증하세요.
서식 후 무엇을 하나요?
diff를 검토하고 linter, build, 접근성, 브라우저 검사를 실행하세요.