CSS 压缩CSS Minifier
把 CSS 一键压缩瘦身、还原美化、校验语法,上线前减小体积、调试样式更快。字符串与 url() 原样保留,/*! 许可证注释不丢,文件全程不上传。
工具介绍
3 段详细说明CSS 压缩是面向前端开发者的样式瘦身工具,集压缩、美化、语法校验三大功能于一体。把上线前的样式表、主题文件、组件样式粘贴进来,一键折叠空白、移除注释,直接减小文件体积。
所有处理都在浏览器内存中完成,文件不上传任何服务器。基于单遍扫描的自研词法分析器,"字符串" 与 url() 内容原样保留,/*! 许可证注释自动保留,零依赖、零打包,1 MB 以内处理几乎瞬时(< 100ms)。
相比 cssnano 等构建工具,本工具无需安装、打开网页即用,采用保守压缩策略——只动空白和注释、不改写任何属性值,压完样式渲染结果完全一致。支持 ⌘+↵ 快捷键压缩、一键美化还原阅读、导入导出文件。
基础知识 · CSS 压缩规则
CSS Syntax · 6 条规则CSS 压缩的本质是只删「不渲染」的内容。按 CSS 语法规范,以下 6 条规则决定了哪些空白能删、哪些必须保留:
whitespace空白折叠margin: 0 auto → margin:0 auto);标点({ } ; : ,)与组合器(> ~ +)前后的空白直接删除。descendant space后代空格保留div p 若压成 divp 就是另一个选择器了。同理 a :hover 与 a:hover 含义不同,该留的一个不少。comment注释移除与保留/* 注释 */ 默认删除(工具栏可关);/*! 开头的许可证注释自动保留——版权与来源声明丢不得,这也是 cssnano 等工具的社区约定。string & url字符串与 url() 原样保留"PingFang SC"、content: "a; b" 与 url(data:image/svg+xml;base64,...) 内部不做任何处理——里面的空格、分号、括号是内容的一部分,动了就变样。calc guardcalc 表达式保护+ 和 - 两侧的空格是语法必需的:calc(100% - 20px) 压成 calc(100%-20px) 就成了非法表达式。工具自动保留;乘除号两侧可安全紧写。semicolon分号精简color:red; 块尾最后一个分号可删(color:red});连续分号合并为一条(a;b;;c → a;b;c)。属性值本身一个不动,压缩零渲染差异。0px→0、#ffffff→#fff 这类数值改写——保守策略下,压完的文件渲染结果与源文件 100% 一致。/*! 许可证注释自动保留,版权信息不丢;普通注释可在工具栏一键关闭「去注释」保留。"字符串" 与 url(...) 内容原样保留——data URI 里的分号、逗号、空格不会被误当标点处理。calc(100% - 20px) 中 + - 两侧空格是语法必需的,工具自动识别保留,压缩后依然合法。gzip / brotli 传输压缩,CSS 体积还能再降 70% 以上——压缩 + 传输双重瘦身。使用说明
4 步快速入门使用场景
5 个真实案例部署前把样式表压缩到最小体积,减少首屏阻塞渲染的 CSS 传输量,Lighthouse 评分肉眼可见提升。
CSS 变量 + 多主题的样式表动辄上千行,压缩后再打包进小程序 / 邮件模板,轻松通过体积限制。
工具栏实时显示本次压缩的省体积百分比,压缩前后对比一目了然,优化效果可量化。
拿到压缩成一行的 min.css?点「美化」按选择器 / 声明重排缩进,样式结构一目了然。
花括号不配对、注释没闭合会在输出区给出「第 X 行 第 Y 列 + 💡修复建议」,交出去之前先过一遍。
常见问题
10 个问答CSS 压缩是什么?有什么用?
折叠空白、移除注释、精简标点,把 CSS 文件变小且不改变任何渲染结果。也支持反向美化(重排缩进)和花括号配对校验。
我的 CSS 会上传到服务器吗?
不会。所有解析在浏览器内存中完成,输入内容不上传任何服务器。可断网使用、关闭网络后再打开仍能正常使用。
压缩后样式会变吗?
不会。本工具采用保守压缩策略:只动空白、注释和标点,不做 0px→0、#ffffff→#fff 这类数值改写,压完渲染结果与源文件完全一致。
为什么 calc() 里的空格没有被删掉?
calc 表达式中 + 和 - 两侧的空格是语法必需的(calc(100% - 20px) 删掉空格就变成非法表达式)。工具会自动识别并保留这些空格;乘除号两侧空格可安全删除。
/*! 开头的注释为什么保留了?
/*! 是 CSS 社区约定的许可证注释(版权、来源声明),规范化工具默认保留。普通 /* 注释 */ 默认删除,工具栏关闭「去注释」后全部保留。
字符串和 url() 里的内容会被改动吗?
不会。"字体名"、content:"..." 与 url(data:image/svg+xml;base64,...) 的内容原样保留——它们里面的空格、分号、括号都有特殊含义,不能当作普通标点处理。
支持多大的 CSS 文件?
建议 ≤ 5 MB。单遍扫描零依赖,1 MB 以内几乎瞬时(<100ms)。超大文件建议先拆分再处理,避免浏览器渲染卡顿。
错误位置如何定位?
花括号不配对(缺失 / 多余)、注释未闭合、字符串未闭合时,输出区会给出「第 X 行 第 Y 列 + 出错原因 + 💡修复建议」,输入区自动选中出错字符、红框标出并滚动到位。
压缩能省多少体积?
取决于源码书写风格。手写缩进规范、注释多的样式表通常省 20%~40%;工具栏会实时显示本次压缩的省体积百分比,省多少一目了然。
与 cssnano / lightningcss 等构建工具有什么区别?
构建工具功能更多(数值简写、前缀合并等)但需要安装配置 Node 环境;本工具零安装、打开网页即可用,保守策略保证渲染结果零变化,适合临时处理、快速验证和小项目上线。