プログレッシブエンハンスメントとは何ですか?

StackOverflow https://stackoverflow.com/questions/2486

  •  08-06-2019
  •  | 
  •  

質問

Jeff は、JQuery を使用してスタックオーバーフローを記述することについて話したときに、「プログレッシブ拡張」の概念について言及しました。

ちょっとグーグルで調べたところ、それに関するハイレベルな議論がいくつか見つかりました。

プログラマーとして始めるのに適した場所を教えてください。

具体的には、私は PHP で Web アプリを作成しており、作成中のページを改善するために YUI を使用したいと考えていますが、それらの多くは非常に JavaScript ベースであるように見え、ロバの作業のほとんどは JavaScript を使用して実行されます。Javascript なしでサイトを表示すると、サイトの大部分が壊れる可能性があるため、これは私には少しやりすぎのように思えます。

このアイデアを使い始めるのに適した場所は誰にでもありますが、私は言語についてはあまり気にしません。

理想的には、最初に静的 HTML の作成を開始し、次にそれに YUI (またはその他の Ajax フレームワーク) を追加して、よりリッチなクライアントのメリットを享受できる方法を見てみたいと思います。

役に立ちましたか？

解決

こちらも参照 目立たないJavaScript これは、プログレッシブ機能強化の基礎となるものです。

他のヒント

あなたが言ったように

Javascript なしでサイトを表示すると、サイトの大部分が壊れる可能性があるため、これは私には少しやりすぎのように思えます。

これは漸進的な機能強化ではありません。プログレッシブエンハンスメントとは、JavaScript や CSS を使用しなくてもサイトが完全に動作することです。 それから これらの追加のテクノロジー/コードを追加 (階層化) して、Web サイトの使いやすさと機能を向上させます。

私が挙げられる最良の例は、この Web サイトのタグ入力ボックスです。JavaScript をオフにしても機能し、スペースで区切ってタグを入力できます。JavaScript をオンにすると、以前のエントリの候補がドロップダウンに表示されます。

これはプログレッシブ・エンハンスメントです。

私は、 チュートリアル プログレッシブエンハンスメントを使用した投票の作成について ネッツ. 。そのアイデアは、XHTML/CSS と PHP を使用して機能的なサイトを作成し、JavaScript でフォームなどをインターセプトすることです。(私はJQueryを使用しました)。

反対方向からの移行は、グレースフル デグラデーションと呼ばれることもあります。これは通常、さまざまなテクノロジーによって提供される拡張機能を使用してサイトが最初に構築され、その後、それらのテクノロジーが利用できないブラウザーに対して正常に機能を低下させるように変更される場合に必要になります。

また、IE 5.5、Netscape などの古いブラウザ (インターネット用語では古いブラウザ) で動作するように設計している場合も、正常な機能低下となります。

私の意見では、アプリケーションを正常にデグレードすることははるかに手間がかかります。段階的に強化すると、より効率的になる傾向があります。ただし、場合によっては、既存のアプリを利用して、これらの不足した環境でもアクセスできるようにする必要が生じることがあります。

基本的に、JavaScript をオフにしてもサイトが動作する場合、JavaScript を使用して追加したものはすべてプログレッシブ拡張とみなされます。

これは不要だと考える人もいるかもしれませんが、多くの人は NoScript などのアドオンを使用して (または、単にブラウザーの設定で JavaScript をオフにして) ブラウジングしています。さらに、多くのモバイル Web ブラウザは JavaScript をサポートしている場合とサポートしていない場合があります。したがって、JavaScript を使用した場合と使用しない場合でサイトを完全にテストすることを常にお勧めします。

プログレッシブ エンハンスメントは、セマンティック HTML の優位性を強調し、ブラウザー向けにテストする開発手法です。能力 そして、JavaScript や CSS の拡張機能を利用できるブラウザーに対して、それらの拡張機能を条件付きで「階層化」します。

鍵の 1 つは、ブラウザで何ができるかをテストしていることを理解することです する, 、ブラウザとは対照的に、匂いを嗅ぐ. モダニズ は、非常に人気のあるブラウザー機能のテスト スイートです。

Progressive-Enhancement は本質的に (セクション 508) アクセス可能です。それは法律の文言を満たすことを規定します そして ルールの精神。

フィラメント グループは素晴らしい記事を書きました。プログレッシブエンハンスメントによる設計」というテーマの本。(私は Filament Group に所属していませんが、彼らは非常に賢いので、そうなりたいと思います。)

これは非常に重要な概念ですが、それを理解している Web 開発者が非常に少ないことが残念です。

基本的には、Plain Old HTML でサイト/フレームワーク (構造要素、リンク、フォーム) を構築することから始めます。次に、スタイルを追加してから、光沢のあるもの (Ajax など) を追加します。

それほど難しいことではありません。のように 青ざめた馬 グレースフル デグラデーションはさらに手間がかかると言います。

Web サイトは、どのユーザー エージェントでも動作する必要があり、見た目が同じではなく (視覚に障害がある場合は見た目も音も変わりません)、ただ動作する必要があります。

段階的な強化:

  1. プレーンな HTML/CSS サイトは素晴らしいです (完全に機能し、ユーザーフレンドリー).
  2. JavaScript を追加すると、新たなレベルの素晴らしさが定義されます。
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top