未来志向の総合的なウェブデザイン:プログレッシブエンハンスメント

未来志向の総合的なウェブデザイン:プログレッシブエンハンスメント
<br />原文: プログレッシブエンハンスメントを理解する
アーロン・ガスタフソン
翻訳: http://lifesinger.org/

1994 年以来、Web 開発コミュニティは Graceful Degradation を推進してきました。このコンセプトはエンジニアリングの世界から生まれたもので、その中心となるアイデアは、最新かつ最も強力なブラウザにフル機能のエクスペリエンスを提供しながら、不幸にもまだ Netscape 4 を使用している人々のために基本的な機能だけを残すことです。これが役割を果たしたことは間違いありません。しかし、これはティム・バーナーズ=リーの「ユニバーサルにアクセス可能な Web」という当初のビジョンとはまったく一致しません。
約 10 年後、一部の賢明な人々が Graceful Degradation に疑問を持ち始め、多くの点でそれが不十分であることに気付きました。コンテンツの可用性、全体的なアクセシビリティ、モバイル デバイス ブラウザーの機能に注力することで、古いデバイスのサポートに口先だけで対応するのではなく、コンテンツを重視する Web 開発への新しいアプローチが生まれました。
2003 年の SXSW カンファレンスで、Steve Champeon 氏と Nick Finck 氏が「未来に向けた本格的な Web デザイン」と題した講演を行いました。そうすることで、彼らは Web 開発へのこの新しいアプローチの青写真を明らかにしました。スティーブはこれに「プログレッシブ エンハンスメント」という名前を付けました。
ここに(微妙な)違いがあります。<br />優雅な劣化とプログレッシブエンハンスメントの違いを理解しようとして頭を悩ませているのであれば、それは見方の​​問題です。グレースフル デグラデーションとプログレッシブ エンハンスメントはどちらも、さまざまなデバイスのさまざまなブラウザーで Web ページがどれだけ適切に動作するかを考慮します。両者の主な違いは、それぞれの焦点と、それがワークフローに与える影響にあります。
グレースフル デグラデーションの観点<br />グレースフル デグラデーションは、最も高度で機能的なブラウザー向けのサイトの構築に重点を置いています。 「古い」または機能が低いと見なされるブラウザでのテストは、開発サイクルの最後まで延期されることが多く、通常は主要なブラウザ (IE、Mozzila など) の最後にリリースされたバージョンに限定されます。
このモードでは、古いブラウザでは、劣悪ではあるものの許容できるエクスペリエンスしか提供できません。特定のブラウザに合わせた小さなパッチがいくつかあるかもしれませんが、結局のところ、これらのブラウザは焦点ではなく、大きなバグを修正する以外には、それ以上の取り組みは行われません。
プログレッシブエンハンスメントの観点<br />プログレッシブエンハンスメントはコンテンツに焦点を当てています。違いに注意してください。ブラウザについては何も言及していません。
そもそも私たちがウェブサイトを作成した理由はコンテンツです。コンテンツを配布するサイト、コンテンツを収集するサイト、コンテンツを要求するサイト、コンテンツを操作するサイト、そしてこれらすべてを行うサイトがありますが、どのサイトにもコンテンツが必要です。ここで、漸進的成長がより適切なモデルになります。そのため、Yahoo! はすぐにこのモデルを採用し、それを使用して段階的ブラウザ サポート戦略を作成しました。
前のページ1 2 次のページ 全文を読む

<<:  MySQL 外部キー設定方法の例

>>:  Kubernetes YAMLファイルの使用

推薦する

Linuxシステムのログの詳細な紹介

目次1. ログ関連サービス2. システム内の共通ログファイル1. ログ関連サービスCentOS 6....

Win10 に Tomcat サーバーをインストールし、環境変数を構成する詳細なチュートリアル (画像とテキスト)

目次JDKをダウンロードしてインストールするTomcat 圧縮パッケージをダウンロードTomcatの...

Vue のプロダクション環境と開発環境を切り替えてフィルターを使用する方法

目次1. 本番環境と開発環境を切り替える最初の方法: .envファイルを設定する2番目の方法2. フ...

Vueはmockjsを使用してシミュレートされたデータケースの詳細を生成します

目次プロジェクトにmockjsをインストールするVueプロジェクトでmockjsを使用する基本的なプ...

LinuxでJenkinsのパスワードを忘れる方法

1.Jenkinsのインストール手順: https://www.jb51.net/article/1...

Keepalived は Nginx の負荷分散と高可用性のサンプル コードを実装します

第1章: keepalivedの紹介VRRP プロトコルの目的は、静的ルーティングの単一点障害問題を...

ウェブページ作成時のHTMLタグの使用に注意してください

この記事では、Web ページの作成を学習するときに注意すべき HTML タグに関するいくつかの問題を...

IE6 で JS エラーが発生し、CSS が適用されない HTML エンコードの問題の解決策

テストでは、ページ定義がutf-8でエンコードされている場合、 js ファイルに中国語などのマルチバ...

dockercompose を使用して springboot-mysql-nginx アプリケーションをビルドする

前回の記事では、Docker を使用して、コンパイルされた jar パッケージをイメージに組み込む ...

要素テーブルの行と列のドラッグを実装する例

要素 ui テーブルにはドラッグ アンド ドロップによる並べ替え機能が組み込まれておらず、サードパー...

MySQL 権限制御の詳細な説明

目次mysql 権限制御権限システムテーブル変更後にMySQLの権限を有効にする方法権限の付与と取り...

Nginx プロキシ使用時にヘッダーに「_」が含まれることで情報が失われる問題の解決方法

序文ゲートウェイプロジェクトを開発する場合、署名 sign_key 情報はリクエスト時にリクエスト ...

CSSは、入力ボックスのフローティングテキスト効果を実現するために、placeholder-shown疑似クラスを使用します。

この記事では、:placeholder-shown 疑似クラスを使用して、純粋な CSS で浮動疑問...

キャンバスをベースにした超クールな水光効果を実現

この記事の例では、キャンバスをベースにした超クールな水の光の効果を実装するための具体的なコードを参考...

MySQL の遅いクエリ操作の例の分析 [有効化、テスト、確認など]

この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...