CSS压缩工具

CSS压缩工具是一款免费工具，可删除 CSS 中不必要的字符，并返回压缩后的样式表以及压缩前后的字符数。

CSS 压缩有什么作用？

CSS 压缩会移除浏览器不需要的格式，从而减少样式表的字符数。通常会删除缩进、换行、注释，以及标点符号周围可省略的空格。

浏览器仍会收到 CSS 规则、选择器和声明值。预期的视觉效果应保持不变，同时传输到浏览器的文件会更小。压缩 CSS 样式表的实际收益取决于原始文件、HTTP 压缩和浏览器缓存。如果样式表本身已得到充分压缩，实际传输的字节数可能只会小幅减少。

你可以在部署前压缩 CSS，也可以借此检查体积过大的第三方 CSS，或了解开发时的格式排版给文件增加了多少内容。压缩并不等同于优化，后者可能会删除未使用的选择器、合并等效规则或重写声明。本工具不声称会执行这些更广泛的操作。

如何使用 CSS压缩工具？

将样式表粘贴到 CSS 字段并运行工具，然后把 压缩的CSS 结果复制到相应的构建或部署流程中。请保留可读的 CSS 源文件，不要用压缩后的副本永久替换它。

1. 先准备网站或应用正在使用的 CSS 源文件。
2. 压缩前确认 CSS 能够被正确解析。
3. 将内容粘贴到 CSS 字段并运行工具。
4. 对比 CSS字符 和 压缩的CSS字符。
5. 在预发布页面上测试结果，包括响应式状态、打印样式和交互组件。

CSS 压缩在服务器上完成。你提交的 CSS 会通过 HTTPS 传输到服务器，并且不会被存储。如果样式表中包含机密 URL、内部主机名或其他敏感信息，请先确认将其发送给服务器端工具是否符合你所在组织的数据处理政策。

如何查看压缩结果？

结果中包含转换后的 CSS 和两项字符数，方便你检查输出内容并直接了解减少了多少字符。CSS字符 表示提交文本的长度，压缩的CSS字符 表示压缩后的长度。

字符数由支持多字节字符的长度函数计算，不能将其视为网络传输大小的精确预测。UTF-8 字符可能占用多个字节，Brotli 或 gzip 压缩也可能显著改变通过 HTTP 发送的数据大小。

本工具没有单独提供验证结果或错误字段，因此不能将它当作 CSS 验证器使用。大括号不匹配、缺少冒号、字符串未闭合、注释格式错误或嵌套无效等常见问题，需要使用浏览器开发者工具、代码检查工具或支持标准规范的验证器进行检查。无效 CSS 的输出可能看起来依然很紧凑，但实际效果未必符合预期。

简单的 CSS 压缩示例

常规压缩会移除格式，同时保留规则本身。

CSS

p { color: red; }

压缩的CSS

p{color:red}

在这个示例中，易读的输入包含 17 个字符，压缩后的内容包含 12 个字符。引号内字符串中的空格和标点符号属于值的一部分，必须保留。

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

压缩的CSS

.notice,.warning{color:#c00;margin:0 1rem}

直接删除所有空格并不安全。空白字符可能代表后代组合器，calc() 等函数中的算术运算符也有空白要求。字符串、数据 URL、转义标识符和自定义属性值同样需要根据语法处理。

带重音符号的字符和非拉丁字符可以出现在字符串中，在符合 CSS 标识符规则的前提下，也可以用于选择器。数字、小数点、百分号和单位都属于语法，而不是装饰性文本，因此不能在不了解声明含义的情况下直接缩短。空样式表没有可压缩的 CSS。对于非常大的样式表，使用构建阶段的压缩工具通常比通过在线表单复制文本更容易重复执行和审查。

哪些情况下不值得压缩 CSS？

如果文件已经压缩过，或本来就是以紧凑形式生成的生产资源，通常不值得再次压缩。第二次压缩 CSS 可能几乎无法减小体积，甚至完全没有效果，却会给发布流程增加一道转换步骤。

• 如果 CSS 只供浏览器或构建系统读取，不要先将其格式化，再重新压缩。
• 不要用压缩代替清理框架中未使用的规则或重复声明。
• 不要指望通过字符数减少发现阻塞渲染的请求、缓存问题或字体加载缓慢。
• 不要丢弃格式化后的源文件，尤其是在调试选择器优先级、级联层或媒体查询时。

如果 CSS 会自动打包，请在该流程中使用压缩工具，确保每次发布都采用相同设置。手动部署相关资源时，可以使用 HTML压缩工具和 JS压缩工具，对相应文件类型执行同类操作。

常见问题

压缩 CSS 会改变选择器优先级吗？

正确的压缩不会改变选择器优先级，因为选择器应保留相同的组成部分和顺序。不过，如果源文件使用了转义、新版伪类，或较旧压缩工具无法理解的生成语法，仍应仔细核对复杂选择器。

CSS 自定义属性也能压缩吗？

可以包含自定义属性，但其中的值可能需要保留某些语法单元和空格，以便之后通过 var() 替换。对于包含计算、回退值或嵌入字符串的声明，请在项目支持的浏览器中进行测试，不要假定所有看似多余的空格都可以删除。

工具会生成 source map 吗？

结果中没有列出 source map。如果生产环境调试需要将压缩后的 CSS 映射回 Sass、Less 或其他源文件，请在了解原始文件结构的编译器或打包工具中生成压缩文件及其 source map。

输出中会保留许可证注释吗？

不要假定 CSS 注释一定会被保留。如果依赖项的许可证要求分发代码时附带声明，请单独保留该声明，或在发布前检查生成的输出。

压缩能修复有问题的 CSS 吗？

不能。压缩只会删除不必要的字符，无法修复无效选择器、不受支持的属性、缺失的资源或错误的级联关系。请先在源文件中解决解析警告和视觉回归问题。

部署前检查

将压缩结果另存为独立的生产资源，确认 URL 和引号内的内容完整无误，然后在打开浏览器控制台的情况下，将其加载到预发布页面。分别在较窄和较宽的视口尺寸下检查有代表性的页面，最后确认服务器使用了预期的内容类型、缓存策略和 HTTP 压缩。