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;

如果支持的话，会使用网格吗？如果不支持，会使用弹性网格吗？我只想确保重复的属性被忽略，而不是完全无效。

很抱歉，如果这看起来很容易，但我还没能找到一个明显的方法来在浏览器中测试它！

感谢

Answer 1

一般来说，这些方法在CSS方面提供支持。

方法1:编写回退代码。覆盖回退代码。

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

方法2:编写回退代码。覆盖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));
}
}