如何检查浏览器是否支持 -webkit-text-stroke [英] How to check if -webkit-text-stroke is supported in browser

问题描述

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

我有以下代码:

颜色:透明；-webkit-text-stroke: 2px #ffffff;字体大小:9rem；边距:0；位置:相对；顶部:35%；左:5%；字体系列:$font__kalam;宽度:适合内容；

我想知道如何检查浏览器是否支持属性 -webkit-text-stroke.如果不支持，我想使用: color: $white; 而不是 -webkit-text-stroke 和 color: transparent>.SCSS仅有什么方法可以实现这一点吗?

提前致谢.

~桑德

解决方案

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

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

<块引用>

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

MDN 参考

I am having a problem to check if the current browser supports the -webkit-text-stroke. I tried using @media all and (-webkit-text-stroke) and @if -webkit-text-stroke {}, but with no success.

I have the following code:

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;

I'd like to know how to check if the property -webkit-text-stroke is supported by the browser. If it's not supported I'd like to use: color: $white; instead of the -webkit-text-stroke and the color: transparent. Is there any way in SCSS only to make this happen?

Thank you in advance.

~ Sander

解决方案

You can use @supports to test this.

@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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！