css 检测是否支持某一新属性

 .card-wrapper {display: inline-flex;flex-wrap: wrap;margin-bottom: 24px;@supports (gap:24px){gap:24px;width: 100%;}@supports not (gap:24px){--gap=24px;margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));width: calc(100% + var(--gap));> * {margin: var(--gap) 0 0 var(--gap);}}} 

@supports

@supports CSS at-rule 您可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。这被称为特性查询

。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。

@supports (display: grid) {div {display: grid;}
}

@supports not (display: grid) {div {float: right;}
} 

在 JavaScript 中，可以通过 CSS 对象模型接口