1

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

S. Kok
  • 23
  • 6
  • Can you use the method described in this answer? https://stackoverflow.com/questions/36191797/how-to-check-if-css-value-is-supported-by-the-browser – Patrick Feb 25 '20 at 08:54
  • I'll try, thank you. – S. Kok Feb 25 '20 at 08:55
  • 1
    This wasn't the solution I was looking for. I'm looking for a CSS / SCSS only method. And I'd like to know if that's possible. – S. Kok Feb 25 '20 at 08:58

2 Answers2

1

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

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
-1

Use https://caniuse.com/

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

caniuse.com

Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24
  • I know which browsers supports the `-webkit-text-stroke` method. But I want to know based on the user's browser. For example, if I use a browser that does not support the property, I need to have a backup plan to make sure the text does not stay transparent. – S. Kok Feb 25 '20 at 09:00
  • `color: $white;` will be supported by almost all. If you will add such functionality, it will just increase your work, file size and may decrease your website speed – Manas Khandelwal Feb 25 '20 at 09:27
  • I was talking about the `-webkit-text-stroke` property. `color: $white` will be converted to `#ffffff`in my case. And `color` is a pretty general property so must be supported by all browsers. But I was wondering if the `-webkit-text-stroke` is supported as well and if it isn't, I need to set the color to `$white` instead of `transparent`. – S. Kok Feb 25 '20 at 09:33
  • Ok, let me see if I get something. – Manas Khandelwal Feb 25 '20 at 09:34