什么是CSS minifier & beautifier？
CSS minifier & Beautifier 是一个双向的样式表工具：它通过删除浏览器不需要的所有内容来压缩CSS - 注释，空格，冗余分号，长格式的十六进制颜色和零值上的单位 - 它可以逆转这个过程，将单行生产捆绑包扩展回可读的、正确缩进的规则。 从渲染块样式表中剥离的每个字节都是浏览器下载和解析的字节，它直接提供核心 Web Vitals 指标，例如第一个内容绘画和最大的内容绘画。
缩写器是故意保守的。 它完全知道字符串文字、 url() 值和 calc() 表达式，因此它永远不会删除 calc(100% - 20px) 所依赖的空格，从不重写内容字符串中的颜色样式，并且从不触及区分 div : hover 与 div:hover 的空格。 在典型的手写样式表上，您可以在 Gzip 之前预期会缩小 25-40% 的尺寸；结合 gzip 或 brotli 线，缩小仍然会缩小一个有意义的切片，因为压缩在重复、无注释的输入上效果更好。
一切都在您的浏览器中运行 100% 客户端。 您的 CSS 永远不会上传、记录或存储在任何服务器上，这意味着您可以安全地粘贴专有的设计系统代码、未发布的产品样式或客户端工作。 一旦页面加载，它也可以脱机工作-当您需要快速缩小传送而不连接完整的postcss或esbuild管道时很有用。
在这里，最小化是语法感知而不是一组查找和替换规则，这使得在生产样式表上运行安全：字符串中的空格、 url() 值和属性选择器是单独的，因为删除它会改变 css 匹配的内容。 保留以感叹号开头的注释，这是必须在构建中存活的许可标题的约定。
如何使用CSS minifier & beautifier？
粘贴您的 CSS
将样式表放入输入区域 - 单个规则、组件文件或完整的生产包。 格式化和已缩小的 CSS 都被接受。
选择迷你或美化
单击 Minify 进行生产压缩，或美化将缩小代码扩展到每行的一个声明中，规则之间有一个空行。 为了美化，首先选择您喜欢的缩进。
检查储蓄徽章
该工具报告了精确的之前/之后的尺寸和百分比变化（例如“12.4 KB → 8.1 KB，-34%”），因此您可以准确地知道变换在您发货之前购买的内容。
复制或下载
一键将结果复制到剪贴板，或将其作为 .css 文件下载，准备放入您的构建输出或 CDN。
主要特点
安全、语法感知的最小化
尊重字符串文字、 url() 值和 calc() 间距 - 它在不破坏有效 css 的情况下进行大力压缩
十六进制和零值缩短
将#ffffff 改写为 #fff 和 0px 到 0 的位置可证明是安全的，在纯白空间删除之外挤压额外的字节
许可评论保存
保持 /*! 横幅评论完好，因此库许可证标头在缩小中存活，匹配标准的构建工具行为
一键美容师
将缩小的捆绑包扩展为可配置的 2、4 或 8 个空间缩进，用于调试生产问题的可读规则
Frequently Asked Questions
Related Tools
HTML Minifier & Beautifier
Minify HTML markup for faster page loads or beautify it for readable, indented source
JSON Minifier
Minify JSON by removing whitespace, or beautify it with clean indentation, with live size-savings stats and exact parser error messages
SQL Formatter
Format messy SQL into readable, indented queries or minify SQL to a single line
CSS Formatter
Beautify messy CSS with clean indentation, or minify it to ship smaller files. Handles nested at-rules, comments, and string literals safely.
Comments
0 comments
No comments yet. Be the first to share your thoughts!