ウェブブラウザは、ウェブサイトと同じくらい長く使われてきました。 実際、ブラウザは、経験やサイトを見ている人にとって不可欠な要素ですが、すべてのブラウザが同じように作成されるわけではありません。 非常に古く、より最新のブラウザに見られる機能が欠落しているブラウザでは、顧客にWebページを表示させることは可能です（実際にはおそらく）。 これは、ウェブサイトの設計と開発における最新の進歩を利用するウェブサイトの開発に努めているときに、重大な問題を引き起こす可能性があります。 誰かが古いブラウザの1つを使用してサイトにアクセスし、最新の高度なテクニックが機能しない場合、全体的に悪い経験をする可能性があります。 プログレッシブエンハンスは、さまざまなブラウザ、すなわち現代的なサポートに欠けている古いブラウザのためのウェブページ設計を扱う戦略です。
プログレッシブエンハンス（Progressive Enhancement）は、Webページを設計する方法であり、ユーザーエージェントがサポートする機能が増えるほど、Webページに多くの機能が追加されるようになります。 これは、 優雅な劣化として知られているデザイン戦略の反対です。 その戦略は、最も近代的なブラウザ用のページを作成してから、あまり機能しないブラウザでもうまく機能するようにします。つまり、経験は「優雅に低下します」。 プログレッシブエンハンスは、まずは能力の低いブラウザから始め、そこから経験を積み上げます。
プログレッシブエンハンスメントの使用方法
プログレッシブ・エンハンスメントを使用してWebデザインを作成する場合、最初に行うことは、Webブラウザの最小公約数で動作するデザインを作成することです。 そのコアでは、プログレッシブエンハンスメントでは、あなたのコンテンツは、サブセットだけでなく、 すべての Webブラウザで利用できるようにする必要があります。これは、古いブラウザ、古くて使いにくいブラウザをサポートすることから始まる理由です。それらのために、あなたは、すべての訪問者に少なくとも有用な経験を提供すべきベースラインを作成したことを知っています。
最も能力の低いブラウザを最初に使用する場合は、すべてのHTMLが有効で意味的に正しいことを確認する必要があります。 これにより、最も幅広い種類のユーザーエージェントがページを表示して正確に表示できるようになります。
視覚的なデザインスタイルと全体的なページレイアウトは、 外部スタイルシートを使用して追加されます。 これは実際に漸進的な強化が行われる場所です。 スタイルシートを使用して、すべての訪問者に適したサイトデザインを作成します。 ユーザーエージェントが機能を獲得すると、スタイルを追加してページを拡張できます。 誰もがベースラインスタイルを手に入れますが、より進歩したより現代的なスタイルをサポートできるニュースブラウザにとっては、余分なものがあります。 これらのスタイルをサポートできるブラウザのページを「段階的に強化」します。
プログレッシブエンハンスメントを適用するには、いくつかの方法があります。 まず、CSSの行を理解できない場合、ブラウザが何をするのかを考慮する必要があります。 これは実際にあなたの好意で動作します。 すべてのブラウザが理解できるベースラインのスタイルセットを作成すると、新しいブラウザのスタイルを追加できます。 スタイルをサポートしている場合は、スタイルを適用します。 そうでない場合、それらは無視され、これらのベースラインスタイルを使用するだけです。 プログレッシブエンハンスメントの簡単な例は、このCSSで見ることができます：
。メインコンテンツ {
背景：＃999;
背景：rgba（153,153,153、.75）;
}
このスタイルは、最初に背景を灰色の色に設定します。 2番目のルールは、RGBAカラー値を使用して透明度を設定します。 ブラウザがRGBAをサポートしている場合、最初のスタイルは2番目のスタイルで上書きされます。 そうでない場合は、最初のものだけが適用されます。 ベースラインの色を設定してから、最新のブラウザに追加のスタイルを追加しました。
フィーチャクエリの使用
プログレッシブ・エンハンスメントを適用するもう1つの方法は、「フィーチャ・クエリー」として知られているものを使用することです。 これらは、 メディアクエリに似ています。メディアクエリは、 レスポンシブウェブサイトデザインの不可欠な部分です。 メディアが特定の画面サイズのテキストを照会している間、機能クエリは特定の機能がサポートされているかどうかを確認します。 使用する構文は次のとおりです。
@supports（表示：フレックス）{}このルール内に追加したスタイルは、そのブラウザがFlexboxのスタイルである「flex」をサポートしている場合にのみ機能します。 すべてのユーザーに対して1組のルールを設定してから、機能クエリを使用して、選択したブラウザ専用の追加機能を追加することができます。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：12/13/16