Formula
format: one selector group per block, one declaration per lineminify: remove comments and every unnecessary space and the last semicolon in each block
- Strings and url(…) values are copied untouched.
Only whitespace and comments change; the rules stay the same.
Worked example
Compact rules
- CSS
- a,b{color:red;margin:0 auto}@media (max-width:600px){.x{display:none}}
- Action
- Format (beautify)
- Indent
- 2 spaces
Result
Formatted — see below
Before: 70 bytes
After: 100 bytes
a,
b {
color: red;
margin: 0 auto;
}
@media (max-width:600px) {
.x {
display: none;
}
}How it works
The formatter understands strings, comments, parentheses (so url(data:image/png;base64,…) isn't split), at-rules like @media and nested blocks. Selector lists are broken onto separate lines and each declaration gets its own line with a space after the colon.
Minifying removes comments and whitespace and drops the final semicolon in each block, usually saving 20–40% — though gzip on the server already removes much of that redundancy. Unbalanced braces and unterminated strings are reported with a line number. The tool doesn't check whether property names or values are valid CSS. For markup see the HTML Formatter, and for picking colours the Color Converter.
Assumptions and limits
- Plain CSS and common nesting; preprocessor syntax (Sass, Less) isn't supported.