跳至内容
🛠️
Whiz Tools

免费CSS压缩器：在线压缩和优化CSS代码

CSS压缩器可自动删除代码中的注释、空格和换行等多余空白字符，并将十六进制颜色值缩短为更短的表示形式，通常能将CSS文件大小平均减少百分之二十到四十。全部处理均在浏览器本地完成，代码不会上传到任何服务器，有助于提升网站加载速度和整体前端性能表现，免费且无需注册。

CSS 压缩器

即时压缩 CSS 代码，将文件大小减少最多 40%，提高网站加载速度。

0 个字符
0 个字符

关于 CSS 压缩

CSS 压缩可以在不改变功能的情况下从 CSS 文件中删除不必要的字符，从而减小文件大小并提高网站性能。

  • 删除注释、空白和换行符
  • 消除不必要的分号和零单位
  • 优化颜色值和声明
  • 提高页面加载速度和搜索引擎排名
加载计算器...
📚

文档

什么是 CSS 压缩器？

CSS 压缩器是一种通过删除浏览器不需要的字符来缩小 CSS（层叠样式表）文件的工具。它会移除注释、多余空格和换行符，并缩短一些常见写法，同时不改变页面外观。这样得到的文件更小，浏览器可以更快地下载和解析。

CSS 压缩的工作原理

Web 开发者会在 CSS 中编写注释、缩进和空行，因为这些内容便于阅读和编辑。浏览器会忽略所有这类格式。压缩器会删除这些内容，以及其他一些对视觉效果没有作用的字节，生成适合用于生产环境而非编辑的紧凑文件。

此工具会进行以下更改：

  • **删除注释。**CSS 只有一种注释形式，即/* ... */，每个这样的注释块都会被删除。
  • 合并空白。 规则之间连续的空格、制表符和换行会被删除；如果空格具有语义，则缩减为一个空格（例如后代选择器中 .parent 与 .child 之间的空格）。
  • 删除标点符号周围的空白。 {、}、:、; 和 , 附近的空格都会被删除。
  • 移除多余分号。 重复的分号会合并为一个，结束 } 前的最后一个分号会被删除。
  • **缩短十六进制颜色。**当红、绿、蓝每一对数字都相同时，六位颜色（如#ffffff）会变成#fff。CSS Color 规范规定，三位形式就是将六位形式中的每个数字重复一次，因此#123等于#112233。带透明度的八位颜色（如#ffaa00cc），当四对数字都相同时，也以同样方式缩短。
  • 去掉零长度值的单位。0px、0em、0rem 以及其他零长度值都会变成0。CSS Values 规范指出，零长度值的单位标识符是可选的。百分数值保持不变，因为0%并不总能与单纯的0互换（例如在flex-basis或@keyframes的某一步中）。
  • 删除小数前的前导零。 0.5 会变为 .5。

为避免破坏文件，该工具会保护三类内容：引号内的文本、不带引号的url()中的值，以及calc()、clamp()、min()和max()等数学函数的内容。在calc()中，+和-运算符两侧必须有空白，因此calc(100% - 20px)会保留其空格。工具只会把此处连续的多个空格压缩为一个空格。这些函数内部的单位会保留，所以calc(100% - 0px)保持不变。

此工具不会合并重复的选择器、删除空的规则块，也不会将 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 缩减幅度可以更大。

如何使用此工具

  1. 将 CSS 代码粘贴到左侧的输入框中。
  2. 压缩版本会自动显示在右侧，无需按任何按钮。
  3. 查看输出上方显示的缩减百分比。
  4. 选择“复制到剪贴板”以复制压缩后的 CSS，然后将其粘贴到项目文件中。
  5. 选择“清除”以清空两个文本框并重新开始。

在工具中输入的内容不会发送到服务器；压缩过程在浏览器中运行。

何时压缩 CSS

开发团队通常会在构建流程中压缩 CSS，使用 Webpack 或 npm 脚本等工具，使这一更改在每次部署前自动完成。可读且带有注释的源文件会保留在版本控制中；只有生产构建版本会被压缩。压缩后的 CSS 常见于以下场景：

  • 大型网站，例如在线商店；样式表更小意味着页面加载更快。
  • 单页应用，使用 React 或 Vue 等框架构建，CSS 会与 JavaScript 一起打包。
  • 移动网页，因为用户更可能使用速度较慢的网络连接。

CSS 压缩与页面速度

较小的 CSS 文件下载和解析都更快，这可以缩短页面变得可见之前的时间。Google 表示，其排名系统会使用 Core Web Vitals，同时也指出并不存在单一的网页体验信号，它会使用多种信号。页面更快，可能是影响网站在搜索结果中表现的一个小因素。仅靠压缩并不能保证排名发生变化；它只是多项优化措施之一，其他措施包括图片压缩和服务器响应时间。

CSS 压缩器与 CSS 美化器

压缩器会为生产环境压缩代码。美化器则相反：它会将压缩后的 CSS 重新格式化，加入缩进和换行，使人能够再次阅读。美化器无法恢复在压缩过程中删除的注释或原始变量名，因为这些信息一旦删除就不复存在。

常见问题

CSS 压缩后能缩小多少？ 这取决于原始文件中有多少注释、空行和缩进。上面的示例缩小了33.16%。本来就很少格式化内容的文件，缩减幅度会更小。

压缩 CSS 会改变页面外观吗？ 不会。压缩只会删除浏览器会忽略的字符，例如注释和多余空白，并改写少数等价的值（如将 #ffffff 改为 #fff）。页面的渲染效果保持不变。

是否应在开发过程中压缩 CSS？ 不应这样做。编写和调试代码时，应保留可读且带有注释的版本。只压缩要发送到生产服务器的副本，通常将其作为构建流程中的自动步骤。

压缩后的 CSS 能恢复为原始文件吗？ 美化器可以为压缩后的 CSS 重新添加缩进并进行格式化，但无法恢复已删除的注释，也无法恢复压缩版本中从未保留的描述性名称。应保留原始源文件。

此工具会将 rgb() 颜色转换为十六进制，或合并重复的选择器吗？ 不会。它会缩短十六进制颜色值并删除不必要的字符，但不会改写 rgb()/hsl() 值，也不会合并重复的选择器。其他一些压缩器会执行这些额外步骤。

压缩与 gzip 压缩相同吗？ 不相同。压缩会直接从源代码中删除不必要的字符。Gzip（或 Brotli）压缩则由 Web 服务器在发送文件时应用，使用的是另一种算法。两者结合使用，可以使文件在网络传输中的体积最小。

参考文献

  1. W3C。CSS Syntax Module Level 3。CSS Syntax 第 3 级 — 唯一的注释语法是/* ... */。
  2. W3C。CSS Color Module Level 4。CSS Color 第 4 级 — 3位和4位十六进制颜色分别等于将每个数字重复一次的6位和8位形式。
  3. W3C。CSS Values and Units Module Level 4。CSS Values 第 4 级 — 零长度值的单位是可选的；在calc()中，+和-两侧必须有空白。
  4. Google Search Central。Understanding page experience in Google Search results。网页体验 — Google 的排名系统会使用 Core Web Vitals。