使用 Web Inspector 驯服 CSS 变量

CSS 自定义属性，通常称为 CSS 变量，已被网页设计师广泛采用，用于构建可重用和可配置的设计系统。一种常见的方法是在一个 CSS 规则中为根元素（如 html 或 :root）定义大多数 CSS 变量。

虽然这有助于将它们集中在一个易于查找的位置，但它也有一个副作用：因为 CSS 变量是可继承的，所以所有子元素都有效地继承了祖先的所有变量。这种行为使你能够将定义在更高层的 CSS 变量用于文档深层嵌套元素的样式。

当一个元素继承了大量 CSS 变量时，检查其样式可能会变得令人不知所措。同样，识别要重用的特定 CSS 变量也变得更加困难，因为你必须在大量列表中搜索它们。

在过去的几个版本中，Safari 技术预览版中的 Web Inspector 引入了一些功能，旨在帮助你处理使用大量 CSS 变量的项目。

隐藏未使用的 CSS 变量

在所有继承的 CSS 变量中，只有一个元素样式中实际使用了少数几个。为了减少样式面板中的视觉混乱，未使用的继承 CSS 变量会自动隐藏。它们会被一个按钮取代，点击后即可显示。

这有助于你将注意力集中在对被检查元素生效的样式上。

搜索 CSS 变量

Web Inspector 中的计算属性面板有一个列出适用于被检查元素的所有 CSS 变量的部分。这个属性列表可以帮助你在搜索要重用的 CSS 变量时。

如果你大致知道要查找的内容，无论是 CSS 变量名称的一部分还是值的一部分，都可以使用过滤输入字段来缩小列表范围。

分组 CSS 变量

Safari 技术预览版 138 引入了按值类型分组查看此列表的功能。这为具有颜色、数字、尺寸（数字后跟 CSS 单位）等值的 CSS 变量创建了单独的子部分。通过折叠你不感兴趣的组来减少混乱。

这种分组方式可以帮助你在知道要查找的值类型时（例如，特定的颜色）找到 CSS 变量。变量值旁边显示的颜色样本以及将所有具有颜色值的变量分组到一个单独部分的功能，使得视觉扫描所需值变得更容易。

跳转到 CSS 变量定义

这里有一个提示：将鼠标光标放在“计算属性”面板中的任何 CSS 变量上，即可显示一个跳转箭头。点击它可以在“样式”面板中突出显示变量的定义位置。如果目标 CSS 变量因未使用而被隐藏，它将自动显示。这使你可以快速跳转到定义 CSS 变量的位置并进行编辑。

你也可以使用“样式”面板底部的过滤输入字段（如上所述）并输入变量名称，但使用跳转箭头快速跳转到它会方便得多。

CSS 变量名称的模糊自动补全

自 Web Inspector 诞生以来，它就提供了“样式”面板中 CSS 属性和值的自动补全功能。最近，它引入了在 var() 函数值中输入时为 CSS 变量名称提供补全建议的功能，例如 var(--link-color)。

Safari 技术预览版 138 通过引入 CSS 自动补全的模糊匹配进一步改进了这一点。这对于 CSS 变量特别有用，因为你可能不记得完整的名称。通过模糊匹配，你可以获得与查询在任何位置匹配的结果，而不仅仅是在开头。

例如，如果你知道要查找的 CSS 变量名称，比如 --link-color，包含子字符串“color”，你可以只输入 var(color|)（| 字符表示打字光标的位置）。你甚至不需要输入双破折号前缀。如果 CSS 变量 --link-color 在被检查元素上定义或被其继承，它将显示在补全建议列表中，即使查询匹配发生在变量名称的末尾。

结论

CSS 变量实现了越来越多的用途，例如构建可配置的设计系统、实现明暗模式的实用主题、为 Web 组件提供可自定义的样式等等。但是，项目中变量数量的激增也可能在开发和调试过程中成为负担。

Web Inspector 引入了功能以帮助你保持专注和高效。“样式”面板中隐藏未使用的继承 CSS 变量减少了混乱。“计算属性”面板中收集和分组 CSS 变量有助于集中注意力。变量名称自动补全中的模糊匹配和过滤输入字段有助于你快速查找和重用变量。

我们希望这些改进能让您在处理 CSS 变量时工作更轻松。
一如既往，如果您遇到任何问题，请在webkit.org/new-inspector-bug提交报告。
如果您想分享反馈或想法，请通过 Twitter 发送给我们：@webkit。