Output will appear here...
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 都被接受。
单击 Minify 进行生产压缩,或美化将缩小代码扩展到每行的一个声明中,规则之间有一个空行。 为了美化,首先选择您喜欢的缩进。
该工具报告了精确的之前/之后的尺寸和百分比变化(例如“12.4 KB → 8.1 KB,-34%”),因此您可以准确地知道变换在您发货之前购买的内容。
一键将结果复制到剪贴板,或将其作为 .css 文件下载,准备放入您的构建输出或 CDN。
尊重字符串文字、 url() 值和 calc() 间距 - 它在不破坏有效 css 的情况下进行大力压缩
将#ffffff 改写为 #fff 和 0px 到 0 的位置可证明是安全的,在纯白空间删除之外挤压额外的字节
保持 /*! 横幅评论完好,因此库许可证标头在缩小中存活,匹配标准的构建工具行为
将缩小的捆绑包扩展为可配置的 2、4 或 8 个空间缩进,用于调试生产问题的可读规则
Minify HTML markup for faster page loads or beautify it for readable, indented source
Minify JSON by removing whitespace, or beautify it with clean indentation, with live size-savings stats and exact parser error messages
Format messy SQL into readable, indented queries or minify SQL to a single line
Beautify messy CSS with clean indentation, or minify it to ship smaller files. Handles nested at-rules, comments, and string literals safely.
0 comments
No comments yet. Be the first to share your thoughts!