CSS Formatter
Beautify or minify stylesheets, including nested at-rules
すべての処理はブラウザ内で完結します。データが端末外に送信されることはありません。
関連ツール
使い方
Formatting is driven by braces and semicolons rather than by the source's existing line breaks, so completely minified input reformats just as well as sloppily indented input.
Paste your CSS
Minified stylesheets, a fragment copied from devtools, or hand-written rules all work. The input does not need to be a complete stylesheet.
Choose beautify or minify
Beautify produces one declaration per line for reading and diffing. Minify strips comments and whitespace for production delivery.
Watch for unbalanced braces
If the brace count does not return to zero, the tool says so. A missing closing brace silently swallows every rule that follows it, which is a difficult bug to spot by eye.
使用例
Expanding a minified stylesheet
A minified block of three rules including a media query expands so each declaration sits on its own line and the rule inside the media query is indented one level, making the cascade readable.
Minifying for delivery
A formatted stylesheet with comments typically minifies by 25 to 40%. Combined with gzip on the server, the saving compounds — minified CSS still compresses well.
このツールについて
Format CSS with one declaration per line and correctly indented blocks, or minify it by stripping comments and every optional byte of whitespace. Nested structures such as media queries and supports blocks indent properly rather than flattening.