当前位置: 首页 > 工具软件 > Pure.css > 使用案例 >

CSS @Supports

赫连子石
2023-12-01

CSS @supports 指令会像 @media 查询一样出现在 CSS 代码中:

@supports(prop:value) {
  /* more styles */
}

CSS @supports 允许开发人员以多种不同的方式检查样式支持。

例如:检查是否支持 dispaly: flex

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

not 关键字

@supports 可以与 not 关键字一起使用,以检查是否不支持:

@supports not (display: flex) {
  div {
    float: left;
  }
}

多重检查和条件

可以通过 orand 链接进行多个 CSS 属性检查:

/* or */
@supports (display: -webkit-flex) or
  (display: -moz-flex) or
  (display: flex) {
  /* use styles here */
}

/* and */
@supports (display: flex) and (-webkit-appearance: caret) {
  /* something crazy here */
}

两者一起使用:

/* and 和 or */
@supports ((display: -webkit-flex) or
  (display: -moz-flex) or
  (display: flex)) and (-webkit-appearance: caret) {
  /* use styles here */
}

@supports 结构的条件模式与 @media 的条件模式匹配。

JavaScript CSS.supports

CSS @supports 对应的 JavaScript 是 window.CSS.supportsCSS.supports 提供了两种使用方法。

  • 第一种使用方法包括提供两个参数:一个用于属性,另一个用于值:
const supportsFlex = CSS.supports('display', 'flex')
  • 第二种用法包括简单地提供要分析的整个字符串:
const supportsFlexAndAppearance = CSS.supports('(display: flex) and (-webkit-appearance: caret)')

您可以通过这两种方法来检查 CSS 支持情况 —— 它避免了在临时节点上进行属性检查,也避免了为检查支持而构建字符串。

在使用 supports 的 JavaScript 方法之前,首先检测功能是很重要的。Opera 使用了一个不同的方法名,因此会抛出一些东西:

const supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false)

@Supports 使用

在大多数情况下,@supports 的最佳用途是将一组较旧的样式设置为备份,然后取消这些样式,并在支持给定属性的情况下进行增强。

@supports 的一个优秀用例是布局。一些边缘浏览器现在提供对 flexbox 的支持,而其他浏览器则落后。在这种情况下,您可以编写以下代码:

section {
  float: left;
}

@supports (display: -webkit-flex) or
  (display: -moz-flex) or
  (display: flex) {
    section {
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      float: none;
    }
}

随着开发人员有更多时间尝试新的 @supports 功能,其他良好的用例也会出现。

MDN 提供了更多示例

 类似资料: