如何检查浏览器是否支持-webkit-text-stroke

Question

我在检查当前浏览器是否支持-webkit-text-stroke时遇到问题。我尝试使用@media all and (-webkit-text-stroke)和@if -webkit-text-stroke {}，但没有成功。

我有以下代码：

color: transparent;
-webkit-text-stroke: 2px #ffffff;
font-size: 9rem;
margin: 0;
position: relative;
top: 35%;
left: 5%;
font-family: $font__kalam;
width: fit-content;

我想知道如何检查浏览器是否支持属性-webkit-text-stroke。如果不支持，我想使用：color: $white;而不是-webkit-text-stroke和color: transparent。 SCSS only中有什么方法可以做到这一点？

先谢谢您。

〜桑德

Answer 1

您可以使用@supports对此进行测试。

@supports (-webkit-text-stroke: green) {
  div {
    -webkit-text-stroke:green;
  }
}

@ supports CSS规则可以让您指定依赖于浏览器对一个或多个特定CSS功能的支持的声明。这称为功能查询。规则可以放在代码的顶层，也可以嵌套在任何其他条件组中。

MDN Reference

Answer 2

使用https://caniuse.com/

对于-webkit-text-stroke访问：https://caniuse.com/#feat=mdn-css_properties_-webkit-text-stroke