跳到正文

CSS 美化与压缩

CSS Beautifier & Minifier

格式化或压缩 CSS,不重排任何声明,原本的记号序列一个不动。

把样式表美化到能读,或者在你想让它更小时精简它。两个方向每次运行都对照记号流检查,所以输出就是你的样式表换了空白,别的什么都没变——不合并简写,不缩短颜色,不重排规则。

🔒 完全在你的浏览器里运行cssformatminifyweb
模式
缩进

CSS 输入

拖入 .css 文件

在这个标签页里读取,不上传。

整理结果

规则

5

选择器

9

声明

9

At 规则

1

自定义属性

2

怎么用

  1. 粘贴 CSS 或拖入文件

    嵌套的 at 规则、自定义属性、`:is()` 和现代选择器都能解析。面板下方的统计栏会随你输入统计规则、选择器、声明和自定义属性的数量。

  2. 按你用的布局美化

    缩进宽度、一行一个选择器还是几个、规则之间是否空一行、注释保留还是丢弃。样式表之间真正有分歧的就是这四件事。

  3. 或者压缩,并保留许可证头

    `/*!` 这个约定标记一条必须在压缩后存活的注释。开关会遵守它,前/后/节省的数字则告诉你这件事到底值不值得做。

常见问题

为什么它不把 `#ffffff` 缩成 `#fff`?

因为每一种「安全」的改写都存在某张让它不安全的样式表。缩短颜色、合并简写、重排声明、删掉「多余」的规则,每一项都会在某处改变行为,而一个悄悄弄坏页面的压缩器比一个省得少的更糟。反正 gzip 会把大部分差距补回来。

它报告的「词法问题」是什么?

分词器看不懂的地方——没闭合的注释、一直跑到文件末尾的字符串、多出来的花括号。它们带着字节偏移报出来,格式化器继续往下走,因为有一条坏规则的样式表仍然值得读。

它会加浏览器前缀吗?

不会。加前缀需要一个浏览器支持目标和一份每个属性需要什么的数据库,两者都每月在变。那是 Autoprefixer 的活,而且要诚实地做需要一个构建步骤。

含有分号的 URL 能挺过去吗?

能——`url(dots;grid.png)` 和 `content: "{ not a block; }"` 字符串都被分词为单个值,而不是在内部的标点上被切开。页面上的示例里正是因为天真的格式化器会弄错才放了这个例子。

可以从这些接进来

接下来

这些工具吃得下当前工具的产出,结果可以直接送过去。