CSS格式化器

Make CSS easier to review

压缩的 CSS 会把选择器、声明、注释和长值放在一行。此工具展示易于检查的布局。

格式化只改变展示方式，不能证明 CSS 有效、高效、可访问或兼容。请保存源文件并检查 diff。

使用包含选择器、声明、注释、自定义属性、媒体查询和引号值的示例。

Formatting is not CSS validation

CSS 包含选择器、声明、值、注释、at-rule、函数、自定义属性和块。缩进让边界更清楚。

格式化器整理空白和 token，但不验证标准、specificity、可访问性、性能或构建兼容性。

值可能包含字符串、URL、转义、渐变、变量和厂商扩展，应保持原样并在目标环境测试。

检查 CSS source 的 selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result。逐项比较 formatted output 与 source，并在 deployment 前运行 parser validator test。 1

检查 CSS source 的 selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result。逐项比较 formatted output 与 source，并在 deployment 前运行 parser validator test。 2

检查 CSS source 的 selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result。逐项比较 formatted output 与 source，并在 deployment 前运行 parser validator test。 3

检查 CSS source 的 selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result。逐项比较 formatted output 与 source，并在 deployment 前运行 parser validator test。 4

检查 CSS source 的 selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result。逐项比较 formatted output 与 source，并在 deployment 前运行 parser validator test。 5

检查 CSS source 的 selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result。逐项比较 formatted output 与 source，并在 deployment 前运行 parser validator test。 6

检查 CSS source 的 selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result。逐项比较 formatted output 与 source，并在 deployment 前运行 parser validator test。 7

检查 CSS source 的 selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result。逐项比较 formatted output 与 source，并在 deployment 前运行 parser validator test。 8

检查 CSS source 的 selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result。逐项比较 formatted output 与 source，并在 deployment 前运行 parser validator test。 9

检查 CSS source 的 selector declaration property value comment at-rule function custom property media query URL string escape order cascade browser accessibility performance security build lint result。逐项比较 formatted output 与 source，并在 deployment 前运行 parser validator test。 10

How to format CSS

1. 输入完整样式表或受支持片段。
2. 检查选择器、括号、声明、注释、自定义属性、函数和 at-rule。
3. 把属性、值、引号、URL、变量和规则顺序与源文件比较。
4. 运行 linter、构建、可访问性和浏览器测试。
5. 从示例中删除私有 URL、令牌和用户数据。

Formatting method

• 读取选择器、声明、值、注释、块、函数和 at-rule。

  读取选择器、声明、值、注释、块、函数和 at-rule。

• 添加换行和缩进来显示规则与嵌套块。

  添加换行和缩进来显示规则与嵌套块。

• 保留源文件的值、字符串、URL、自定义属性、注释和顺序。

  保留源文件的值、字符串、URL、自定义属性、注释和顺序。

Read the formatted result

成功结果是输入 CSS 的可读排列。将选择器、声明、值、注释、块、函数和顺序与源文件核对。

失败不能证明具体解析器支持或恢复规则。

浏览器、linter 或构建问题属于独立契约；格式化不是优化。

常见错误

把缩进当作验证可能掩盖无效值、specificity 意外或可访问性问题。

修改自定义属性、字符串、URL、转义或规则顺序可能改变行为。

不要假设厂商扩展在所有工具链中相同。

私有 URL、令牌或用户样式可能泄露数据。

限制和特殊情况

此功能用于 CSS 展示格式化，不保证标准、lint、可访问性、安全、性能、兼容性或压缩。

应在目标工具中测试自定义属性、at-rule、扩展、函数、转义、注释和大样式表。

未经允许不要粘贴机密生产样式。

Examples

Frequently asked questions

References

• W3C CSS Snapshot
• Ali Hub CSS Formatter