CSS Beautifier & 在线格式化程序
实时即时格式化、取消缩小和整理杂乱或压缩的 CSS 样式表。我们的状态机 CSS 格式化程序准确缩进嵌套的 @media 查询、@keyframes、CSS 变量 (--var)、https:// URL 和内联SVG 数据 URI — 当您准备好交付生产时，还包括一键式 CSS Minifier。
如何在线美化和缩小CSS
- 粘贴您的CSS: 将压缩的
.min.css或杂乱的样式表粘贴到左侧的Input CSS编辑器中，或单击Load Sample来测试嵌套的@media查询，变量和 URL。 - 选择 Preset 或自定义设置： 选择 2 空间、4 空间、清洁并排序 A–Z 或 Minify (.min.css) 从快速 Presets 栏，或调整右侧的缩进、大括号位置、选择器分割和颜色压缩。
- Inspect 实时统计： 在您键入或切换选项时，观看 Input、Output、Rules 和 Lines 计数器立即更新。
- 复制或下载： 单击复制到clipboard或下载.css，将格式化的样式表保存为
styles.beautified.css（或styles.min.css） Minify模式）。
CSS 格式化和优化选项说明
| 选项 | 它的作用 | 前 | 后 |
|---|---|---|---|
| 取消缩小并缩进 | 使用 2、4 或 8 个空格或制表符扩展单行规则和嵌套 @media / @keyframes 块。 |
@media(最大宽度:768px){.box{宽度:100%}} |
@media（最大宽度：768px）{ |
| 每行一个选择器 | 将逗号分隔的选择器列表拆分为单独的行，同时忽略 :is() 或 :not() 内的逗号。 |
.btn、.card、.modal { ... } |
.btn, |
| 压缩颜色值 | 将任何声明值内的 rgb() 和 6 位 hex 代码转换为 3 位 hex 代码，同时保留周围的标记。 |
边框：1px实心rgb(255, 0, 0); |
边框：1px实心#f00; |
| 排序属性 (A–Z) | 按字母顺序排列每个块内的声明，以标准化代码审查并揭示重复的属性。 | z-索引：5；显示：柔性；对齐项目：中心； |
对齐项目：居中； |
为什么使用状态机 CSS Beautifier？
许多简单的在线 CSS 格式化程序在每个冒号 (:)、分号 (;) 或大括号 (}) 上分割代码。一旦您的样式表包含现代 CSS 功能，例如：
- Nested At-Rules 和 Native CSS 嵌套：
@media查询、@supports功能查询、@keyframes动画、@layer块和嵌套子选择器需要多级压痕跟踪。 - 外部 URL 和内联 SVG 数据 URI：
背景等属性：url("https://...")或url("data:image/svg+xml;utf8,包含不得作为 CSS 属性分隔符拆分的冒号和分号。") - 伪元素内容字符串： 声明如
content: "Item: 1; Status: OK"保持其确切的内部字符和空白完整。 - W3C-准确的颜色缩短： 仅当 hex 等效项严格更短且在 CSS 规范中相同时才会缩短命名颜色（例如，
white→#fff和black→#000，同时将green保留为green，因为#008000更长，而#0f0实际上是lime）。
常见问题解答
如何在线取消压缩 .min.css 文件？
将压缩的 .min.css 代码粘贴到左侧的 Input CSS 框中。该工具自动实时将选择器、声明、@media 查询和 @keyframes 解析为干净缩进的多行 CSS。
此 CSS beautifier 是否支持 @media 查询、@keyframes 和 data: URI？
是的。与简单的基于分割的格式化程序不同，此工具使用状态机 CSS 解析器，将嵌套块（@media、@supports、@keyframes、@layer 和本机 CSS 嵌套）保留为以及 url("https://...")、data:image/svg+xml URI 中的冒号和分号，以及引用的 content 字符串。
按字母顺序对 CSS 属性进行排序是否安全？
按字母顺序排序使大型规则更易于扫描，并有助于发现重复的声明。但是，如果规则依赖于简写属性，后跟更具体的覆盖（反之亦然，例如 background-color 与 background），则更改声明顺序可能会改变哪个属性获胜。当您的规则不依赖于速记覆盖顺序时启用排序。
我也可以使用此工具 minify CSS 吗？
是的。单击 Minify CSS 按钮（或在设置面板中选择 Minify (Single-Line .min.css)）以去除注释、空格和尾随分号，并将颜色值压缩到紧凑的生产样式表中。
我的 CSS 代码是否上传到任何服务器？
不会。所有 CSS 格式化和缩小都可以使用 JavaScript 在浏览器本地 100% 运行。您的样式表永远不会离开您的计算机。