CSS 格式化

热门 🔥

格式化和压缩 CSS 代码

开发者工具

如何使用 CSS 格式化

  1. 1将 CSS 粘贴到输入框
  2. 2点击格式化或压缩
  3. 3复制结果

关于 CSS 格式化

CSS 格式化与压缩工具对原始或压缩的 CSS 代码进行美化和格式化，添加一致的缩进和属性对齐，使其易于阅读、调试和维护。粘贴任意 CSS——从单个规则集到整个样式表——几秒钟内即可获得干净、结构良好的输出。

当 CSS 为生产环境压缩或从浏览器 DevTools 面板复制时，它会失去所有格式。美化可以恢复正确的缩进并将每个属性放在单独的行上。对于生产部署，压缩工具会去除所有空白、注释和不必要的字符。

所有处理均在您的浏览器中运行，无需服务器。

CSS 格式化的主要功能

  • 以一致的缩进和每行一个属性的格式美化 CSS
  • 通过删除空白、注释和冗余字符来压缩 CSS
  • 处理媒体查询、伪类和关键帧动画
  • 保留 CSS 自定义属性（变量）和 calc() 表达式
  • 适用于纯 CSS——完整样式表和单个规则集
  • 完全在浏览器内运行，无服务器上传
  • 格式化或压缩输出的一键复制
  • 显示压缩实现的字符数减少量

示例

美化来自生产包的压缩 CSS

格式化压缩的 CSS 文件以理解其结构并找到特定规则。

输入

.btn{display:inline-block;padding:8px 16px;background:#007bff;color:#fff;border-radius:4px}

输出

.btn {
  display: inline-block;
  padding: 8px 16px;
  background: #007bff;
  color: #fff;
  border-radius: 4px;
}

为生产部署压缩样式表

在部署前从开发 CSS 文件中去除空白和注释。

输入

带注释的格式化 CSS 文件，约 80 行

输出

单行压缩 CSS——Gzip 前文件大小减少约 40%

常见使用场景

  • 格式化从 CDN 下载的压缩 CSS 文件以进行调试
  • 通过重新格式化清晰地阅读从浏览器 DevTools 复制的 CSS
  • 在部署前压缩 CSS 样式表以减小页面加载时间
  • 通过美化其样式来理解第三方组件的 CSS
  • 为文档和技术博客文章准备 CSS 片段
  • 比较格式化和压缩的 CSS 以识别仅空白的差异

故障排除

压缩后的 CSS 仍然看起来很大

解决方案

CSS 压缩删除空白但不删除未使用的规则。要进行更积极的减少，请考虑使用 PurgeCSS 等 CSS 清除工具。

格式化输出破坏了 box-shadow 等多行值

解决方案

某些 CSS 属性接受多值语法。如果输出看起来不正确，请与原始内容比较，查看值的含义是否改变。

SCSS 或 Less 变量导致格式化错误

解决方案

该工具处理标准 CSS。请先将您的预处理器样式编译为 CSS，然后再格式化。

常见问题

它处理 SCSS 或 Less 吗？

该工具处理标准 CSS。SCSS 和 Less 语法可能无法正确格式化。请先将您的预处理器代码编译为 CSS。

压缩 CSS 会破坏我的样式吗？

不会。压缩只删除空白和注释——不会更改任何属性名称、值或选择器。

支持 CSS 自定义属性（变量）吗？

是的。CSS 自定义属性如 --primary-color: #007bff 和 var(--primary-color) 被视为标准 CSS。

可以只格式化单个 CSS 规则而不是整个文件吗？

是的。粘贴任何 CSS 片段——单个规则集、媒体查询块或整个样式表。

CSS 压缩能减少多少文件大小？

删除空白通常使 CSS 文件减少 20-40%。结合 Gzip，总减少量通常为 60-80%。

压缩期间 CSS 注释会被删除吗？

是的。标准 CSS 注释在压缩期间被删除。许可证注释必须手动添加回来。

我的代码会被发送到服务器吗？

不会。所有格式化和压缩均在您的浏览器本地执行。

它验证 CSS 语法吗？

对于语法无效的 CSS，格式化工具可能会产生不正确的输出，但不会报告具体错误。使用 W3C CSS 验证服务进行详细诊断。