CSS格式化工具把压缩成一整行的样式表重新排版,或者反过来把带缩进、注释的CSS压成一行。浏览器本地跑,不上传代码。常见场景:从CDN下载的bootstrap.min.css只有1行、约20万字符,编辑器里根本没法读,粘进来选"格式化"、缩进2空格,立刻变成可折叠的层级结构;改完再切"压缩",去掉注释和空白,体积能回到原始min文件的±1%以内。写样式时也可以用它统一缩进风格,避免团队里2空格和4空格混用。
| 对比维度 | 本工具 | 手工/替代做法 |
|---|---|---|
| 处理12KB CSS耗时 | 约0.2秒,点一下出结果 | 手工删空格换行约5-10分钟,还容易漏 |
| 压缩率 | 去注释+空白,通常省20%-40% | 只删换行约省10%,注释还在 |
| 缩进一致性 | 统一2/4空格或Tab,全文件一致 | 多人协作常混用2空格和4空格 |
| 大文件可读性 | 20万字符的min.css展开成层级树 | 编辑器里一行到底,基本没法读 |
| 隐私 | 本地JS处理,无网络请求 | 在线网站可能上传到服务器 |
典型项目里,去掉注释、换行、多余空格和最后分号,体积通常减少20%-40%。例如一份12KB的手写CSS,压缩后约7.5KB;已经min过的文件再压只能省1%-3%,因为可去的空白已经没了。gzip之后差距更小,所以别指望压缩CSS能替代gzip。
不会。工具只处理空白、注释和分号,不改选择器名、属性名和值。但要注意:压缩会删掉/* */注释,如果你用注释做hack(比如/*! 保留 */),需在压缩选项里勾选保留感叹号注释,否则会被一并删除。
支持标准@规则,包括@media、@supports、@keyframes、@font-face、@import。缩进会按嵌套层级递进,@media内的规则比外层多一级。原生CSS嵌套(&选择器)也能正确缩进,但工具不做语法校验,写错的嵌套会原样输出。
1MB以内的CSS基本在0.5秒内完成,因为解析在浏览器主线程做。超过2MB(约等于未压缩的bootstrap加几个组件库)可能卡顿1-2秒。如果文件超过5MB,建议先用构建工具拆分,或只粘贴要改的那一段。
不会。整个解析和输出都在浏览器里用JavaScript完成,没有网络请求,断网也能用。你可以打开开发者工具的Network面板验证:点格式化按钮时不会产生任何XHR或fetch。关掉页面,代码就没了,不留缓存。
不能完全恢复。压缩是有损的:注释、换行位置、属性间的空格都丢了,格式化只能按规则重新缩进,无法还原你原来的排版习惯。所以建议保留源文件,压缩版只用于部署。若只想要可读版本,直接对源文件格式化即可。
适用范围:标准CSS 2.1及CSS Nesting、@layer等较新语法,不处理SCSS/LESS的变量和mixin,遇到$var或@mixin会原样保留但不解析。压缩只做空白和注释层面的处理,不做属性合并、颜色缩写等优化,所以压缩率有上限。所有计算在浏览器本地完成,代码不上传、不落盘,关闭页面即清除。