摘要:免费的 CSS 压缩工具,移除注释空白、简化颜色值、优化简写属性,显著减小 CSS 体积,本地运行。
本地工具可在 DevTools → Network 搜索输入内容,通常不会出现在请求中。
下一步
使用指南
CSS 里的注释与空白利于开发,上线却占带宽。本工具在浏览器本地压缩 CSS:可移除注释、缩短十六进制颜色、去掉多余空白,并显示字符数与 UTF-8 字节对比——适合单文件或抽出来的 style 块,不替代完整前端构建管线。
1. 压缩 CSS
粘贴样式,选择是否保留关键注释策略相关的选项,执行后对比字节数,复制到生产或再交给打包器。先在一页真实样式上验证渲染,再批量替换。
- 粘贴 CSS。
- 执行压缩并对比体积。
- 在目标页刷新验证。
2. 适用边界
单文件、邮件内联前的瘦身、排查「注释里藏了什么」很方便。大型项目仍应以 bundler/cssnano 等构建步骤为准,本页是补刀与应急,不是 CI 替代品。
3. 安全可删与必须留
空白与多数注释可删;但许可证头、某些 sourceMappingURL、以及依赖具体格式的黑客级 CSS(极少见)需要人工判断。压缩器不会理解业务含义,只做词法级缩小。
- 保留法律要求的许可证头。
- 压缩后做视觉回归。
- 怪异 CSS 黑客写法单独测。
4. 颜色与单位
缩短 #aabbcc 一类写法通常安全;不要期待它做跨浏览器的兼容语法降级——那是 autoprefixer 的活。单位与 calc 空格被去掉后,偶发旧环境差异要靠实测。
5. 和 JS/HTML 压缩
三位一体时常一起上线:HTML/JS/CSS 分工具处理。先保证功能,再追字节;过早压缩会让排障变难。
6. 验收
关键页面硬刷新看布局;注意伪元素内容字符串、属性选择器里的空格是否被误伤。有问题就对比压缩前后 diff。
常见问题
移除注释和多余空白、去掉块尾分号、把成对重复的十六进制颜色缩写(#ffffff → #fff,8 位的 #rrggbbaa → #rgba)、把 0px/0em 一类零值单位归约为 0(百分比除外)。字符串字面量与 calc() 等数学函数内部会被保护,不会被误改;页面同时显示字符数与 UTF-8 字节的前后对比。
不能,压缩不可逆,请保留原始文件。需要恢复可读格式时,可用代码格式化工具重新美化缩进,但注释和原始空白无法找回。
以 /*! 开头的许可证注释默认保留,法律要求的许可证头务必确认还在;某些 sourceMappingURL 和依赖特定格式的 hack 写法需要人工判断。压缩器只做词法级缩小,不理解业务含义。
适合单文件、抽出来的 style 块、邮件内联前的瘦身和应急处理。大型项目应以 bundler/cssnano 等构建步骤为准,本页是补刀,不是 CI 替代品。
在关键页面硬刷新看布局是否正常,留意伪元素 content 里的字符串和属性选择器中的空格是否被误伤;有问题就对比压缩前后的 diff。它也不做跨浏览器兼容语法降级——那是 autoprefixer 的职责。
不会。CSS 从粘贴到输出全程留在浏览器,压缩结果也不回传任何后端。
相关工具
相关文章
在线 CSS 压缩工具:减少 CSS 文件体积优化加载性能
学习如何压缩 CSS 代码以减小文件体积。了解 CSS 压缩的原理、可选安全变换(颜色缩短、零值单位、calc 保护),以及如何对照 UTF-8 字节节省评估收益。
CSS 单位分界:px、rem、em 各管什么,换算怎么不出错
px 转 rem 的公式与速查表、rem 与 em 的分界(root 相对 vs 父级相对)、62.5% 技巧的利弊、媒体查询里的 rem 陷阱、浏览器最小字号限制,附在线 CSS 单位换算工具。
在线 CSS 渐变生成器:创建漂亮的背景渐变效果
用可视化工具生成 linear / radial / conic 渐变:自定义角度、色标位置与透明度,一键复制 background CSS;附语法、配色与可访问性要点。