CSS 压缩：去注释空白、缩短颜色、合并选择器。体积小 30-60%。
- 本地处理
- 分类 格式转换
- 适合 把粘贴内容或本地文件转成更适合交付的格式。
压缩结果显示在这里。这个工具能做什么
在线 CSS 压缩工具。粘贴原始 CSS 得到生产级单行输出,一般体积比原文小 30-60%。每项优化都是独立开关可关闭：去注释（保留 /*! 重要注释 */ 如 License / 版权声明）、压缩空白、缩短 hex 颜色（#ffffff → #fff）、 rgb()/rgba() 完全不透明时转 hex、去掉 0 的单位（0px → 0）、去掉小数 前导零（0.5 → .5）、合并完全相同的四值 margin/padding 简写 （margin: 5px 5px 5px 5px → margin: 5px）、去掉每个 block 末尾多余的 `;`。tokenizer 与 CSS Formatter 共用,url、字符串、calc()、@media、 @keyframes、嵌套规则都能干净往返。输出下方实时显示压缩前 / 后 / 节省 百分比。100% 浏览器本地运行：设计 token、内部主题文件、未发布的 第三方 CSS 都不出标签页。想要还原回可读 CSS? 用我们的 CSS Formatter, 共用同一个 parser,可以无损往返。
工具细节
- 输入
- 文本 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 14 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 格式转换 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 压缩工具 适合怎么用
适合把内容从一种实际格式转成另一种可用格式。
适合转换的任务
- 把粘贴内容或本地文件转成更适合交付的格式。
- 放进大流程前,先预览转换结果是否可靠。
- 修正常见格式不匹配,不用打开完整编辑器。
转换检查项
- 源格式比较乱时,先拿一小段试转。
- 转换后检查编码、分隔符和换行符。
- 结果确认前保留原始内容。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
粘进营销邮件前压缩第三方样式表
邮件模板团队拿到一段第三方组件的 28KB 头图样式。Outlook 内联样式 超过约 16KB 就会静默截断,你把整段贴进来,保留 /*! 注释里的 License 头,得到 11KB 单行输出。这下进了内联预算,Outlook 2019 里头图正常渲染,之前被悄悄丢掉的页脚也回来了。
给博客里的 CodePen demo 瘦身让嵌入加载更快
你写了 540 行的 CSS demo,每个 keyframe 都加了详细注释。放进博客 嵌入时想让 JS 标签的体积尽量小。开启去注释、零值去单位、去前导零 三项,面板从 19KB 降到 8KB。在限速 3G 下,iframe 现在 200ms 内就 画完,而不是卡在加载上。
不起 build 也能跟 cssnano 比一比压缩率
同事说 cssnano 能把设计系统 CSS 压掉 40%,可你本地没配 build。把 1200 行的 token 文件贴进来,看输出下方的实时「节省 %」,默认开关 下拿到 37%。这下你带进 PR 讨论的是真实数字,而不是拍脑袋,还能看清 每项转换各自贡献了多少。
看清到底哪项优化在真正省字节
你怀疑自己这套配色里缩短 hex 几乎不起作用,真正省的是压缩空白。 把每项转换单独打开看「节省 %」跳动：单压空白就从 9400 字节降到 6100,而缩短 hex 只省了 80 字节。这下你清楚真正的赢面在结构压缩, 而不是改写颜色,可以放心关掉有风险的那几项。
常见踩坑
一把删光所有注释,结果丢了必须保留的 License 横幅。保持开启「保留 /*! 注释」,把横幅写成 /*! ... */,这样 MIT 或 Apache 声明才能在压缩后留住。
以为压缩会合并重复规则。它刻意不重排、不跨规则合并,所以 `.a{color:red}.a{color:red}` 会原样保留两条。想去重请在源文件里改。
压缩依赖字面 `0px` 这种 IE hack 的 CSS,结果布局崩了。先关掉「去零值单位」再跑,这样 `margin:0px` 不会被折叠成 `margin:0`。
隐私说明
全部在你的浏览器标签里运行。你粘贴的 CSS 用 JavaScript 在本地解析和 压缩,不会上传到任何服务器。输入不会写进 URL,所以设计 token、内部 主题文件、未发布的第三方 CSS 即便你复制了页面链接也不会泄露。关掉 标签页就什么都不留。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。