如何检查浏览器是否支持-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

使用https://caniuse.com/

For -webkit-text-stroke visit: https://caniuse.com/#feat=mdn-css_properties_-webkit-text-stroke

Answer 2

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

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

The @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a feature query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

MDN Reference

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

How to check if -webkit-text-stroke is supported in browser

css

sass

webkit

textcolor