優雅な劣化について言及することなく、プログレッシブエンハンスメントについて話すことはできません。 これらの概念の違いは何ですか？ 以前の記事で述べたように 、グレースフルデグラデーションはフォールトトレランスとして変換できます。 これは非常に広い概念ですが、Webのコンテキストでは、クライアントWebインターフェイス、サイトのサーバー側などのフォールトトレランスとして理解できます。 この記事では、グレースフルデグラデーションは、クライアントWebインターフェイスのフォールトトレランスとして理解されます 。
JavaScriptが無効になっている場合の動作、新しいCSS3プロパティをサポートしていないブラウザーでのインターフェイスのかなり正確な表示、画像が無効になっているサイトの適切な表示で、正常な低下を表現できます。 これらの各ケースでは、ユーザーのインターフェースの操作は原則として可能ですが、それほど便利ではありません。
プログレッシブエンハンスメントとは何ですか？ ほとんどの場合、この用語は漸進的な改善と解釈されます。 進歩的な改善とは、単純なものから複雑なものまで、周期的にWebインターフェースを段階的に作成することを意味します。 各段階で、完全なWebインターフェイスを取得する必要があります。これは、以前のものよりも優れた、より美しく、より便利なものになります。 現在、このような4つの段階があると言えます。
- 「古き良きHTML」ステージ
- CSSステージ
- CSS3ステージ
- Javascriptステージ
最初のステップでは、ページの元のコンテンツがHTMLを使用してマークアップされます。 この段階では、論理的および意味的に正しいマークアップを作成する必要があります。 追加の処理は実行されません。 結果は、ブラウザが適切であると表示する、正しくマークされたHTMLドキュメントです。 そのようなドキュメントは、最も単純なブラウザでも正しく表示されるため、「最低公約数」と呼ぶことができます。 進歩的な改善は、 最初の段階が最も重要であると主張しています。なぜなら、ウェブ上でコンテンツほど重要なものはないからです。
2番目の段階では、古き良きCSSを使用してドキュメントが作成され、よりきれいな外観になります。ページグリッドが表示され、要素のフォントパラメータ、背景画像などが設定されます。
第3段階では、CSS3仕様ファミリの新しい機能が適用され、ドキュメントが輝きを放ちます：半透明のダイ、丸い角、影。 また、CSS3を使用して、要素の段階的なフェードまたはシフト、フォームフィールドの強調表示など、さまざまなアニメーションおよび装飾機能を追加できます。
第4段階では、さまざまなAJAXソリューション、動的要素、同じカレンダーなど、インターフェイスとやり取りするプロセスが頭に浮かびます。 ここではJavaScriptが完全に使用されています。 この段階は利便性に責任があります。
説明した手順の目的を要約します。
- ドキュメントの意味、論理的なマークアップ。 テクノロジー：HTML。
- 外観 テクノロジー：CSS。
- 申し分のない外観。 テクノロジー：CSS3。
- 相互作用、双方向性、利便性。 テクノロジー：JavaScript。
グレースフルデグラデーションアプローチに従って、誠実かつ高品質で作成されたWebインターフェイスは、プログレッシブエンハンスメントに従って構築されたWebインターフェイスと同じように動作すると言えます。 つまり、プログレッシブエンハンスメントは、完全な状態にもたらされる優雅な劣化に過ぎません。 それでも、これらの概念の主な違いに注意してください。
- グレースフルデグラデーションは、Webインターフェイスのみに制限されているプログレッシブエンハンスメントよりも広い概念です。 プログレッシブエンハンスメントは、ネイティブのWebです。
- プログレッシブエンハンスメントはモーションベクトルを設定します（簡単に始めてください！）が、グレースフルデグラデーションの場合、これはそれほど重要ではありません。
- プログレッシブエンハンスメントはコンテンツの重要性を主張し、グレースフルデグラデーションの場合はバックグラウンドにあります。
一般に、プログレッシブエンハンスメントは、Webインターフェースを開発するためのより厳密で一貫したイデオロギーです。
Progressive Enhancementが表示されたのはなぜですか？
以前、グレースフルデグラデーションに従って可能な限り定性的にWebインターフェイスを使用すると、結果はプログレッシブエンハンスメントを適用した場合と同じになると言われていました。 では、なぜこの機能強化を考え出すのでしょうか？
答えは簡単です。非常に高品質のグレースフルデグラデーションを行った人はほとんどいません。 これは、本当に高級で責任のある開発者を混乱させました。 結局のところ、ほとんどの人が「私はうまくやっていて、優雅な劣化をしている」と言うことができましたが、異なる開発者のコストと努力は桁違いに異なりました。
グレースフルデグラデーションが不十分である最も単純なケースでは、最新のブラウザ向けにサイトが作成され、古いブラウザの場合、ページの上部にブラウザが古すぎるというメッセージが追加されます。 同時に、古いブラウザでサイトに何が起こるかは誰も気にしません。それはバラバラになるかどうか、すべてのコンテンツが見えるようになるか、何かが消えます。 劣悪なグレースフルデグラデーションのもう1つの一般的な変形は、JavaScriptが無効になったときにインターフェイスが機能しなくなることです。 簡単な例：JavaScriptを無効にしてVKでメッセージを送信してみてください。
要するに、フォールトトレランスを備えたこのようなハック作業は、「正しい」開発者にとって面倒であり、何かをする必要がありました。 貧弱な優雅な劣化に対する反応として、漸進的な強化が生じました。 現在、本当に優れた開発者とデザイナーは進歩的な強化を行うことができますが、悪いものはできません。複雑で労力がかかるためです。 同時に、新しいアプローチは、優雅な劣化からすべてのベストプラクティスを吸収しました。
実用例
プログレッシブエンハンスメントとは何かを理解しました。今度は、このアプローチを生活にどのように適用するかを実践的な例で示します。 それに従って、簡単な承認フォームを作成して発行します。
最初のステップは、純粋なHTMLを使用してフォームを作成することです。 はい、フォームはそれほど美しくありませんが、機能的です。 結果のコードと結果を図に示します：
第2段階では、単純なCSSを使用して、フォームをより美しくします。背景、サイズ、インデントを追加します。 これで、フォームの見栄えが良くなりました。
3番目のステップでは、いくつかの新しいCSSプロパティを使用して、フォームに輝きを与えます。 border-radiusを使用して丸めを追加し、box-shadowを使用して要素の影を追加し、CSSグラデーションを使用してボタンのスタイルを設定します。 いくつかの高度なセレクターを使用して、余分なインデントを取り除きます。 結果はかなり良いです：
JavaScriptを使用する4番目のステップでは、AJAXフォームを送信して、ユーザーがページをリロードせずにログインできるようにします。 残念ながら、動的な動作はスクリーンショットでは実証できません。
最も単純な例を使用して、プログレッシブエンハンスメントアプローチの仕組みを示しました。 ちなみに、この例はhtmlacademyのインタラクティブなデモで 「ライブで感じられる」ことができます。
正常な劣化がどのように機能するかを理解するには、例の手順を逆の方向で確認してください。 問題が発生します-この例では、グレースフルデグラデーションを悪くすることはできますか？ もちろんです！ たとえば、タイプセッターが次のように考えている場合：
AJAXを使用してログインします。つまり、フォームを気にする必要はありません。divを使用します。 丸い角と影...これは問題です。 入力フィールドには、境界線のない入力を使用し、フレームと影付きの背景を背景として設定します。 divを使用してボタンを作成し、背景にグラデーションと影付きのボタンの写真を掛けます。 いいね！ そして、古いIEではそれは美しく見え、ほんの数枚の写真が切り取られます。
このアプローチではどのような問題が発生しますか？ まず、JavaScriptを無効にすると、フォームがなく、データを送信できないため、ログインできなくなります。 次に、画像が無効になっている場合、フィールドの外観は画像のみを使用して設定されるため、フォームは表示されません。 そのようなタイプセッターはすでに絶滅していることが望まれます。
プログレッシブエンハンスメントとレスポンシブデザイン
最近、ロシア語でレスポンシブデザイン 、 アダプティブまたはレスポンシブデザインと呼ばれるアプローチが人気を集めています。 このアプローチの本質は、特定の手法（ゴムグリッド、ゴム画像、CSSメディアクエリ）を使用して、スマートフォンからワイドスクリーンモニターまで、さまざまなデバイスでWebページを適切に表示することです。 これは、ページグリッド、要素サイズなどを動的に変更することで実現されます。
同時に、 モバイルと呼ばれる同様のアプローチが最初に登場しました 。 その名前は、「携帯電話で最初に！」とロシア語に翻訳できます。 実際、これは同じ適応設計ですが、前提条件があります。常にモバイルバージョンでの適応インターフェースの設計を開始します。
レスポンシブデザインとモバイルファーストの関係は、グレースフルデグラデーションとプログレッシブエンハンスメントの関係に非常に似ています。 ペアの最初のアプローチは一般的であり、2番目のアプローチはプライベートであり、「シンプルなhtmlから始める」、「モバイルバージョンからデザインを始める」、「ペットを飼う」という要件を追加します。
有声のアプローチが互いに完全に組み合わされ、互いに完全に補完し合うことは注目に値します。 そして近い将来、すべてのトップパフォーマーは次のように宣言します：「私たちはモバイルファースト+プログレッシブエンハンスメントを行っています。」
残念なことに、この記事の著者であるmerittには十分なカルマがないため、すべてのマイナスとプラスを彼に宛てることができます。