CSS 格式化与压缩工具

CSS 格式化（也称美化或 Pretty Print）是将压缩或缩进混乱的 CSS 代码重新按层级缩进对齐的过程。它不改变样式语义，只调整可读性。常见场景：①还原压缩后的生产 CSS 源码；②阅读第三方库或框架的压缩 CSS；③整理复制粘贴的样式片段；④代码审查时统一缩进风格。本工具支持 2 空格、4 空格、Tab 三种缩进，可自定义保留注释、选择器换行等选项。

压缩效果取决于原代码的空白与注释量。典型场景：含大量缩进与注释的源码压缩后可减小 30-60% 体积；已经是单行的代码压缩收益有限（约 5-10%）。本工具压缩模式提供「移除注释」与「省略末尾分号」两个选项。注意 CSS 压缩不同于 HTML 压缩，CSS 的空白在选择器和值中大多可安全移除，但字符串字面量（如 content: " "）内的空白必须保留。

本工具手写词法分析器，正确处理以下语法：①普通规则（selector { prop: value; }）；②@media / @supports / @keyframes 等嵌套 at-rule；③@import / @charset 等无块 at-rule；④!important 声明；⑤字符串字面量（content: "Hello"，内部字符原样保留）；⑥注释（/* ... */，美化模式可选保留）；⑦伪类伪元素选择器（:hover / ::before）；⑧属性选择器（[type="text"]）；⑨@keyframes 关键帧选择器（from / to / 0%）。

CSS 块内既有声明（color: red;）也有嵌套规则（@media 内的 .btn { ... }）。本工具采用「向前探测」策略：从当前位置扫描到下一个 { 或 ;，若先遇到 { 则判定为嵌套规则，先遇到 ; 则判定为声明。这能正确处理 @media 块内混合声明与规则的情况。

校验模式遍历 AST 输出统计与问题清单：①统计规则数、@ 规则数、声明数、注释数、最大嵌套深度；②检测空规则（选择器存在但无任何声明，建议删除以减小体积）；③检测重复属性（同一规则内多次定义同一属性，后者覆盖前者，可能是笔误）；④检测缺失值的属性。注意 CSS 不会「解析失败」，即使语法有误浏览器也会容错处理，校验模式只提示潜在问题不阻止解析。

CSS 规范允许每条规则最后一条声明省略分号，因为 } 会隐式结束声明。例如 .btn{color:red} 与 .btn{color:red;} 等价。省略末尾分号每条规则可节省 1 字节，大型样式表累积可减小 0.5-2% 体积。但省略后如果手动在末尾追加声明容易漏加分号导致错误，因此仅建议在生产压缩时开启，开发环境应保留完整分号。

两者互补形成「标记 + 样式」处理矩阵：HTML 格式化工具处理 HTML 结构的缩进与压缩（注意 <style> 标签内的 CSS 内容会被原样保留不格式化）；本工具处理 CSS 代码的缩进与压缩。典型流程：用 HTML 格式化工具美化页面结构，将 <style> 内的 CSS 复制到本工具单独美化或压缩。

CSS 中大量使用颜色值（color: #0969da / background: rgb(9,105,218)）。颜色格式转换工具可在 HEX / RGB / HSL / HSV / CMYK 五种格式间互转，并生成和谐配色方案。典型流程：用颜色工具选取和转换颜色值，将结果复制到 CSS 中，再用本工具统一格式化。

现代浏览器已支持原生 CSS 嵌套（.parent { & .child { ... } }）。本工具的向前探测策略能正确识别嵌套规则：块内遇到 { 优先于 ; 时判定为嵌套规则。因此原生嵌套语法的美化与压缩均可正常工作。注意原生嵌套的 & 选择器会被当作普通 word 处理，不影响结构解析。

不会。本工具完全在浏览器内运行，所有词法分析、解析、美化、压缩、校验逻辑由 JavaScript 在你本地执行，输入内容不会发送到任何服务器。