Как проверить, поддерживается -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. Есть ли способ в S CSS только , чтобы это произошло?

Заранее спасибо.

~ Sander

Answer 1

Вы можете использовать @supports для проверки этого.

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

@supports CSS at-rule позволяет вам определять объявления, которые зависят от поддержки браузером одной или нескольких спецификаций c CSS особенности. Это называется запросом к функции. Правило может быть размещено на верхнем уровне вашего кода или вложено в любую другую условную группу at-rule.

MDN Reference

Answer 2

Использование https://caniuse.com/

Для посещения с веб-штриховым ходом: https://caniuse.com/#feat = mdn-css_properties_ -webkit-text-stroke