CSS 后备（显示）

Question

在没有任何其他添加的情况下，在后备代码之后添加更现代的 CSS 是否有效？

例如：

    display: flex;
    flex-flow: row wrap;
    display: grid;
    grid-template-columns: repeat(3, 33rem);
    justify-content: space-between;
    justify-content: space-evenly;

如果支持，是否会使用 grid，如果不支持，是否会使用 flex，并且项目之间的间隔均匀，作为后备？我只是想确保重复的属性被忽略而不是完全无效。

对不起，如果这看起来很容易，但我无法找到一种明显的方法来自己在浏览器中进行测试！

谢谢

Answer 1

一般来说，这些方式在涉及 CSS 时提供支持。

方法一：编写回退代码。覆盖后备代码。

.selector {
  property: fallback-value;
  property: actual-value;
}

方法二：编写后备代码。覆盖 CSS 功能查询(@supports) 中的后备代码。如果需要，请重置 @supports 中的属性。

.selector {
  property: fallback-value;
}

@supports (display: grid) {
  property: actual-value;
}

这意味着在@supports 中编写所有内容是三者中最简单的。

示例：

SCSS：

.grid-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  @supports (display: grid) {
    display: grid;  
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  }
}