如何检查浏览器是否支持 -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 功能的支持的声明.这称为特征查询.规则可以放在代码的顶层,也可以嵌套在任何其他条件组规则中.
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.
这篇关于如何检查浏览器是否支持 -webkit-text-stroke的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!