压缩CSS
删除注释和空白，缩短数值。如果压缩器无法处理文件中的某些内容，它会明确告诉您——而不是悄悄交回一个缺了规则的样式表。
- 绝不存储
- 无需排队，无需等待
- 无需注册，无水印
压缩后的CSS将显示在这里。
使用方法
粘贴CSS
也可以直接拖入文件。不存储任何内容。
查看结果
您会得到压缩后的样式表和缩小的幅度——或者一段说明，解释哪些内容无法处理。
复制或下载
可直接放进您的构建流程。
字节究竟省在哪里
大部分节省来自空白和注释，而在手写样式表中这部分非常多——缩进、规则之间的空行，以及让大文件便于浏览的分节标题，一旦上线就全是额外开销。除此之外，数值会以不改变含义的方式缩短：颜色#ffffff变成#fff，0px变成0（零不需要单位），0.5em的前导零被去掉，margin: 10px 10px 10px 10px合并为margin: 10px。
有意不做的是有风险的那一类。合并声明相同的规则或调整规则顺序，会改变层叠——而层叠正是CSS中两条优先级相同的规则按先后顺序决出胜负的机制。激进调整顺序的压缩器会产出更小的文件，在大型样式表中却会带来细微不同的页面。重复的声明也常常是有意保留的，作为不认识第二条声明的旧浏览器的后备。
嵌套规则和新式媒体查询范围语法会被拒绝处理，而不是强行压缩，原因值得说明，因为这与大多数工具的做法相反。背后的解析器早于这两项特性，遇到不认识的内容时不会报错——而是悄悄删掉，嵌套块直接从输出中消失，页面丢失了样式却没有任何提示。拒绝处理文件才是诚实的做法。如果您的样式表用了原生嵌套或@media (400px <= width <= 700px)，请使用下面介绍的工具。
和标记一样，请以压缩传输之后的结果来衡量。样式表以gzip或brotli压缩后传输，这些算法本来就非常擅长处理重复的空白——所以一个压缩了30%的文件，实际传输时可能只缩小5%。节省是真实的，只是比表面数字小。
如果您需要的是别的
Lightning CSS是处理现代样式表的合适工具：它支持嵌套、媒体查询范围、颜色函数以及近几年新增的一切，压缩力度胜过所有老工具，还能顺便把新语法转译成旧浏览器能用的写法。esbuild --minify style.css几乎同样出色，而且速度极快。两者都应放在构建流程里，而不是浏览器标签页里。
收益大得多的做法通常是删除没用到的规则。基于实用类框架或组件库搭建的网站，发布的样式表里往往大部分内容从未匹配页面上的任何元素——PurgeCSS或框架自带的构建能把它削减一个数量级。压缩没用的CSS只是让没用的CSS变小；删掉它们才是真正的解决办法。
常见问题
我的CSS会被存储吗？
不会，对源代码来说这正是关键。不存储任何内容，也没有任何服务器能看到它。把专有源代码粘贴到会将其发送到某处的在线压缩工具中，就等于泄露，无论网站声称如何保留数据——而这恰恰是人们在匆忙中不假思索就会做的事。
为什么它拒绝处理我的文件？
因为压缩它会丢失规则。本页背后的压缩器诞生于2022年，不认识如今已成为常规CSS的两样东西。遇到原生嵌套——写在另一条规则内部的规则，无论是否带"&"——它会返回外层规则，并悄悄丢掉嵌套的那条。遇到新式媒体查询范围，例如@media (width >= 400px)，它会返回一个空样式表。两种情况都不会报错。我们在实际使用的版本上对这两种情况都做了测试，认为交给别人一个缺了样式的样式表比拒绝处理更糟，所以会检测并拒绝这两种情况。此外还会在压缩前后统计规则数量作为通用检查，以防还有尚未被发现的第三种情况。
那嵌套CSS该怎么压缩？
先把嵌套编译掉。所有支持嵌套的构建工具——Sass、PostCSS、Lightning CSS或您的打包工具——都会在构建时把嵌套展平，展平后的输出可以在这里顺利压缩。如果您手写嵌套并直接上线，就等于依赖一项当前浏览器已支持、但压缩工具生态尚未完全跟上的特性。
它具体做了什么？
删除注释和空白，缩短颜色值（#ffffff变成#fff，#ff0000变成red），去掉不必要的单位和分号，并合并可以安全合并的内容。它不会删除它认为没用到的规则——那需要了解您的HTML，猜错了就会删掉您需要的样式。
能缩小多少？
手写CSS通常能缩小15–30%。构建工具已经编译过的输出往往接近最小，几乎不会变化。服务器上的gzip效果比压缩代码更明显；两者效果会叠加。
在这里压缩生产环境的样式表安全吗？
安全。不存储任何内容，并且无法处理的两种情况会被拒绝，而不是被悄悄破坏，所以返回的要么是正确结果，要么是拒绝处理的原因说明。
小贴士： 嵌套规则和新式媒体查询范围语法会被拒绝处理，而不是强行压缩。本压缩器基于一个早于这两项特性的解析器，它遇到不认识的内容不会报错，而是悄悄删掉——嵌套块会直接从输出中消失。在该解析器跟上之前，拒绝处理文件才是诚实的做法。
把这个工具放到您的网站上
博客、课程页面或帮助文章均可免费使用。粘贴一段代码，访客就能直接在您的页面上使用。