CSS 压缩
访客每多下载一字节 CSS，页面首屏就要多等一会儿，而大多数样式表里都留着构建步骤本该清掉的余量，从缩进、注释，到写成长格式的颜色，再到本可以合并的规则。这个工具一次粘贴就能把它们全部去掉。你贴进一段样式，立刻拿回体积最小且效果等价的 CSS，原始、压缩后和 gzip 三个体积并排显示，省了多少一目了然。它会把 CSS 读成真正的语法树再处理，而不是简单地按空白切割，所以输出表现和源码完全一致，而且整套流程都在你的浏览器里完成。
- 把样式表读成真正的语法树再处理，压缩后的表现和源码完全一致，不会因为某个少见的选择器而出错
- 原始、压缩后和 gzip 三个体积并排显示，让你以服务器真正发送的大小判断收益，而不是只看原始字节
- 可以合并重复选择器并重排声明换取更小的文件，也可以在你需要干净对比时保持结构不变
- 全程在浏览器里运行，你粘贴的 CSS 连同还没发布的内容都留在本机，关闭标签页就不再保留
功能简介
一个压缩工具有用的前提，是你既能信任它的输出，又能看见收益。这个工具正是围绕这两点打造：可放心上线的精准压缩，以及证明它值得的数字。
- 01
基于解析器的压缩
在删除任何内容之前，先把样式表读成真正的语法树，因此注释、空白和冗余记号被清掉的同时含义保持不变。这里没有遇到怪异选择器或 data URI 就会出错的脆弱文本替换。
- 02
更聪明的取值与颜色
在安全的前提下折叠长格式取值。六位十六进制颜色缩成三位，零长度去掉单位，结尾分号和前导零一并消失。这些小处理在一张大文件上累加起来很可观。
- 03
可选的规则重构
开启重构可合并重复选择器、归并相邻规则并重排声明，换取更小的体积。当你希望输出与源码逐行对应时再关掉它。
- 04
保留许可注释
许可与署名所要求的横幅可以留下，同时清掉其余所有注释，让你既合规又不会把没人读的注释打包上线。
- 05
可信的体积明细
原始、压缩后和 gzip 三个体积随输入更新，旁边是精确的节省百分比。其中 gzip 才是和真正在网络上传输的大小相符的那个数字。
- 06
复制、下载或上传
从剪贴板粘贴、从磁盘加载文件，然后复制结果或保存为 min.css 文件。整个回路只需几秒，且全程不碰服务器。
如何使用
三步把一张可读的样式表变成可上生产、体积最小的版本，全程把节省的数字摆在你面前。
- 01
把 CSS 粘贴进输入面板，或用上传直接从磁盘加载文件。
- 02
选择选项。想要最小输出就让重构优化保持开启，需要保留规则顺序时关掉它，发许可横幅就保留许可注释。
- 03
看选项下方的明细确认收益，那里有原始、压缩后和 gzip 三个体积以及节省百分比。
- 04
复制压缩后的 CSS，或下载为 min.css 文件，再接入负责生产样式的页面或构建步骤。
功能说明
这些细节让输出可放心上线、值得信任。
- 基于 csso，一个成熟的 CSS 优化器，工作在完整的语法树上而不是靠文本替换。
- gzip 体积用浏览器自带的压缩测量，所以这个数字反映的是真实服务器会发送的大小。
- 压缩随输入进行，没有要按的按钮，编辑与看到结果之间没有延迟。
- 解析错误会带着错误信息原地显示，而不是悄悄产出损坏或空的结果。
- 不上传、不记录。你粘贴的 CSS，连同还没发布的内容，只留在浏览器里，关闭标签页就消失。
适合哪些场景
把 CSS 削到只剩本质，在这些场景里会回本。
-
让页面更快
更小的样式表能更早抵达浏览器、解除渲染阻塞，有助于首次内容绘制以及搜索引擎看重的核心网页指标。
-
没有打包器时的构建步骤
在静态站点、落地页或邮件模板里，你并没有跑打包器，把 CSS 贴到这里就能得到和流水线一样的压缩效果。
-
内联关键 CSS
当你把页面顶部的样式内联进来以避免一次阻塞渲染的请求时，每一字节都要紧，而压缩版是唯一合理的嵌入形式。
-
精简生成的样式表
厂商 CSS 和工具生成的输出常常是未压缩的。在它们抵达用户之前先过一遍这里，把字节省回来。
延伸阅读
脚本也想这么处理？把它和JavaScript 压缩 搭配使用；而当你想要的是展开、整理代码而不是压缩时，SQL 格式化 则是反方向的格式化。
压缩 CSS 到底做了什么
压缩不是混淆，也和 gzip 压缩不是一回事。它在保持渲染结果一致的前提下，去掉浏览器并不需要的字符。下面是被去掉的东西，以及为什么这样做安全。
-
空白与排版
让 CSS 易读的缩进、换行和空格对浏览器毫无意义。压缩会把它们连同每个右花括号前的最后一个分号一并去掉，因为解析器并不需要这些。
-
注释
源码注释是写给人看的，永远不会出现在渲染页面里，因此被整体删除。唯一的例外是许可横幅，在你要求时工具会按约定保留它。
-
更短的等价取值
很多取值有含义相同但更短的写法。白色十六进制从六位缩成三位，零像素长度变成一个普通的零，小数前面的零也会去掉。谨慎的压缩器只在结果完全一致时才应用这些变换。
-
合并与重构
当两个选择器共享声明，或同一选择器出现两次时，它们的规则可以合并，相邻声明也可以重排。这能省下更多字节，但会改变源码的排布方式，所以保持为可选项。
-
为什么 gzip 才是关键数字
服务器发送 CSS 时会用 gzip 或 brotli 压缩，而它们本就会合并重复的空白。压缩仍然有用，因为它去掉了压缩算法处理不了的内容，也给压缩器更干净的输入，但收益始终要看 gzip 体积，而不是原始字节。
-
生产环境压缩，源码保持可读
压缩后的 CSS 很难编辑，所以它属于构建产物，而不该进仓库。用展开的版本来编写和提交，压缩只作为发布前的最后一步。
使用建议
这些习惯能让压缩后的 CSS 既小又不出意外。
- 把压缩放在构建的最后一步并部署其结果。永远不要手改压缩后的 CSS，也不要把它当作源码提交。
- 用 gzip 体积判断收益，因为那才是服务器实际传输的大小。很大的原始节省一旦套上压缩，可能就只剩一点点。
- 生产环境保持重构开启，但当你要对比输出、或需要选择器与顺序和源码一致时就关掉它。
- 为压缩文件开启 gzip 或 brotli 并设置较长的缓存时间。压缩与传输压缩是叠加的，谁也不能替代谁。
- 打包第三方 CSS 时用对应选项保留许可横幅，确保你在被要求遵守的条款范围内发布。
边界与注意事项
这个工具做什么，以及把什么留给其他步骤。
- 它压缩单张合法的 CSS 样式表。它不会打包引入的文件、不解析 URL，也不会跟踪对其他文件的引用。
- 它不会加厂商前缀、不转译现代语法，也不为老旧浏览器做降级。需要这些请搭配 Autoprefixer 或 Lightning CSS。
- 用 Sass 或 Less 等预处理器写的样式必须先编译成纯 CSS，因为这里只理解标准 CSS。
- 遇到语法错误会停止压缩并报告，而不是猜着绕过去，所以严重损坏的输入不会产出残缺结果。
常见问题
关于压缩 CSS、它改了什么、以及何时使用的常见问题。
压缩会改变我的 CSS 渲染效果吗？
不会。压缩只去掉浏览器不需要的字符，比如空白、注释和多余分号，并把取值改写成含义完全相同的更短形式，渲染结果一模一样。可选的重构同样保持行为不变，只改变规则在内部的组织方式。
压缩和 gzip 有什么区别？
两者协同工作。压缩改的是 CSS 文本本身，去掉压缩算法无从判断为多余的内容。gzip 或 brotli 再压缩你发送的一切，在传输时折叠重复。两者你都想要，先压缩得到最干净的输入，再让服务器为传输做压缩。真实收益看这里显示的 gzip 数字。
我的 CSS 能小多少？
完全取决于源码怎么写。注释多、排版宽松或重复度高的样式表，原始体积可能掉三分之一到一半，本就紧凑的 CSS 可能只省一点点。一旦算上 gzip，百分比会缩小，因为压缩已经把大部分空白收回去了，这正是 gzip 数字更诚实的原因。
我该把压缩后的 CSS 提交进仓库吗？
不该。压缩后的 CSS 是构建产物，不是源码。提交你和同事实际编辑的那份可读、展开的版本，把压缩文件作为发布前的最后一步生成。把压缩输出签入会让代码评审难以阅读、合并变得痛苦。
它会破坏我的变量、动画或媒体查询吗？
不会。自定义属性、关键帧、媒体查询和特性查询、calc 表达式以及其余现代 CSS 都会被读取并保留。压缩理解语法，所以合法的写法都会原样留存。
我能在这里压缩 Sass 或 Less 文件吗？
不能直接压缩，因为这个工具处理的是标准 CSS。请先把 Sass 或 Less 编译成纯 CSS，多数项目会在构建里做这件事，再把输出粘贴或上传到这里压缩。
我的 CSS 会被上传到什么地方吗？
不会。一切都在你的浏览器里运行。你粘贴的 CSS、上传的任何文件以及结果都在本地处理，绝不传输或存储，关闭标签页即刻消失，所以即便是私有或未发布的样式也很安全。