@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()的详细内容。更多信息请关注PHP中文网其他相关文章!