CSS 压缩与美化工具
压缩 CSS 用于生产环境，或美化代码以提升可读性（100% 客户端处理）
CSS压缩器与美化器文档
这个工具是什么？
CSS 压缩从样式表中删除语法上不必要的字符而不改变其行为：规则之间的空白、换行符、CSS 注释（/* ... */）、右花括号前的多余分号以及某些值周围的可选引号。美化工具执行相反的操作——将串联或手动压缩的 CSS 重新格式化为一致的缩进和换行，以恢复调试和代码审查的可读性。
主要功能
- 空白和注释删除：删除所有规则间空白、换行和 /* */ CSS 注释。保留字符串字面量（如 font-family: “Courier New”）和 url() 值内的内容。启用“保留注释”选项时保留 /*! ... */ 版权注释块。
- 选择器和声明压缩：折叠选择器中的多个空格（div > span → div>span），删除 } 之前的最后一个分号，并对数值进行标准化（0px → 0，0.5 → .5）。
- 可配置的美化缩进：支持 2 空格、4 空格或制表符缩进输出；每行一条规则，声明在单独的缩进行上；保留 @media、@keyframes 和嵌套选择器结构。
- CSS 自定义属性感知：不压缩 var() 表达式或 calc() 空白（在某些浏览器中折叠 calc(2px + 3px) 中的空格为 calc(2px+3px) 可能会破坏解析）。
- 文件大小差异显示：在输出旁边显示原始字节数、压缩后字节数和压缩百分比，便于量化 CSS 优化对页面大小的影响。
常见用例
- 生产构建流程：将 CSS 压缩作为后处理步骤集成到 Webpack（css-minimizer-webpack-plugin）、Vite（内置 Lightning CSS）或 Gulp（gulp-clean-css）中。
- 调试压缩的第三方 CSS：将供应商提供的压缩 CSS（如 Bootstrap 5 bootstrap.min.css、Tailwind 输出）粘贴到美化工具中，检查规则结构和特异性链。
- 遗留样式表清理：在重构之前重新格式化缩进不一致和引号样式混合的手写 CSS。
- CDN 边缘缓存有效载荷减少：提供压缩的 CSS 可减少总传输字节并改善最大内容绘制（LCP）分数；非预压缩样式表通常减少 20-50%。
本工具的处理方式
空格移除
删除所有不必要的空格、换行符和制表符。CSS规则被压缩成单行而不影响功能。示例：`.btn { color: red; }` 变成 `.btn{color:red;}`
注释删除
删除所有CSS注释 (/* ... */)，除非启用了'保留注释'选项。使用 /*! ... */ 语法的重要许可证注释通常会被大多数压缩器保留。
冗余字符移除
消除不必要的分号（规则中最后一个属性）、运算符周围的空格和多余的零（0.5 → .5）。缩短颜色代码 (#ffffff → #fff)。
属性优化
删除大括号、冒号和逗号周围的空格。示例：`margin: 10px 20px;` 变成 `margin:10px 20px;`。注意：在 calc() 和其他需要空格的函数中保留空格。
文件大小影响
CSS 压缩通常可将手写样式表的文件大小减少 20-50%（具有标准注释密度）。框架输出（如完整的 Tailwind CSS 构建）可能只减少 5-15%。注释较多的开发者样式表可以减少 40-60%。在压缩基础上叠加 Gzip 可再减少 70-80% 的传输大小，使组合压缩+Gzip 成为标准生产交付方式。
| 场景 | 原始大小 | 压缩后 | 减少率 | Gzip后 |
|---|---|---|---|---|
| 格式良好且有注释的CSS | 50 KB | 25-30 KB | 40-50% | ~5-8 KB (总共85-90%) |
| 已经紧凑且注释很少的CSS | 30 KB | 24-27 KB | 10-20% | ~4-6 KB (总共80-85%) |
| 注释密集的文档CSS | 100 KB | 40-50 KB | 50-60% | ~8-12 KB (总共88-92%) |
相关工具
HTML压缩器与美化器
压缩或美化HTML代码，删除空白和注释以优化文件大小，或格式化代码以提高可读性
JavaScript压缩器与美化器
压缩或美化JavaScript代码，删除空白和注释以优化文件大小，或格式化代码以提高可读性
颜色选择器
在HEX、RGB、HSL、CMYK、YCbCr、Lab等格式之间转换颜色，生成配色方案，检查WCAG对比度
调色板生成器
专业调色板生成器，支持颜色混合、渐变创建、配色方案生成，导出CSS/SCSS/JSON等格式
图片Base64转换器
将图片转换为Base64编码，支持PNG、JPG、GIF、SVG、WebP等格式，可生成Data URI和CSS背景
文本差异对比器
比较两个文本或文件的差异，并排显示高亮变化