CSS 压缩

粘贴样式表,拿回压缩后的版本。输入框下方的计数显示压缩前后的体积,你能直接看出这么做值不值。

代码不会离开此页面:格式化在你的浏览器中完成。

使用方法

  1. 把 CSS 粘贴到第一个输入框——输入时即刻压缩。
  2. 对比输入框下方显示的体积。
  3. 复制结果,或点击「格式化」重新读它。

实用说明

哪些内容会被去掉

注释、换行、缩进、冒号和组合符两侧的空格,以及每个右花括号前那个标准从未要求过的分号。选择器中分隔后代与祖先的那个空格会保留,因为去掉它就改变了规则的匹配范围。

为什么不动字符串

content: "a;b" 里的分号,以及内联 SVG data URI 里的花括号,在正则表达式看来都像是结构。基于模式匹配的压缩器会悄悄毁掉这类文件,而后果往往表现为线上少了一个图标。这个工具逐字符读取样式表,把带引号的字符串整块搬过去。

常见问题

样式表的行为完全不变吗?

不变。没有任何东西被重命名、重排或删除——去掉的只有空白和注释,两者都不影响规则如何生效。

文件会小多少?

手写的样式表通常能少两到三成。启用 gzip 之后差距会小得多,因为压缩本来就处理重复空白。

代码会发送到服务器吗?

不会。整个过程在页面内完成,这对尚未公开的样式表很重要。

之后还能重新读吗?

点击「格式化」,样式表会按每行一条声明重新展开。原来的注释已经没有了,但规则一条不少。

相关工具