Flexbox コードにプレフィックスを付けるか、ブラウザのアップグレードを丁重にリクエストする必要がありますか?

プレフィックスなしのブラウザ アップグレード リクエスト

CSS フレックスボックスの機能を活用する Web サイトの場合、ブラウザの互換性は重要な考慮事項になります。最新のブラウザのほとんどはフレックスボックスをシームレスにサポートしていますが、Safari 8 や IE 10 などの従来のブラウザではベンダー プレフィックスを使用する必要があります。これらの古いブラウザを使用して Web サイトにアクセスしているユーザーはまだ少数であるため、開発者は、古いテクノロジーに対応するためにコードにプレフィックスを付ける必要性を疑問視する可能性があります。

プレフィックスを使用する代わりに、別のアプローチとして、訪問者にアップグレードするよう丁寧に要求することもできます。彼らのブラウザ。これにより、大多数のユーザーが意図したとおりに Web サイトを操作できるようになり、コードの単純さと効率が維持されます。

古いブラウザをアップグレード リクエストのターゲットにする

古いブラウザを効果的にターゲットにし、カスタマイズされたメッセージを表示するには、さまざまな方法が利用可能です。そのような方法の 1 つは、条件付きコメントを賢明に使用することです。条件付きコメントは Internet Explorer に固有であり、開発者は特定の IE バージョンを対象にすることができます。ただし、このアプローチは、Safari や Opera などのブラウザには不十分です。

CSS のみのソリューション

複数のブラウザを含む、より包括的なソリューションは、CSS-アプローチするだけです。これは、ブラウザーの機能に基づいて CSS プロパティを条件付きで適用できる @supports ルールに依存しています。このルールを活用することで、開発者は特定のブラウザ バージョンをターゲットにするように CSS を調整できます。

サンプル コード

次のコードは、を使用せずに古いブラウザをターゲットにする方法を示しています。プレフィックス:

.browserupgrade { display: block; }

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

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

/* all modern browsers */
@supports (display: flex) { .browserupgrade { display: none; }}

HTML

<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>

追加の考慮事項

追加のユーザー操作が保証される状況では、JavaScript または jQuery スクリプトを使用できます。所定の遅延後にユーザーを指定された URL に自動的にリダイレクトするために使用されます。これにより、古いブラウザを使用している訪問者は、互換性のあるブラウジング エクスペリエンスに優しく誘導されます。

以上がFlexbox コードにプレフィックスを付けるか、ブラウザのアップグレードを丁重にリクエストする必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。