DEV

CSS 压缩器 — 在浏览器中压缩 CSS 以减小文件体积

通过去除空白、注释和冗余声明来压缩 CSS，完全在浏览器中运行。无上传、无账号、无限制。

● 本地运行 · 在您的标签页中生成页面加载以来工具发出的网络请求：0 次

CSS Minifier

Minify and compress CSS code. Works entirely in your browser — no uploads.

Paste CSS

您可能还需要

排序行 MD5 哈希 UUID 生成器 JSON 转 CSV Base64 编码 PDF 拆分 HAR 转 cURL TOML 工具 .env 助手 MsgPack 检查器 PDF 压缩 PDF 转 EPUB

打开压缩器

CSS 压缩属于那种听起来不该有影响的任务之一 —— 网上每个 CSS 字节都是浏览器不必解析的字节，现代连接每秒能送几 MB —— 但字节会累加。一个典型的网页会发 50 到 200 KB 的 CSS，其中 20% 到 40% 是浏览器忽略的空白、注释和冗余声明。压缩把所有这些剥掉，留下级联相同、特异性相同、计算样式相同、渲染相同的 CSS。减少的体积就是免费性能：更小的 CSS 文件解析更快、应用更快，对网站的性能预算消耗更少。

压缩中「不那么显然」的一点是，什么算冗余。安全 preset（这里的默认）只做最明显的事：剥注释、折叠空白、去掉末尾分号、缩短十六进制颜色（#ffffff → #fff）。激进 preset 走得更远：合并相同选择器的规则（h1, h2 { color: red; } 和 h1, h2 { font-weight: bold; } 合并成一条）、删除空规则、去掉前导零（.5em 而不是 0.5em）、在语义等价时把展开属性合并成简写属性。激进 preset 对纯 CSS 是安全的，但会破坏某些预处理器输出和一些老式 hack —— 覆盖源文件前先在副本上测试。

最终的交接：如果目标是给生产环境发 CSS，让输出过一遍真正的构建流水线（esbuild、Vite、Webpack）—— 这些工具一次完成合并、压缩、自动加前缀和 tree-shake。本浏览器工具适合一次性压缩、调试单个文件、或检视压缩器对你未写的 CSS 做了什么。如果目标是提取 critical CSS（渲染首屏内容所需的最小 CSS 集合），那是另一种工具 —— 像 PurgeCSS 或 Critters 这样的 tree-shaker 会扫描 HTML，只抽取真正用到的规则。

使用方法

粘贴你的 CSS
把 CSS 粘到输入区，或者通过文件选择器加载 .css 文件。压缩器接受任何合法 CSS —— 厂商前缀、自定义属性、媒体查询和现代选择器都被处理。
选择压缩强度
安全（默认）只去除空白和注释，保留每一条规则。激进还会折叠成单行声明、合并相同选择器的规则、移除空规则。两种设置语义等价。
复制或下载结果
把压缩后的 CSS 复制到剪贴板，或下载为 .min.css 文件。下载按钮上方显示体积减少百分比，方便验证收益。

常见问题

压缩会改变渲染输出吗？

不会。压缩后的 CSS 与原始 CSS 产生完全相同的级联、特异性和计算样式。唯一的变化是去除空白、剥离注释、缩短声明 —— 这些对浏览器都不可见。

压缩后能小多少？

手写 CSS 通常能缩小 20% 到 40%，框架输出（Bootstrap、Tailwind）缩小 10% 到 20%。注释多、空白多的样式表能缩小 50% 甚至更多。

这与 CSS 打包器有什么区别？

打包器（Webpack、Vite、esbuild）把多个 CSS 文件合并成一个并处理 import。压缩器（本工具）减小单个 CSS 文件的体积。大多数构建流水线两步都跑：先打包，再压缩打包后的文件。

包含 source map 吗？

不包含 —— 压缩后的 CSS 默认不带 source map。对生产调试，在你的构建流水线中生成 source map（cssnano 或 esbuild 的 `--source-map` 标志），并把它与 .min.css 文件分开保存。

对 Tailwind 或 Bootstrap 输出也有效吗？

有效 —— 压缩器作用于普通 CSS，与生成方式无关。Tailwind 和 Bootstrap 输出已经很紧凑，所以额外收益较小（10% 到 20%），不像手写 CSS 那么明显。

限制说明

不输出 source map压缩后的 CSS 不包含 source map。对生产调试，在你的构建流水线中生成。本压缩器适合一次性压缩场景，不是完整的构建配置。
不处理 CSS-in-JSStyled-components、Emotion 等 CSS-in-JS 库产出内嵌 CSS 字符串的 JavaScript。本压缩器只处理纯 CSS。先把 JS 过一遍 JS 压缩器，或用支持 CSS-in-JS 的构建工具。
不自动加前缀厂商前缀（-webkit-、-moz-、-ms-）原样保留。如果输入来自老代码库含手动前缀，先过一遍 autoprefixer 来去掉对当前浏览器基线不再需要的前缀。

平台说明

macOS: 命令行等价是 `npx csso-cli input.css -o output.min.css`。本浏览器工具适合不值得为此安装 Node 和 csso 包的一次性压缩场景。
Windows: PowerShell 不能原生压缩 CSS。本浏览器工具适合临时工作；构建流水线用 npm 上的 clean-css 或 csso 包。压缩算法与 clean-css 的 safe preset 匹配。
Linux: GNU coreutils 没有 CSS 压缩器。标准 CLI 等价是 `npx clean-css-cli input.css -o output.min.css`。本浏览器工具适合从聊天或文档页粘贴内容的场景。
Web: 完全在客户端运行。页面加载后离线可用。驱动 safe preset 的 clean-css 库与 npm 包使用同一代码路径，同一输入产生同一输出。