使用方法

将 CSS 粘贴到输入框中，打开 .css 文件，或试用示例。
选择“美化”以获得可读代码，或选择“压缩”以获得最小输出。
美化时，选择 2 个空格、4 个空格或制表符。
复制结果或将其下载为 .css 文件。如果花括号或引号不匹配，错误会显示行和列。

工作原理

该格式化工具会先将样式表拆分为 token：单引号或双引号字符串、url(…) 值、注释、花括号和分号。由于字符串和 url() 是单个 token，因此 data URI 中的分号或 content: "{ }" 中的花括号绝不会干扰结构，其内容会被原样复制。

美化（Beautify）模式会将选择器列表中的每个选择器单独放在一行，在子代、兄弟和相邻组合器（>、~、+）周围添加空格，并将每条声明写成“property: value;”并单独占一行。@media、@supports、@layer、@container 以及原生 CSS 嵌套中的块会按嵌套深度缩进一级。块的最后一条声明若缺少分号会自动补上。注释保留在原处。

压缩（Minify）模式会移除注释（/*! … */ 许可声明除外）、折叠空白、移除花括号、冒号、分号、逗号和选择器组合器周围的空格，并删除每个右花括号前的分号。会影响含义的空格会保留：例如“.a .b”中的后代组合器、“a :focus”中的空格，以及 calc(100% - 2px) 等值内部的空格。“! important”会规范化为“!important”。

该工具不会重写值：颜色、单位和零会保持原样，规则也不会被合并或重新排序。带普通嵌套的 SCSS 或 Less 文件通常可以使用，但它们自身的语法（例如 // 行注释或 mixin）无法被识别。

示例

阅读压缩后的框架文件

粘贴一段单行的 bootstrap.min.css 片段，选择使用 2 个空格的“美化”模式，即可看到每条规则、媒体查询及其嵌套规则分别显示在缩进的独立行中。

发布手写样式表

在将带有注释和缩进的 12 KB 样式表内联添加到电子邮件模板或页面 head 之前，先将其压缩。摘要会显示压缩前后的字符数。

查找缺失的花括号

样式表在中间位置突然不再生效。格式化工具会报告“此 { 从未由匹配的 } 闭合”，并显示缺少右花括号的规则所在行。

常见问题

使用此工具压缩后的 CSS 可以在生产环境中安全使用吗？

它只移除 CSS 会忽略的注释和空白，因此规则行为保持一致。它不会进行构建工具那样的深度优化，例如合并规则或缩短颜色，因此结果可能会比它们的稍大一些。

为什么在 “a :focus” 中保留了空格？

在选择器中，空格是后代组合器。“a :focus” 表示链接内部获得焦点的元素，而 “a:focus” 表示获得焦点的链接。移除该空格会改变匹配的元素。

它可以格式化 SCSS 或 Less 吗？

普通的嵌套规则可以正确格式化。预处理器专属语法（例如 // 注释、带参数的 mixin 或 @if 块）无法识别，可能会格式异常，因此请检查结果。

压缩时许可证注释会被移除吗？

隐私

您的 CSS 仅在浏览器中处理。不会上传、存储或包含在分析中。