例えば、-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;
}
}
実装結果

ブラウザの対応状況によって、文字の装飾が変わります。
ブラウザが -webkit-text-stroke
に対応している場合は、文字がアウトラインで囲まれます。
対応していないブラウザで見ると、文字に影が付けられています。