CSS 压缩

如何使用CSS 压缩

关于CSS 压缩的常见问题

CSS 压缩会上传我的样式表吗？

不会。CSS 压缩全程在你的浏览器里完成，样式表不发到任何服务器，后台主题、内网项目的 CSS 都可以放心粘。本页只把开关偏好记在本机 localStorage，CSS 内容和结果一律不落盘；结果只当纯文本显示，不会应用到页面上，所以里面的 @import、url() 和字体地址也不会被请求。

手机上能用 CSS 在线压缩吗？

能。CSS 在线压缩是纯网页实现，手机、平板、电脑浏览器打开即用，免安装免注册。窄屏上输入框、开关和结果框上下排列，每个开关整行都可以点；压缩完可以直接复制结果，或下载成 .min.css 文件。

CSS 压缩后样式会失效吗？

默认规则只删多余的字符、不挪动任何规则：后代选择器的空格、a :hover 前的空格、calc() 里加减号两侧的空格、and ( 前的空格都会保留；IE hack（*zoom、_height、\9、progid 滤镜、expression）所在的声明只压空白不做值优化。仍不放心的话，把四项值优化逐项关掉对比结果，问题出在哪一项一眼就能看出来。

CSS 压缩会把 calc() 里的空格删掉吗？

不会。calc() 里加号和减号两侧的空格是语法要求，calc(100% - 2px) 写成 calc(100%-2px) 整条声明就失效了，所以这两处空格一律保留；括号内侧与逗号后的空格才会删。calc() 等括号里的 0px 也不会去掉单位，因为 calc(0 + 1em) 同样是无效写法。

CSS 压缩为什么有的 0px 没变成 0？

这是刻意的。只有括号外、属性不是 flex 或 flex-basis、单位是长度单位（px、em、rem、vw 等）的 0 才去单位。0s、0ms、0deg 这类时间和角度单位去掉后整条声明失效；0% 是百分比，在 flex-basis 等属性里与长度 0 的算法不同；calc() 与 translate() 等括号里的 0px 一律不动；flex-basis 写成无单位的 0 在老版 IE 与 Safari 上有兼容问题。

CSS 压缩能保留版权注释吗？

能。以 /*! 开头的注释是开源许可证约定的保留注释，不论「删除注释」开没开都原样保留，位置也不变；普通注释才会被删。想把全部注释都留下，关掉「删除注释」即可，此时注释两侧的空白照样压缩。

CSS 压缩会合并重复的选择器吗？

不会。把两条相同选择器的规则合并、把声明相同的选择器并到一起，都会改变规则在样式表里的先后顺序，而 CSS 的层叠正是按先后决定谁生效的，这是压缩出 bug 的头号来源。本工具的契约是只删多余字符、不挪任何东西，也不改 bold、none 这类关键字。

CSS 压缩能省多少体积？开了 gzip 还要压吗？

用本页「填入示例」那份样式表实测：430 字节压到 321 字节，省 25.3%；各自 gzip 之后是 346 字节对 290 字节，仍然少 16.2%。服务器开了 gzip 时收益会变小但不归零，两者可以叠加；而且浏览器解析的是解压后的文本，字符越少解析越快。

CSS 压缩支持 SCSS 和 LESS 吗？

能压空白，但不编译：不展开嵌套、不求值变量，#{} 与 @{} 插值原样保留。SCSS 与 LESS 的 // 行注释连同其后的换行原样保留，否则下一行会被注释吞掉，结果旁会给出提示。想得到真正可上线的 CSS，建议先用预处理器编译，再把编译结果拿来压缩。

CSS 压缩支持多大的文件？

单次上限约 2MB（按 UTF-8 字节计），常见的主题样式表、组件库 CSS 都够用。200KB 以内边输入边压缩；超过 200KB 会关掉自动压缩，改成选好开关后点「开始压缩」，gzip 估算在结果出来后再算；超过 2MB 会直接提示，请拆分后再来。

CSS 压缩后怎么还原成多行？

把压缩结果贴进下方相关工具里的「CSS 格式化」，就能按大括号层级重新展开缩进。被删掉的普通注释回不来，缩写过的颜色和数字也会保持缩写后的样子；需要保留注释的话，压缩前先关掉「删除注释」。

CSS 去空格：哪些空格不能删

CSS 去空格并不是把空白全删光。下面这些位置的空格是语法的一部分，删了样式就会变成别的意思或直接失效， 本工具一律保留；其余的缩进、换行、大括号分号逗号两侧、选择器组合符两侧的空格才会删掉。

字符串里的空格同样一个不动：content: " / " 的两侧双空格、url( "img/bg 1.png" ) 括号里的空格都原样保留；自定义属性 --gap: 8px 12px 只去掉首尾空白，中间逐字符原样。

CSS 压缩时哪些 0 不能去掉单位

「去掉 0 值单位」只在数值不变、且所有浏览器都认的地方生效：括号外、长度单位、属性不在跳过表里。 下面这些 0 看起来可以省，实际一省就出问题，本工具刻意保留：

另外三项值优化同样有边界：CSS 颜色缩写只把每两位相同的六位 / 八位十六进制色改短（#FFFFFF → #fff），选择器里的 #aabbcc 是 ID 不动，progid: 滤镜里的八位 ARGB 不动；精简数字遇到 1e3 这类科学计数法原样跳过； 删除空规则不删空的 @layer、@keyframes、@font-face， 因为空的 @layer 声明了层的顺序，空的 @keyframes 会覆盖同名动画。

CSS 代码压缩为什么不合并规则

有些压缩器会把相同选择器的规则合并、把声明相同的选择器并到一起，号称能再省几十字节。问题是 CSS 的层叠按「后写的赢」决定，合并会改变规则的先后顺序。最小的例子：

/* 原文：.b 写在 .a 后面，同时带两个类的元素是蓝色 */
.a { color: red }
.b { color: blue }
.a { margin: 0 }

/* 把两条 .a 合并成一条后：顺序变了，同一个元素变成红色 */
.b { color: blue }
.a { color: red; margin: 0 }

所以本工具的 CSS 代码压缩只删多余的字符、不挪任何东西：不合并规则、不删被覆盖的重复声明、 不把 margin 四个方向并成简写，也不改关键字（border:none 与 border:0 并不总是一回事）。

CSS 文件压缩体积实测：开了 gzip 还要不要压

用页面里「填入示例」那份 430 字节的样式表，分两种设置实测（gzip 为 level 6 估算值）：

默认设置省下的 109 字节拆开看：注释 24、空白 66、分号 3、值优化 8、空规则 8——大头是空白与注释，值优化本身只占几个字节。 gzip 本来就擅长压缩重复的缩进，所以开了 gzip 之后 CSS 压缩的收益会缩水，但不会归零：示例里 gzip 后仍少 16.2%。没有 gzip 的场景收益最直接，比如邮件模板里的 style、塞进 JS 字符串或 JSON 配置的样式、小程序与嵌入式设备的内置页面。

样式表压缩能做什么、不做什么

英文资料里这类工具叫 CSS minifier 或 CSS compressor，搜 CSS minify、minify CSS online 找到的都是同一件事； 本页的区别是 CSS 压缩不上传、规则保守且每一项值优化都能单独关掉，账本会把省下的每个字节归到来源上。 要把压缩过的代码重新展开，用下方相关工具里的 CSS 格式化。

相关教程

遇到格式选择、乱码或校验问题，可以先看这些说明再动手处理。

• 问题解答图片和文件转 Base64 怎么用？DataURL 用法说明讲清图片、文本、文件转 Base64 与 DataURL 的常见用法、体积变化、URL-safe 区别，以及什么时候不该把文件塞进 Base64。