まだ一般的では無い 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;
 }
}

実装結果

ブラウザの対応状況によって、文字の装飾が変わります。

ブラウザが -webkit-text-stroke に対応している場合は、文字がアウトラインで囲まれます。
対応していないブラウザで見ると、文字に影が付けられています。

こんな記事も読まれています

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。