🎨
免费 CSS 美化工具
将压缩的 CSS 格式化为缩进一致的易读代码，也可以压缩 CSS。可选按字母顺序排列属性，让差异对比更清晰。
加载后可离线使用
将文件拖放到此处，或点击浏览
CSS · 在你的设备上处理
或按 Ctrl+V 从剪贴板粘贴
格式化后的 CSS
输出将显示在此处…常见用途
- 调试生产 CSS以可读格式查看来自生产网站的缩小 CSS 来查找并对样式进行逆向工程。
- 强制团队 CSS 风格通过一致的美化器运行团队提交的 CSS，使差异关于内容而不是格式。
- 格式化供应商前缀 CSS供应商前缀 CSS (autoprefixer 输出) 通常有许多 -webkit-、-moz-、-ms- 变体。格式化以检查。
- 从专业 CSS 学习通过格式化著名设计系统的编译输出来研究其 CSS。
- 为 Bug 报告格式化 CSS提交 CSS 错误时，格式化的 CSS 审查者更容易阅读和理解。
工作原理
此工具使用直接内置在页面中的手写递归解析器格式化 CSS——没有第三方库、没有服务器调用。解析器逐字符遍历你的 CSS，能正确处理引号字符串、url() 值、嵌套 at 规则和注释，而这些会让较简单的基于正则的方法出错。
- 1字符级分词walkCss 函数逐字符扫描原始输入，跟踪引号状态和括号深度，因此 url()、字符串值或注释中的分号或花括号绝不会被误认为结构分隔符。
- 2区分块和声明扫描器发现顶层左花括号时，会提取前导部分（选择器或 at 规则关键字），并递归处理块体——块体本身可能包含嵌套规则（@media、@supports、原生 CSS 嵌套），在更深的递归层级中处理。
- 3属性排序与缩进每个块中的声明被收集为一组，然后可选择按属性名字母顺序排序，再以所选缩进宽度（2 或 4 个空格）输出。压缩模式完全跳过空白并去除注释。
- 4浏览器内即时输出通过 useMemo 钩子，结果在你输入时即时显示——不会发送到任何地方。格式化或压缩后的 CSS 可以复制到剪贴板或下载为 .css 文件，面板还会显示与原始文件的大小差异。