🗜️
免费 CSS 压缩与美化工具
压缩 CSS 以减小文件体积，或美化压缩后的 CSS 以提高可读性。即时，在浏览器中完成。
加载后可离线使用
或把 .css 文件拖到下方
把 .css 文件拖到这里，或点击选择文件
CSS · 在你的设备上处理
或按 Ctrl+V 从剪贴板粘贴
输入 CSS
输出 CSS
输出将显示在此处…
常见用途
- 用于生产部署的CSS最小化在部署到生产环境之前减少CSS文件大小——更快的页面加载和更低的带宽成本。
- 美化最小化的CSS以进行调试将压缩或最小化的CSS格式化为可读代码，以便检查和调试样式。
- 电子邮件模板的CSS最小化为HTML电子邮件模板压缩CSS，其中文件大小和内联样式膨胀很重要。
- WordPress主题的CSS最小化减少自定义WordPress主题样式表的大小，以获得更好的PageSpeed得分。
- 美化CSS以供代码审查将任何CSS文件格式化为干净、缩进、可读的代码，准备好供审查和协作。
工作原理
此工具使用完全用 JavaScript 构建的手写零依赖 CSS 分词器——没有外部库、没有服务器调用。分词器在应用任何转换之前，会将每个字符分类为代码、注释、引号字符串或 url() 值，从而防止空白规则破坏字符串内容、data URI 或 calc() 表达式。
- 1分词阶段输入的 CSS 逐字符扫描并拆分为类型化的记号：原始代码片段、/* ... */ 注释、引号字符串（保留转义序列）和 url(...) 块。这确保下一步的转换只作用于真正的 CSS 语法——绝不会触及字符串字面量或 data URI 的内容。
- 2压缩或美化在压缩模式中，普通注释会被删除（保留 /*! license */ 注释），代码记号中连续的空白压缩为单个空格，{ } : ; , > ~ 等标点周围的空白会被移除。+ 和 - 周围的空格被刻意保留，以免破坏 calc() 表达式。在美化模式中，代码先被压缩为干净的基线，再重新分词并以两个空格的深度跟踪重新缩进，同时检测声明冒号，以区分 property: value 中的冒号和 a:hover 这样的选择器冒号。
- 3Gzip 大小估算生成输出后，使用浏览器原生的 CompressionStream API 以 gzip 压缩结果并测量字节数。这能给出与启用 gzip 压缩的 Web 服务器在网络上实际传输大小相符的估算。
- 4复制或下载处理后的 CSS 通过 Clipboard API 写入剪贴板，或使用 MIME 类型为 text/css 的 Blob 下载为 styles.min.css（压缩模式）或 styles.css（美化模式）。输入时会实时显示体积缩减百分比。