免费转换器

CSS 压缩工具

在浏览器中即时压缩CSS样式表。删除注释、折叠空白、减小文件大小。免费且私密。

将CSS文件拖放至此

支持.css文件,或在上方粘贴CSS代码。

关于此工具

CSS 缩小会从样式表中删除空格、注释和不必要的字符,以在提供给浏览器之前减小其大小。实际的规则没有改变:缩小的样式表以与未缩小的源相同的方式呈现页面。节省的成本来自于删除换行符、多余的分号、注释、十六进制颜色速记机会和零单位快捷方式(用 0 替换 0px)。

在具有数十种样式规则的现代网站上,与未缩小的源相比,典型的减少量为 20-40%。与服务器上的 gzip 压缩相结合,边际节省会缩小——gzip 已经有效地压缩了重复的文本——但这种组合仍然胜过单独的压缩,特别是当样式表被缓存并多次提供给许多访问者时。

该压缩器一次性处理 CSS,删除 url() 值之外的注释,折叠空白,删除右大括号之前的多余分号,应用零单位速记,并在可能的情况下将六位十六进制颜色转换为三位数形式(#ffffff → #fff)。输出仍然有效,任何浏览器都可以正确解析。

为什么要缩小 CSS

较小的 CSS 文件加载速度更快,渲染阻塞时间也会减少,这两者都会提高“首次内容绘制”和“最大内容绘制”分数。对于 Core Web Vitals 影响搜索排名的网站来说,削减每一千字节的渲染阻塞 CSS 都是值得的。

带宽成本在规模上也很重要。当样式表缩小 30% 时,提供数百万页面浏览量的网站可以节省可观的出口量。 CDN 账单、移动数据使用量和能源消耗均略有受益。缩小本质上是免费的——一次性构建步骤,无需维护成本。

使用方法

粘贴CSS,得到缩小版。

  1. 粘贴你的CSS: 将 .css 文件拖放到输入区域或将 CSS 源粘贴到输入区域。缩小器接受任何有效的 CSS — 现代语法,包括 CSS 变量、calc()、grid 和 flexbox。
  2. 选择选项: 默认值会删除注释、折叠空格并应用常见的快捷方式。如果需要保留注释或特定格式,您可以禁用特定转换。
  3. 缩小: 缩小器遍历 CSS,应用每个启用的转换。输出是功能相同的 CSS,但尺寸减小了。
  4. 使用输出: 复制或下载。将构建输出中的源 CSS 替换为缩小版本,或者将缩小作为工具中的构建步骤运行。

常见用例

技术细节

CSS 缩小主要是保守的空白删除。选择器、声明和值中重要的空白会被保留;外部的空白被折叠。注释除非以 /* 开头,否则将被删除! (许可证保存评论)。

常用快捷键:0px、0em等类似的零单位值变为0;带有配对数字的六位十六进制颜色(#ffffff、#336699)变为三位数(#fff、#369); } 之前的最后一个分号被删除。颜色名称不会自动转换为十六进制,因为十六进制有时会更长(红色的长度比 #f00 短;#ff0000 比红色长)。

输出应该通过任何接受输入的 CSS 验证器。浏览器支持保持不变——缩小不会修改规则本身,只会修改它们的文本表示形式。

最佳实践

常见问题

CSS 缩小会删除什么?
空格(空格、制表符、换行符)、注释 (/* ... */)、不必要的分号、冗余零 (0.5 → .5)、速记优化 (#ffffff → #fff) 和冗余单位 (0px → 0)。
缩小版 CSS 在生产中使用安全吗?
是的。缩小保留所有 CSS 规则、选择器和属性值。输出在功能上是相同的——浏览器以完全相同的方式解释它。这是所有生产网站的标准做法。
我预计尺寸会减少多少?
对于编写良好的 CSS,通常为 20-50%。带有详细格式的大量注释代码可以看到更大的减少。已经紧凑的 CSS 可能只会缩小 10-15%。
如果我使用 gzip,我应该缩小 CSS 吗?
是的,两者都有。 Gzip 压缩重复的模式,而缩小则删除不必要的字符。它们一起提供比单独使用更好的压缩效果。缩小 + gzipped CSS 通常比原始文件小 85-95%。
我应该总是缩小吗?
对于生产来说是的。对于开发源文件来说,没有——可读的CSS对于维护来说是必不可少的。在构建时运行缩小,而不是在编辑时运行。
我的 CSS 是否已上传到服务器?
不会。压缩器在您的浏览器中运行。
这与 cssnano 或 csso 相比如何?
cssnano 和 csso 是用于生产构建的 PostCSS 插件;它们提供了更积极的转换,例如合并冗余规则。该工具涵盖了无需构建设置即可临时使用的基本缩小。
缩小会破坏源映射吗?
缩小不会生成源映射;该工具仅产生最小化的输出。要在生产中调试缩小的 CSS,请在构建过程中生成源映射。