SHMILY 工具箱tool.ly1314.com

CSS / HTML 格式化与压缩

CSS 与 HTML 一键美化或压缩,可选保留重要注释,并给出体积变化。

格式化 / 压缩保留重要注释体积对比无需登录免费

使用说明

  • 四种模式:CSS 格式化、CSS 压缩、HTML 格式化、HTML 压缩。切换模式会自动换上对应的示例。
  • CSS 格式化会把选择器与左花括号放在同一行、每条声明单独一行,@media 之类的嵌套规则逐层缩进。
  • HTML 格式化按标签建树后重新缩进,<img> 等空元素不会多出闭合标签,<script> <style> <pre> 里的内容原样保留。
  • 压缩模式默认保留 /*! ... */ 与条件注释(<!--[if IE]>),这两类通常是版权声明或兼容代码,删了会出事。
  • CSS 压缩时括号内的空白不会乱动:calc(100% - 20px) 如果压成 calc(100%-20px) 浏览器会直接判为无效。
HTML 格式化后页面排版变了?

这是 HTML 空白符的固有特性:格式化会在标签之间插入换行,而换行在渲染时等于一个空格。依赖「标签紧贴」的布局(例如行内元素之间不能有间隙)建议用压缩模式,或只用 CSS 格式化。

压缩会把 JS 也压了吗?

不会。script 里的内容只去掉首尾空白,不做压缩——压缩 JavaScript 需要完整的语法树,正则替换一定会踩坑,这类需求请用专门的构建工具。