CSS调试：一些技巧和窍门

我们都经历过这种情况。你正在开发一个新功能，标记部分已经完成。现在该添加样式了。没问题，对吧？你添加了基础样式，页面重新加载后，布局突然错乱了。你叹了口气，知道今天可能要熬夜了，因为时间紧迫。

CSS 有时会很棘手。在本文中，我将分享一些我用来排查 CSS 问题（当代码运行不如预期时）的策略。希望这些策略能帮助你摆脱沮丧，重新进入“高效完成任务”的状态🙂。

通用布局问题

遇到布局问题时，我最常用的策略之一就是给父元素的子元素添加轮廓。这样我就可以查看子元素的位置是否符合预期，尺寸是否合适。你可以使用类似这样的规则：

.element {
  outline: 1px solid red;
}

如果布局问题比较复杂，需要调试整个页面的布局，你可以为页面上的每个元素添加不同颜色的轮廓。虽然这会增加很多代码行，但可能会有所帮助。在浏览器开发者工具中，打开控制台标签页，然后输入以下 JavaScript 代码片段：

;[].forEach.call($$("*"), function(a) {
  a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16)
})

另一种调试整个页面布局的策略是给所有元素设置背景颜色：

*:nth-child(n) {
  background-color: rgba(255, 0, 0, 0.2);
}

CSS Grid 或 Flexbox 问题

除了使用上述通用的布局问题解决方法之外，我还喜欢利用 Firefox 或 Chrome 的开发者工具来辅助解决这些问题。例如，在 Firefox 的开发者工具中，您可以使用布局选项卡来检查网格或弹性布局的父元素。如果您检查网格父元素，您会看到一些线条，这些线条可以帮助您可视化网格。这样做还可以帮助您发现因在父元素和子元素之间添加额外的包装 div 或元素而导致的布局错误，这些错误可能会破坏您的网格或弹性布局。

点击grid左侧的华夫饼图标，即可自动选中右侧的华夫饼图标。

页面溢出问题

对于调试意外出现的水平滚动条，我最喜欢的策略在这篇CSS Tricks 文章中有所概述。

浏览器或移动端特有漏洞

你遇到的问题会不会是浏览器特有的bug？建议你在其他浏览器和移动设备（尤其是Safari移动版！）上测试一下这个页面。如果问题只出现在一个浏览器上，那么你就可以缩小bug的来源范围了。

例如，我经常遇到一些 Safari 特有的 Flexbox 问题。我通过在其他浏览器中测试并确认问题仅在 Safari 中出现而发现了这些问题。Philip Walton 的 flexbugs 代码库是一个很好的 Flexbox 浏览器特定 bug 参考资料库。

我之前也遇到过移动版 Safari 处理vh单位的问题，在 Android 上测试后证实了这一点，因为 Android 上并没有出现这个问题。

错别字

会不会只是 CSS 代码拼写错误？谁都有可能犯这种错误。即使是最小的拼写错误也可能导致 CSS 规则无法生效。一个有效的解决方法是使用浏览器开发者工具检查出现错误的页面元素。看看哪些 CSS 代码被应用了。如果你的规则在那里，但被划掉了，那就说明它没有生效。

一种预防策略是使用带有 CSS 语法高亮功能的代码编辑器，例如 VS Code。虽然这无法找出所有可能的拼写错误，但它会指出无效的属性名称等问题，并使查找无效的属性值变得更加容易。

标记问题

另一个导致错误的原因是 HTML 标记中的拼写错误。例如，您可能忘记将 CSS 类应用到目标元素上。因此，该类的 CSS 规则将无法生效。如上所述，您可以使用浏览器开发者工具检查元素的标记，然后验证是否已将预期的类应用到该元素上。

动画和转场问题

对于动画和转场的问题，我的首要策略始终是大幅减慢动画或转场的速度。这样我就可以观察它的运行过程，更容易地看到起始状态、结束状态和中间状态。

对于动画，我还喜欢确认我已经按正确的顺序指定了时间值的动画简写属性（找到的第一个属性设置为动画持续时间，找到的第二个属性设置为动画延迟）。

如果动画规则被划掉，则很可能存在拼写错误：

我之前遇到过的另一个问题是动画关键帧中的拼写错误，这会导致动画无法生效。要验证关键帧是否设置正确，您可以使用浏览器的开发者工具。如果您在检查动画元素的样式时看不到关键帧（如下所示），那很可能就是这个问题：

对于动画调试，我也很喜欢Sarah Drasner 在 CSS Tricks 上发表的这篇文章。

希望这能帮助那些陷入“哦不，我的CSS怎么了？！”困境的人。

题图由Markus Winkler通过 Unsplash提供。