代码格式化工具

CSS Formatter

使用 CSS 解析器统一排版样式表,支持 2 或 4 空格缩进。

Ctrl / ⌘ + Enter 可执行
只读结果

解析并美化 CSS 选择器、声明、媒体查询、关键帧与自定义属性。

这个工具是什么

CSS Formatter 通过 Prettier 的 PostCSS 解析插件理解规则、声明和 at-rules。它不会用简单字符替换处理大括号,因此能区分字符串、注释、calc() 和自定义属性值。

  • 支持常见现代 CSS、媒体查询与 keyframes。
  • 只格式化文本,不把样式注入当前页面。
  • 无效语法会显示解析器错误。

如何使用

  1. 粘贴 CSS。
  2. 选择缩进宽度。
  3. 点击“格式化 CSS”。
  4. 复制或下载 formatted.css。

常见用途

  • 整理单行或难读的样式表。
  • 统一团队代码片段格式。
  • 帮助观察嵌套媒体查询与动画结构。

CSS Formatter 功能特点

解析并美化 CSS 选择器、声明、媒体查询、关键帧与自定义属性。 适合日常开发、调试、数据整理与代码优化场景,处理结果可直接查看、复制或下载。

FAQ

自定义属性会被错误拆分吗?

解析器理解 CSS 声明上下文,能正确处理常见 --custom-property 值。

格式化会改变选择器效果吗?

目标是只改变排版;不过任何自动工具处理前都建议保留源文件并进行项目测试。

CSS 会应用到这个网页吗?

不会。输入和输出都留在文本框中。

返回开发者工具分类首页