工具简介
这是一款CSS与HTML双模式的格式化/压缩工具。格式化把挤成一行的样式表或网页代码按语法结构重排缩进，便于阅读和改样式；压缩则反向去掉空白与换行，减少文件体积。工具用自研CSS分词器（识别注释、字符串、花括号与圆括号结构）与浏览器DOMParser双引擎处理，输出结果在输出区统计前后字节数与节省百分比。
CSS格式化与压缩
格式化会把选择器逐行拆开、规则块缩进两层、声明末尾补分号，并对声明冒号后补一个空格：
/* 输入 */
.card{border:1px solid #eee;padding:16px}
.card:hover{transform:translateY(-2px)}
/* 格式化输出 */
.card {
border: 1px solid #eee;
padding: 16px;
}
.card:hover {
transform: translateY(-2px);
}
分词器对以下场景做了专门保护，不会误伤：
- 字符串与URL：
content: "a:b"、url(data:image/png;base64,...)里的冒号、分号、逗号不会被当作结构符号拆开； - calc()与函数括号：括号内的逗号不拆选择器、括号内的分号不切声明，
calc(100% - 20px)两侧空格按规范保留； - 多选择器：
@media (max-width: 768px), print按顶层逗号拆行，括号内的逗号不受影响； - 注释：格式化保留全部注释；压缩只保留
/*!开头的许可注释（如版权声明）。
压缩会去掉规则间空白、多余分号与换行，实测一般可省15%~25%体积。
HTML格式化与压缩
格式化基于浏览器DOMParser解析后按节点层级重排缩进，比正则方案更可靠：
- 属性统一用双引号重写，布尔属性（如
disabled）保持无值形式； - 内容块原样保留：pre、textarea、script、style的内部文本不做缩进改写，代码示例不会被打乱；
- 短文本元素（单行且不超过120字符）保持一行，避免过度换行；
- 片段模式：粘贴<div>开头的HTML片段不会强行包上<html><body>外壳，输出保持片段原貌；
- 条件注释（
<!--[if IE]>）在压缩时保留。
压缩会移除注释与纯空白文本节点，但相邻行内元素（如<a>链接</a> <span>文字</span>）之间的空格会保留一个，避免文字粘连。
注意：HTML压缩会删除注释。如果代码里有依赖注释的功能（如IE条件注释以外的服务端模板标记），请改用格式化而非压缩。
使用场景
接手老项目：祖传CSS挤成一行没法看，格式化一遍立刻可读，逐规则排查覆盖关系。
上线前瘦身：静态站没有构建流程时，压缩CSS/HTML是最省事的优化，配合统计数字确认收益。
代码评审：同事发来的代码片段风格混乱，格式化统一后再提意见，聚焦逻辑而不是格式。
使用建议
隐私：全部处理在浏览器本地完成，代码不出本机，可用于未开源项目。
验证：压缩HTML后建议在浏览器打开检查一遍，重点看pre代码块和行内元素间距；压缩CSS后抽查带伪元素content的规则。