什么是 CSS 格式化程序?
CSS格式化程序读取样式表,并以一致的间距,缩进和换行符重写它,因此易于阅读和维护它将CSS解析为其规则,选择器,声明,at-rules和注释的底层结构,然后使用可预测的布局将该结构打印出来:每行一个声明,每个冒号后一个空格,每个嵌套块比其父级更深地缩进一个级别样式规则保持相同,但作为一长行不间断行到达的文件成为您可以扫描和编辑的内容。
CSS 迷你器一样的工具反向工作。最小化条带每个空格、选项卡、换行符和(可选)评论浏览器不需要,将样式表折叠为最小的字节对字节等效。格式良好的 6 KB 样式表一旦空白消失,通常会降至 4 KB 以下,这意味着网络上的字节更少,并且第一画画速度更快。在您编写和调试时美化;最小化您运送至生产的副本。
CSS中跳出幼稚查找和替换脚本的部分,这个格式化程序理解。像@media和@supports这样的嵌套at-rules保持其内在规则缩进正确,@keyframes块与百分比步长被保留,字符串文字在内容和url()值完全保持或删除评论根据要求。一切完全在您的浏览器中运行,因此您的样式表,包括任何专有设计令牌或内部类名,永远不会上传,即使没有连接,工具也会在页面加载后继续工作。
一个小测试显示了这个 CSS 格式化程序在线执行的操作。粘贴@media (max-width:600px){。nav a,。nav 按钮{padding:8px 12px;color:#333}} 并单击带有 2 个空格的 Beautify。媒体查询打开自己的块,。nav a 和。nav 按钮在一级别的行上,每个声明都位于自己的行上,冒号后有一个空格。大小徽章读取 73 B → 98 B,+34%,因为缩进添加了字节。单击该输出的 Minify,它返回到原始的 73 字节。
如何使用 CSS 格式化程序?
粘贴您的 CSS
Paste 或键入样式表到输入区域, 精简、手写或导出 CSS 所有工作, 包括带有 @media、@keyframes 的文件和注释。
选择美化或最小化
击"美化以重新缩进CSS进行读取,或"最小化以剥离空白进行发货,选择2个空格、4个空格或选项卡进行美化布局。
审查结果
格式化的 CSS 出现在右侧,并带有显示字节更改的大小徽章。任何解析通知(例如未关闭的支架)都列为警告。
复制或下载
将输出复制到剪贴板或将其下载为。css 文件,准备好放入您的项目或构建管道。
主要特点
美化和最小化
一个工具重新缩进 CSS 进行读取,并将其剥离以供运输,因此您永远不需要两个单独的实用程序
嵌套规则意识
正确缩进 @media、@supports 和 @keyframes 内的规则,而不是将其压平或损坏
字符串和 url() 安全
引用的字符串和 url() 值的内容保持不变,因此内容文本和数据 URI 保持格式不变
可配置的缩进
格式包含两个空格、四个空格或选项卡,以匹配您的项目风格或编辑器设置
Frequently Asked Questions
Related Tools
Chmod Calculator
Convert Unix file permissions between octal, symbolic and rwx checkboxes. Toggle read, write and execute for owner, group and others, plus setuid, setgid and sticky, and copy the chmod command - all in your browser.
JSON Formatter
Format, validate, and minify JSON data
YAML Validator
Validate YAML syntax and convert to JSON format
CSS Minifier & Beautifier
Minify CSS to cut file size or beautify minified stylesheets for debugging
Comments
0 comments
No comments yet. Be the first to share your thoughts!