古いブラウザを使用しているユーザーにアップグレード通知を表示するにはどうすればよいですか?

古いブラウザの更新リクエスト メッセージを表示する

最新の Web 開発では、さまざまなブラウザとの互換性を確保することが重要です。ただし、ブラウザの古いバージョンでは、ベンダー プレフィックスなどの特定のコードの調整が必要になる場合があります。コードの単純さを維持するために、一部の開発者はプレフィックスを使用する代わりにブラウザのアップグレードを要求することを選択します。

古いブラウザをターゲットにして、ユーザーに更新を促すメッセージを表示するには、複数のアプローチが利用可能です。広く使用されている方法の 1 つは CSS です。 @supports ルールを利用することで、開発者は、最新のブラウザには適用されるが、対象のブラウザには適用されないスタイルを定義できます。

Safari 7 ～ 8、IE 10、およびその他のブラウザを対象とする CSS コードの例を次に示します。

@supports (display: flex) {
  .browserupgrade {
    display: none;
  }
}

さらに、CSS 特異性ルールは、CSS をサポートしていない特定のブラウザーに対処できます。 @supports:

/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade {
  display: none;
}

/* Opera Mini 8 */
:-o-prefocus, .browserupgrade {
  display: none;
}

HTML では、browserupgrade クラスの専用 div を使用してメッセージを表示できます:

<div class="browserupgrade">
  <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">
    upgrade your browser</a> to improve your experience.</p>
</div>

この CSS アプローチは、ユーザーに対してメッセージを効果的に非表示にします。最新のブラウザでは表示されますが、対象となる古いブラウザを使用している人には表示されます。 @supports をサポートしていないブラウザー (IE

以上が古いブラウザを使用しているユーザーにアップグレード通知を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。