🎨 CSS 压缩器
压缩CSS代码，移除空白、注释和优化CSS属性，减小文件体积
什么是CSS压缩工具？
CSS压缩工具（CSS Minifier）是一种将CSS样式表中的冗余字符（空格、换行、注释等）去除，从而减小文件体积的在线工具。在生产环境中，CSS文件体积直接影响页面加载速度——每减少1KB的CSS，页面渲染时间就可能减少数毫秒。CSS压缩通过移除人类可读但机器不需要的格式化字符，可以将文件体积减小40%-60%。配合Gzip/Brotli服务器压缩后，传输体积还能进一步减少。本工具在移除冗余字符的同时保证CSS语义不变，支持CSS3所有语法特性，包括自定义属性、嵌套规则、calc()表达式等。
如何使用CSS压缩工具
- 粘贴CSS代码 — 将需要压缩的CSS代码粘贴到输入框中，支持完整的样式表或部分代码片段。
- 配置压缩选项 — 可选择是否移除注释、是否合并重复选择器、是否缩短颜色值等。
- 获取压缩结果 — 点击压缩按钮，查看压缩后的代码和体积对比（原始大小 vs 压缩后大小）。
常见使用场景
场景一：生产环境部署
网站上线前将开发用的CSS文件压缩后部署，减少用户下载的资源体积，提升首屏加载速度。
场景二：邮件模板CSS内联
HTML邮件需要将CSS内联到style属性中，压缩后可以减少邮件体积，降低被邮件客户端截断的风险。
场景三：性能优化审计
对比压缩前后的CSS体积，评估当前样式的冗余程度，辅助制定前端性能优化策略。
技术原理
CSS压缩的核心是安全的字符替换和移除策略：
// CSS压缩处理的步骤
// 1. 移除所有注释 /* ... */
// 2. 移除多余空白（多个空格合并为一个）
// 3. 移除选择器和属性值前后的空格
// 4. 移除最后一个分号（如 } 前的 ;）
// 5. 缩短颜色值（#FFFFFF → #FFF）
// 6. 缩短时间值（0.5s → .5s）
// 7. 合并重复规则（高级压缩）
// 压缩前：120 bytes
// .header {
// background-color: #FFFFFF;
// margin: 0px;
// }
// 压缩后：42 bytes
// .header{background-color:#fff;margin:0}最佳实践与注意事项
- 仅在部署到生产环境时使用压缩版本，开发过程中使用格式化的CSS便于维护和调试。
- 注意CSS hack注释（如/*! */）可能需要保留——部分工具支持保留带感叹号的注释。
- 压缩后应进行功能测试，确保移除空白和注释没有破坏特殊语法（如calc中的空格）。
- 建议使用构建工具（如PostCSS cssnano）自动化压缩流程，集成到CI/CD流水线。
常见问题
Q：CSS压缩后功能会受影响吗？
A：不会。压缩只移除不影响解析的字符（空格、换行、注释），CSS的语义完全不变。但如果使用了依赖注释的特殊语法（如IE条件注释），需要特殊处理。
Q：压缩和混淆有什么区别？
A：压缩只移除冗余字符减小体积。混淆还会重命名类名和ID以进一步减小体积，但会破坏HTML和JS中的引用，需要配合构建工具使用。本工具只做压缩不做混淆。
Q：能压缩SCSS或LESS文件吗？
A：不能直接压缩。SCSS/LESS需要先编译为纯CSS才能压缩。请将编译后的CSS粘贴到工具中进行压缩。
Q：压缩能减少多少体积？
A：取决于原始CSS的格式化程度。从高度格式化的开发版本压缩，通常可减少40%-60%。如果再配合Gzip压缩，总体积可减少70%-85%。
Q：calc()表达式中的空格会被错误移除吗？
A：优秀的压缩工具会保留calc()内部的必要空格。如calc(100% - 20px)中的减号两侧空格必须保留，否则浏览器会解析错误。本工具已正确处理此情况。