数据

CSS 压缩

访客每多下载一字节 CSS，页面首屏就要多等一会儿，而大多数样式表里都留着构建步骤本该清掉的余量，从缩进、注释，到写成长格式的颜色，再到本可以合并的规则。这个工具一次粘贴就能把它们全部去掉。你贴进一段样式，立刻拿回体积最小且效果等价的 CSS，原始、压缩后和 gzip 三个体积并排显示，省了多少一目了然。它会把 CSS 读成真正的语法树再处理，而不是简单地按空白切割，所以输出表现和源码完全一致；解析不了的地方会连同位置一并列出来，而不是悄悄丢掉。整套流程都在你的浏览器里完成。

517 B
节省 0%
正在加载压缩引擎
8%
压缩引擎只需下载一次，本次访问期间会被缓存。
选项

功能简介

一个压缩工具有用的前提，是你既能信任它的输出，又能看见收益。这个工具正是围绕这两点打造：可放心上线的精准压缩，以及证明它值得的数字。

  1. 01

    基于解析器的压缩

    在删除任何内容之前，先把样式表读成真正的语法树，因此注释、空白和冗余记号被清掉的同时含义保持不变。这里没有遇到怪异选择器或 data URI 就会出错的脆弱文本替换。

  2. 02

    更聪明的取值与颜色

    在安全的前提下折叠长格式取值。六位十六进制颜色缩成三位，零长度去掉单位，结尾分号和前导零一并消失。这些小处理在一张大文件上累加起来很可观。

  3. 03

    可选的规则重构

    开启重构可合并重复选择器、归并相邻规则并重排声明，换取更小的体积。当你希望输出与源码逐行对应时再关掉它。

  4. 04

    不会有东西悄悄消失

    解析器遇到语法错误时往往跳过读不懂的部分继续走，于是你拿到一个更小的文件，却收不到任何提示。这里每一处跳过都会带着行号列号列出来；写了嵌套的样式表也会被指出来，而不是把嵌套规则丢掉。

  5. 05

    可信的体积明细

    输入和结果各自带字节数与 gzip 体积，旁边是精确的节省百分比，可以同类相比。其中 gzip 这一对才和真正在网络上传输的大小相符。

  6. 06

    复制、下载或上传

    从剪贴板粘贴、从磁盘加载文件，然后复制结果或保存为 min.css 文件。整个回路只需几秒，且全程不碰服务器。

如何使用

几步就能把一张可读的样式表变成可上生产、体积最小的版本，全程把节省的数字摆在你面前。

  1. 01

    把 CSS 粘贴进输入面板，或用上传直接从磁盘加载文件。

  2. 02

    选择选项。想要最小输出就让重构优化保持开启，需要保留规则顺序时关掉它，发许可横幅就保留许可注释。

  3. 03

    对比两个面板标题栏里的体积，两侧各有字节数和 gzip 体积，旁边还有节省百分比。

  4. 04

    复制压缩后的 CSS，或下载为 min.css 文件，再接入负责生产样式的页面或构建步骤。

功能说明

这些细节让输出可放心上线、值得信任。

  • 基于 csso，一个成熟的 CSS 优化器，工作在完整的语法树上而不是靠文本替换。
  • gzip 体积用浏览器自带的压缩测量，所以这个数字反映的是真实服务器会发送的大小。
  • 停下输入的片刻之后压缩就会跑完，没有要按的按钮，也不用等服务器往返。
  • 解析器读不懂的部分会连同行号、列号和原因一起列出来，而不是从输出里凭空消失。
  • 不上传、不记录。你粘贴的 CSS，连同还没发布的内容，只留在浏览器里，关闭标签页就消失。

适合哪些场景

把 CSS 削到只剩本质，在这些场景里会回本。

  1. 让页面更快

    更小的样式表能更早抵达浏览器、解除渲染阻塞，有助于首次内容绘制以及搜索引擎看重的核心网页指标。

  2. 没有打包器时的构建步骤

    在静态站点、落地页或邮件模板里，你并没有跑打包器，把 CSS 贴到这里就能得到和流水线一样的压缩效果。

  3. 内联关键 CSS

    当你把页面顶部的样式内联进来以避免一次阻塞渲染的请求时，每一字节都要紧，而压缩版是唯一合理的嵌入形式。

  4. 精简生成的样式表

    厂商 CSS 和工具生成的输出常常是未压缩的。在它们抵达用户之前先过一遍这里，把字节省回来。

延伸阅读

脚本也想这么处理？把它和JavaScript 压缩搭配使用；而当你想要的是展开、整理代码而不是压缩时，SQL 格式化则是反方向的格式化。反过来对同一份样式表 —— 把挤成一行的东西还原成人能读的样子 —— 那是 CSS 格式化。

压缩 CSS 到底做了什么

压缩不是混淆，也和 gzip 压缩不是一回事。它在保持渲染结果一致的前提下，去掉浏览器并不需要的字符。下面是被去掉的东西，以及为什么这样做安全。

  1. 空白与排版

    让 CSS 易读的缩进、换行和空格对浏览器毫无意义。压缩会把它们连同每个右花括号前的最后一个分号一并去掉，因为解析器并不需要这些。

  2. 注释

    源码注释是写给人看的，永远不会出现在渲染页面里，因此被整体删除。唯一的例外是许可横幅，在你要求时工具会按约定保留它。

  3. 更短的等价取值

    很多取值有含义相同但更短的写法。白色十六进制从六位缩成三位，零像素长度变成一个普通的零，小数前面的零也会去掉。谨慎的压缩器只在结果完全一致时才应用这些变换。

  4. 合并与重构

    当两个选择器共享声明，或同一选择器出现两次时，它们的规则可以合并，相邻声明也可以重排。这能省下更多字节，但会改变源码的排布方式，所以保持为可选项。

  5. 为什么 gzip 才是关键数字

    服务器发送 CSS 时会用 gzip 或 brotli 压缩，而它们本就会合并重复的空白。压缩仍然有用，因为它去掉了压缩算法处理不了的内容，也给压缩器更干净的输入，但收益始终要看 gzip 体积，而不是原始字节。

  6. 生产环境压缩，源码保持可读

    压缩后的 CSS 很难编辑，所以它属于构建产物，而不该进仓库。用展开的版本来编写和提交，压缩只作为发布前的最后一步。

使用建议

这些习惯能让压缩后的 CSS 既小又不出意外。

  • 把压缩放在构建的最后一步并部署其结果。永远不要手改压缩后的 CSS，也不要把它当作源码提交。
  • 用 gzip 体积判断收益，因为那才是服务器实际传输的大小。很大的原始节省一旦套上压缩，可能就只剩一点点。
  • 上线前先看一眼跳过清单。列在那里的内容是解析器丢掉的，浏览器同样会忽略它们，通常是值得回到源码修掉的笔误。
  • 生产环境保持重构开启，但当你要对比输出、或需要选择器与顺序和源码一致时就关掉它。
  • 为压缩文件开启 gzip 或 brotli 并设置较长的缓存时间。压缩与传输压缩是叠加的，谁也不能替代谁。
  • 打包第三方 CSS 时用对应选项保留许可横幅，确保你在被要求遵守的条款范围内发布。

边界与注意事项

这个工具做什么，以及把什么留给其他步骤。

  • 它压缩单张合法的 CSS 样式表。它不会打包引入的文件、不解析 URL，也不会跟踪对其他文件的引用。
  • 不支持嵌套。压缩引擎在嵌套语法出现之前就写好了，会把嵌套的规则块删掉，所以遇到嵌套样式表时，它会指出第一处嵌套的位置而不是继续压缩。
  • 它不会加厂商前缀、不转译现代语法，也不为老旧浏览器做降级。需要这些请搭配 Autoprefixer 或 Lightning CSS。
  • 用 Sass、Less 等预处理器写的样式，或带 @apply 这类框架指令的样式，都要先编译成纯 CSS；工具会指出遇到的第一处，而不是绕着它压缩。
  • 解析器读不懂的写法会被跳过，而不是猜着处理，这和浏览器忽略它们的做法一致；每一处跳过都会标出位置，方便你看清什么没能留下。
  • 文件在浏览器里读取，因此上传上限是 2 MB。超过这个体积的样式表更适合交给构建步骤。

常见问题

关于压缩 CSS、它改了什么、以及何时使用的常见问题。

压缩会改变我的 CSS 渲染效果吗？

不会。压缩只去掉浏览器不需要的字符，比如空白、注释和多余分号，并把取值改写成含义完全相同的更短形式，渲染结果一模一样。可选的重构同样保持行为不变，只改变规则在内部的组织方式。

压缩和 gzip 有什么区别？

两者协同工作。压缩改的是 CSS 文本本身，去掉压缩算法无从判断为多余的内容。gzip 或 brotli 再压缩你发送的一切，在传输时折叠重复。两者你都想要，先压缩得到最干净的输入，再让服务器为传输做压缩。两个面板都会显示 gzip 体积，可以直接对比。

我的 CSS 能小多少？

完全取决于源码怎么写。注释多、排版宽松或重复度高的样式表，原始体积可能掉三分之一到一半，本就紧凑的 CSS 可能只省一点点。一旦算上 gzip，百分比会缩小，因为压缩已经把大部分空白收回去了，所以两侧 gzip 的对比才是诚实的那组数字。

它能压缩用了嵌套的 CSS 吗？

目前不能。这个工具背后的引擎写于嵌套进入 CSS 之前，会把每一个嵌套块删掉且不作声，让你拿到一份悄悄少了规则的样式表。与其把这样的结果交给你，它会识别出嵌套并指出第一处的位置。请先把嵌套展开，或者让支持嵌套的构建工具去压缩那份文件。

如果我的 CSS 有语法错误会怎样？

解析器会跳过读不懂的部分继续走，浏览器遇到写坏的声明也是这么做的。区别在于，这里每一处跳过都会带着行号、列号和原因列出来，于是少写一个冒号会变成一条提示，而不是一条不声不响消失的规则。如果什么都没留下，工具会直接告诉你，而不是给你一个空面板。至于根本不是纯 CSS 的输入，比如 Sass 或用了 @apply 的文件，工具会提示它需要先经过构建，而不是绕着它压缩。

我该把压缩后的 CSS 提交进仓库吗？

不该。压缩后的 CSS 是构建产物，不是源码。提交你和同事实际编辑的那份可读、展开的版本，把压缩文件作为发布前的最后一步生成。把压缩输出签入会让代码评审难以阅读、合并变得痛苦。

它会破坏我的变量、动画或媒体查询吗？

不会。自定义属性、关键帧、媒体查询与特性查询、层叠层、容器查询以及 calc 表达式都会被读取并保留。压缩理解语法，所以合法的写法都会原样留存。现代 CSS 里唯一读不了的是嵌套，遇到时工具会停下来，而不是把它弄丢。

我的 CSS 会被上传到什么地方吗？

不会。一切都在你的浏览器里运行。你粘贴的 CSS、上传的任何文件以及结果都在本地处理，绝不传输或存储，关闭标签页即刻消失，所以即便是私有或未发布的样式也很安全。

更多相关工具

继续探索数据与格式工具集的其余部分。