@supports 是 CSS 中的一个条件规则,用于检测当 - Pursue_LLL - 沸点 - 掘金

前端

@supports 是 CSS 中的一个条件规则,用于检测当前浏览器是否支持某些 CSS 属性和值。它的语法如下:

@supports (条件) {
/* 支持情况下应用的 CSS 规则 */
}

@supports not (条件) {
/* 不支持情况下应用的 CSS 规则 */
}
其中,条件部分可以是任何合法的 CSS 属性或属性值,浏览器会根据是否支持这些属性或值来决定应用哪一部分的 CSS 规则。

/* 如果浏览器支持 display: grid 则应用下面的规则 */
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}

/* 如果浏览器不支持 backdrop-filter 则应用下面的规则 */
@supports not (backdrop-filter: blur(10px)) {
.modal {
background-color: rgba(0, 0, 0, 0.5);
}
}

展开

前端开发圈