@supports 特性查询

适用范围:

1. 作用:

• 查询当前浏览器是否支持指定css选择器或属性

语法

@supports 目标表达式{
	.div{
		float:right
	}
}

• 表达式结果为真, 就会采用里面嵌套的样式

1. 目标表达式

• 可以使用的逻辑运算符号:
  • and
  • or
  • not
• 可以使用括号来调整结合优先级
• 表达式中包含要查询的特性

1.1. 待查询特性

• 如果要查询某个css属性: (属性名:值)
• 如果要查询某个css选择器: selector(选择器语法)
  • use::css选择器

实例

1. 检测是否不支持指定的 CSS 属性

@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* 这里的 CSS 代码用来模拟 text-align-last:justify */
}

2. 检测是否支持自定义属性

@supports (--foo: green) {
  body {
    color: var(--varName);
  }
}

3. 检测是否不支持指定css选择器

@supports not selector(:is(a, b)) {
  /* 不支持 :is() 时的备选方案 */
  ul > li,
  ol > li {
    … /* 以上给不支持 :is(...) 的浏览器展开了 CSS 选择器规则 */
  }
}