CSS 美化与压缩
CSS Beautifier & Minifier
格式化或压缩 CSS,不重排任何声明,原本的记号序列一个不动。
把样式表美化到能读,或者在你想让它更小时精简它。两个方向每次运行都对照记号流检查,所以输出就是你的样式表换了空白,别的什么都没变——不合并简写,不缩短颜色,不重排规则。
CSS 输入
拖入 .css 文件
在这个标签页里读取,不上传。
整理结果
规则
5
选择器
9
声明
9
At 规则
1
自定义属性
2
怎么用
粘贴 CSS 或拖入文件
嵌套的 at 规则、自定义属性、`:is()` 和现代选择器都能解析。面板下方的统计栏会随你输入统计规则、选择器、声明和自定义属性的数量。
按你用的布局美化
缩进宽度、一行一个选择器还是几个、规则之间是否空一行、注释保留还是丢弃。样式表之间真正有分歧的就是这四件事。
或者压缩,并保留许可证头
`/*!` 这个约定标记一条必须在压缩后存活的注释。开关会遵守它,前/后/节省的数字则告诉你这件事到底值不值得做。
常见问题
为什么它不把 `#ffffff` 缩成 `#fff`?
因为每一种「安全」的改写都存在某张让它不安全的样式表。缩短颜色、合并简写、重排声明、删掉「多余」的规则,每一项都会在某处改变行为,而一个悄悄弄坏页面的压缩器比一个省得少的更糟。反正 gzip 会把大部分差距补回来。
它报告的「词法问题」是什么?
分词器看不懂的地方——没闭合的注释、一直跑到文件末尾的字符串、多出来的花括号。它们带着字节偏移报出来,格式化器继续往下走,因为有一条坏规则的样式表仍然值得读。
它会加浏览器前缀吗?
不会。加前缀需要一个浏览器支持目标和一份每个属性需要什么的数据库,两者都每月在变。那是 Autoprefixer 的活,而且要诚实地做需要一个构建步骤。
含有分号的 URL 能挺过去吗?
能——`url(dots;grid.png)` 和 `content: "{ not a block; }"` 字符串都被分词为单个值,而不是在内部的标点上被切开。页面上的示例里正是因为天真的格式化器会弄错才放了这个例子。
可以从这些接进来
雪碧图打包
Sprite Sheet Packer
把多张图片拼进一张图集,同时输出对应的 CSS 或 JSON 坐标表。
HTML 美化与压缩
HTML Beautifier & Minifier
格式化或压缩 HTML,保留内联元素,是否折叠空白可选。
JavaScript 美化与压缩
JavaScript Beautifier & Minifier
只删注释和空白来压缩 JavaScript 或 TypeScript,不改任何名字;也能把挤成一行的打包产物重新缩进,让它重新可读。
CSS 渐变生成
CSS Gradient Builder
拖动色标做出线性、径向和锥形渐变,并按 sRGB 或 OKLCH 输出 CSS。
接下来
这些工具吃得下当前工具的产出,结果可以直接送过去。
CSS 变量提取
CSS Token Extractor
从样式表里把颜色、间距、圆角和字体值抽出来,并提议一套自定义属性。
HTML 美化与压缩
HTML Beautifier & Minifier
格式化或压缩 HTML,保留内联元素,是否折叠空白可选。
JavaScript 美化与压缩
JavaScript Beautifier & Minifier
只删注释和空白来压缩 JavaScript 或 TypeScript,不改任何名字;也能把挤成一行的打包产物重新缩进,让它重新可读。
SVG 转 CSS 数据 URI
SVG to CSS Data URI
把 SVG 编码成可用作 CSS 背景的 data URI,只转义非转义不可的字符,把体积压到最小。
Base64 编码解码
Base64 Encoder & Decoder
对文本和文件做 Base64 与 Base64URL 编解码,UTF-8 处理正确。
curl 转代码
curl to Code
把一条 curl 命令转成 fetch、axios、Python requests、Go、PHP 或 PowerShell 代码。