快速测试 CSS 回退

小技巧提示！

并非所有浏览器都支持所有功能。假设您想为不支持 CSS 网格的浏览器编写一个回退。如今这种情况并不常见，但这仅仅是为了说明一个观点。

您可以在 @supports 块中编写支持的 CSS。

@supports (display: grid) {
  .blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
    gap: 1rem;
  }
}

然后，要测试回退，您可以快速将 @supports (display: grid) 更改为无意义的内容，例如添加一个“x”，使其成为 @supports (display: gridx)。这是一个快速切换。

上面的示例没有很好的回退，是吗？也许我会尝试用 flexbox 编写类似的东西，因为嘿，也许仍然有一些小型的浏览器组支持 flexbox 而不支持网格。更可能的是，我会编写一个回退，使内容看起来像一个列，看起来还算不错。

如果我相当有信心浏览器支持 @supports 查询（哦，真讽刺），我可以像这样编写它。

@supports (display: grid) {
  /* grid stuff */
}

@supports not (display: grid) {
  /* at least space them out a bit */
  .block { margin: 10px }
}

这是一个越来越安全的假设，老实说，我们可能已经达到了这个阶段（如果您已经放弃了对 IE 的支持）。

这让我更加渴望使用 那个 @when 语法，因为这样我们就可以写成

@when supports(display: grid) {

} @else {

}

…这感觉 *非常新鲜和干净*。