首页 >web前端 >css教程 >@supports selector()

@supports selector()

Lisa Kudrow
Lisa Kudrow原创
2025-03-18 12:06:10421浏览

@supports规则检查选择器支持的能力令人惊讶地强大!虽然经常用于测试property: value对兼容性,但selector()函数扩展了评估选择器支持的功能。这是通过简单地将选择器放置在括号中来完成的:

 @supports选择器(:nth-​​child(.foo)1){
  / *如果支持选择器,则应用样式 */
}

:nth-child(n of .foo)选择器,“选择器列表参数”与:nth-child家族选择器兼容,是一个很好的例子。当前,只有Safari支持此特定选择器。

考虑一个场景,您需要在其中设置带有分离器和斑马条纹的列表。理想情况下,您将使用这样的选择来实现斑马条纹,同时忽略分离器:

 li:nth-​​child(.list-item的奇数){
  背景:Lightgoldenrodolow;
}

但是,由于浏览器的支持有限,您可以使用@supports来有条件地应用这种样式:

 @supports选择器(:nth-​​child(.foo)1){
  li {
    填充:0.25EM;
  }
  li:nth-​​child(.list-item的奇数){
    背景:Lightgoldenrodolow;
  }
  li.Separator {
    列表风格:无;
    保证金:0.25EM 0;
  }
}
@supports不是selector(:nth-​​child(.foo)){
  li.Separator {
    身高:1px;
    列表风格:无;
    边界:1px虚拟紫色;
    保证金:0.25EM 0;
  }
}

这为缺乏支持高级选择器的浏览器提供了后备样式。改进的语法可能会使用@when @else时,可以简化这一点:

 / *假设的未来语法 */
@when supports(selector(:nth-​​child(.foo)1)){
  / *用于支撑浏览器的样式 */
} @别的 {
  / *后备样式 */
}

还存在用于测试选择器支持的JavaScript API:

 css.supports(“选择器(:nth-​​child(.foo)1)”)

此方法在Safari中true ,在Chrome中(在撰写false时)。

尽管@supports规则具有强大的功能,但具有不一致的跨浏览器支持的CSS选择器的数量,并且需要@Supports的用例@supports的数量相对较小。现在,许多以前有问题的选择器,例如::marker和对案例不敏感的属性选择器,现在都可以享有广泛的支持。选择器如:fullscreen:-webkit-full-screen可能会提供有趣且有用的应用程序,因为它们在iOS Safari中缺乏支持。

@supports selector()

以上是@supports selector()的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn