まだ一般的では無い cssプロパティを使用するときに、実装されていないブラウザでの対応方法

例えば、-webkit-backdrop-filter のような、あまり多くのブラウザで対応していないようなcssプロパティを使用する場合、対応していないブラウザでは他の方法で文字を飾りたい時があります。

そのようなときに @supports を使って、cssプロパティに対応している、対応していないで分岐する方法をご紹介します。

@supports

対応状況

対応状況しているブラウザは Can I Use… で調べられます。

Can I Use… によると、IE以外のほとんどのブラウザで @supports クエリを使用できます。

実装方法

実装例では、画像の上に配置する文字にアウトラインをつけます。 -webkit-text-stroke に対応しているブラウザ以外では、文字に影を付けて文字を強調します。

HTML

<div class="card">
 <img src="./example.jpg" />
 <p>ブラウザの対応状況によって、文字の装飾が変わります。</p>
</div>

CSS

.card{
  position: relative;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

.card img{
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card p{
  position: relative;
  color: white;
  font-size: 3rem;  
  text-shadow: 0 5px black;
}

@supports (-webkit-text-stroke: initial){
 .card p{
  text-shadow: inherit;
  -webkit-text-stroke: 1.5px black;
 }
}