快速测试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而不支持grid。更有可能的是，我只是写一个回退，让事情看起来很好，就像一个列。

如果我相当确信浏览器支持@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 {

}