CSS を使用してブラウザのアップグレードにプレフィックスなしの Flexbox サポートを求めるにはどうすればよいですか?

ブラウザのアップグレード ディレクティブ: プレフィックスのないフレックスボックス ブラウザに対する CSS アプローチ

CSS フレックスボックスを使用して Web サイトを再設計する場合、ブラウザの互換性が重要になります。 Flexbox のサポートは、Safari 8、IE 10、および少数のあまり一般的でないブラウザを除き、最新のブラウザに広く普及しています。

一部の Web 開発者は、これらの特定のブラウザにベンダー プレフィックスを使用する代わりに、訪問者にアップグレードを奨励することを好みます。ブラウザを使用して、より最適なユーザー エクスペリエンスを実現します。ただし、これらの古いブラウザを効果的にターゲットにして、ユーザーにアップグレードを促すメッセージを表示する方法について疑問が生じます。

解決策の 1 つは、CSS のみを使用することです。 @supports ルールを利用すると、プレフィックス付きフレックスボックス構文をサポートしないブラウザをターゲットにすることができます。 IE 11 や Opera Mini 8 など、プレフィックスのないフレックスボックスはサポートするが @support はサポートしないブラウザの場合、追加の CSS ルールが必要です。

次の CSS スニペットは、IE 7 以前のみを含む、対象となるブラウザの大部分をカバーしています。除外されています:

.browserupgrade { display: block; }
_:-ms-fullscreen, :root .browserupgrade { display: none; }
:-o-prefocus, .browserupgrade { display: none; }
@supports (display: flex) { .browserupgrade { display: none; }}

HTML でアップグレード メッセージを表示するには、<div> を作成するだけです。

<div>

このアプローチにより、プレフィックスのないフレックスボックス ブラウザを使用している訪問者にのみアップグレード メッセージが表示され、Web サイトをよりスムーズにアップグレードするよう促すことができます。体験してください。

以上がCSS を使用してブラウザのアップグレードにプレフィックスなしの Flexbox サポートを求めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。