免费CSS压缩器：在线压缩和优化CSS代码
CSS压缩器可自动删除代码中的注释、空格和换行等多余空白字符，并将十六进制颜色值缩短为更短的表示形式，通常能将CSS文件大小平均减少百分之二十到四十。全部处理均在浏览器本地完成，代码不会上传到任何服务器，有助于提升网站加载速度和整体前端性能表现，免费且无需注册。
CSS 压缩器
即时压缩 CSS 代码，将文件大小减少最多 40%，提高网站加载速度。
关于 CSS 压缩
CSS 压缩可以在不改变功能的情况下从 CSS 文件中删除不必要的字符，从而减小文件大小并提高网站性能。
- 删除注释、空白和换行符
- 消除不必要的分号和零单位
- 优化颜色值和声明
- 提高页面加载速度和搜索引擎排名
文档
什么是 CSS 压缩器？
CSS 压缩器是一种通过删除浏览器不需要的字符来缩小 CSS（层叠样式表）文件的工具。它会移除注释、多余空格和换行符，并缩短一些常见写法，同时不改变页面外观。这样得到的文件更小，浏览器可以更快地下载和解析。
CSS 压缩的工作原理
Web 开发者会在 CSS 中编写注释、缩进和空行，因为这些内容便于阅读和编辑。浏览器会忽略所有这类格式。压缩器会删除这些内容，以及其他一些对视觉效果没有作用的字节，生成适合用于生产环境而非编辑的紧凑文件。
此工具会进行以下更改：
- 移除注释。 每个
/* ... */块都会被删除。 - 合并空白。 规则之间连续的空格、制表符和换行会被删除；如果空格具有语义，则缩减为一个空格（例如后代选择器中
.parent与.child之间的空格）。 - 删除标点符号周围的空白。
{、}、:、;和,附近的空格都会被删除。 - 移除多余分号。 重复的分号会合并为一个，结束
}前的最后一个分号会被删除。 - 缩短十六进制颜色值。 当六位颜色值中的每一对数字都相同时（红、绿、蓝三组均相同），类似
#ffffff的颜色会变为#fff。带有 alpha 通道的八位颜色值（如#ffaa00cc）在四组数字都分别相同时，也会以相同方式缩短。 - 删除零长度值的单位。
0px、0em和0rem会变为0。百分比值会保留不变，因为0%并不总能与普通的0互换（例如在flex-basis或@keyframes的步骤中）。 - 删除小数前的前导零。
0.5会变为.5。
为避免损坏文件，此工具会原样保留三类内容：引号内的文本、未加引号的 url() 中的值，以及 calc()、clamp()、min() 和 max() 等数学函数中的内容。calc(100% - 20px) 内的空格会影响浏览器的处理，因此工具会完全保留这些空格。
此工具不会合并重复的选择器、删除空的规则块，也不会将 rgb() 颜色转换为十六进制。这些是其他工具可以执行的有效优化，但此压缩器只专注于上面列出的更改。
缩减百分比公式
此工具会以百分比报告文件缩小了多少：
1reduction % = ((original length − minified length) / original length) × 100
2两个长度都按字符数计算。结果四舍五入到小数点后两位。
计算示例
原始 CSS（193 个字符）：
1/* Navigation Styles */
2.nav-menu {
3 display: flex;
4 justify-content: space-between;
5 padding: 20px 0px;
6 background-color: #ffffff;
7}
8
9.nav-item {
10 margin-right: 15px;
11 color: #000000;
12}
13压缩后的输出（129 个字符）：
1.nav-menu{display:flex;justify-content:space-between;padding:20px 0;background-color:#fff}.nav-item{margin-right:15px;color:#000}
2应用公式： (193 − 129) / 193 × 100 = 33.16%。注释消失了，缩进和换行也消失了，0px 变成了 0，#ffffff/#000000 变成了 #fff/#000。
具体百分比取决于输入内容。注释较少且编写紧凑的 CSS，缩减幅度较小。注释很多、缩进层次很深的 CSS，缩减幅度可能更大。使用此工具压缩的典型样式表通常可缩减约 20% 至 40%。
如何使用此工具
- 将 CSS 代码粘贴到左侧的输入框中。
- 压缩版本会自动显示在右侧，无需按任何按钮。
- 查看输出上方显示的缩减百分比。
- 选择“复制到剪贴板”以复制压缩后的 CSS，然后将其粘贴到项目文件中。
- 选择“清除”以清空两个文本框并重新开始。
在工具中输入的内容不会发送到服务器；压缩过程在浏览器中运行。
何时压缩 CSS
开发团队通常会在构建流程中压缩 CSS，使用 Webpack 或 npm 脚本等工具，使这一更改在每次部署前自动完成。可读且带有注释的源文件会保留在版本控制中；只有生产构建版本会被压缩。压缩后的 CSS 常见于以下场景：
- 大型网站，例如在线商店；样式表更小意味着页面加载更快。
- 单页应用，使用 React 或 Vue 等框架构建，CSS 会与 JavaScript 一起打包。
- 移动网页，因为用户更可能使用速度较慢的网络连接。
- HTML 电子邮件，其大小通常受到严格限制。
CSS 压缩与页面速度
更小的 CSS 文件下载和解析速度更快，可以缩短页面变得可见之前的等待时间。Google 曾表示，页面速度是搜索排名所使用的信号之一，因此，更快的页面可能只是网站在搜索结果中表现的众多因素之一。仅靠压缩并不能保证排名发生变化；它只是多项优化措施之一，其他措施还包括图像压缩和服务器响应时间优化。
CSS 压缩器与 CSS 美化器
压缩器会为生产环境压缩代码。美化器则相反：它会将压缩后的 CSS 重新格式化，加入缩进和换行，使人能够再次阅读。美化器无法恢复在压缩过程中删除的注释或原始变量名，因为这些信息一旦删除就不复存在。
常见问题
CSS 压缩后能缩小多少？ 使用此工具通常可缩减 20% 至 40%，具体取决于原始文件中的注释、空行和缩进数量。原本格式内容就很少的文件，缩减幅度会较小。
压缩 CSS 会改变页面外观吗？
不会。压缩只会删除浏览器会忽略的字符，例如注释和多余空白，并改写少数等价的值（如将 #ffffff 改为 #fff）。页面的渲染效果保持不变。
是否应在开发过程中压缩 CSS？ 不应这样做。编写和调试代码时，应保留可读且带有注释的版本。只压缩要发送到生产服务器的副本，通常将其作为构建流程中的自动步骤。
压缩后的 CSS 能恢复为原始文件吗？ 美化器可以为压缩后的 CSS 重新添加缩进并进行格式化，但无法恢复已删除的注释，也无法恢复压缩版本中从未保留的描述性名称。应保留原始源文件。
此工具会将 rgb() 颜色转换为十六进制，或合并重复的选择器吗？
不会。它会缩短十六进制颜色值并删除不必要的字符，但不会改写 rgb()/hsl() 值，也不会合并重复的选择器。其他一些压缩器会执行这些额外步骤。
压缩与 gzip 压缩相同吗？ 不相同。压缩会直接从源代码中删除不必要的字符。Gzip（或 Brotli）压缩则由 Web 服务器在发送文件时应用，使用的是另一种算法。两者结合使用，可以使文件在网络传输中的体积最小。