详解CSS中@supports的用法

详解CSS中@supports的用法

CSS中的@supports规则是一种在样式表中使用条件语句的方式。它可以使你在不影响不支持该特性的浏览器中的样式的情况下，仅针对支持该特性的浏览器中的样式进行设置。以下是关于@supports的一些细节：

• @supports必须跟随在样式声明块之前
• 可以包含单个或多个CSS声明块
• @supports不能被嵌套
• 如果浏览器不支持@supports，则会忽略其中的所有样式声明

简单示例

/* 如果浏览器支持属性 flexbox，则设置 #example 元素的背景色为红色 */
@supports (display: flexbox) {
  #example {
    background-color: red;
  }
}

在上述代码中，当浏览器支持flexbox属性时，会应用红色背景色到id为example的元素中，否则忽略上述代码块。

复杂示例

/* 如果浏览器支持属性 grid，则使三个元素形成一个网格，否则将它们垂直排列 */
@supports (display: grid) {
  #example {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
  }
}

#example {
  display: flex;
  flex-direction: column;
}

在此示例中，如果浏览器支持grid特性，则使用九宫格布局，否则采用垂直布局。在支持grid特性的浏览器中，@supports块中的样式将覆盖全局样式，在不支持grid的浏览器中，全局样式将保留。

这就是@supports规则的简单用法，它提供了一种便捷的方式去测试浏览器是否支持一些不同的CSS规定和属性，并允许我们编写出针对不同的浏览器类型的CSS代码。