プログレッシブエンハンスメントとは？
プログレッシブ エンハンスメントは、ソフトウェアの堅牢性とアクセシビリティを確保するのに役立つ手法です。それに従うことで、できるだけ多くの人があなたのウェブサイトやアプリを使用できるようになります.
Web デザインの実行可能な最小限のバージョンから始めて、必要に応じて機能することを確認します。次に、追加の機能とスタイルをレイヤー化して、より高性能なブラウザーを利用できるようにします。
プログレッシブエンハンスメントはどのように機能しますか?
Web はその分散性が非常に高いため、常に膨大な範囲のデバイスをサポートする必要がありました。1970 年代の基本的なコンピューターから、高性能な最新のデスクトップ、タブレット、テレビに至るまで、Web サイトは長い道のりを歩んできました。
すべての中心は HTML です。HTML は「寛容な」言語であるため、ブラウザは HTML を理解するだけでなく HTML を表示します。通常、サポートしていないものはすべて無視します。
これは開発者の観点からは便利ですが、読者にとっては問題を引き起こす可能性があります。JavaScript を実行できないときにサイトに空白のページが表示された場合、ユーザーはそれを放棄せざるを得なくなります。プログレッシブ エンハンスメントでは、アクセスできるすべての人にコア コンテンツを配信し、CSS や JavaScript などの適切なテクノロジを使用してそのコンテンツを強化することができます。
スタイリングへの進歩的なアプローチ
CSS は、ページの色、フォント、レイアウト、その他多くの視覚的側面をカスタマイズするために使用できる Web のスタイル シート言語です。これを使用してコンテンツのデフォルトの外観を向上させることができますが、最初からコンテンツを適切に構成してはならないという意味ではありません。
たとえば、メニュー バーを考えてみましょう。次のように構成できます。
<nav>
<a href="/register">register</a>
<a href="/login">log in</a>
<a href="/about">about us</a>
<a href="/contact">contact</a>
</nav>
各リンクがボタンのように見える水平メニューを表示するには、次の CSS を使用してスタイルを設定できます。
nav a {
text-decoration: none;
display: inline-block;
padding: 0.5em 1em;
border: 1px solid;
border-radius: 8px;
margin-right: 1em;
}
ブラウザーがこれを完全にレンダリングすると、次のようになります。
ただし、CSS が利用できない場合、メニューは次のように表示されます。
これがメニューのように見えないことに注意してください。また、リンクが 1 つに統合されているため、使いにくいことにも注意してください。
代替構造を使用して、設計をより堅牢にすることができます。
<nav>
<ul>
<li><a href="/register">register</a></li>
<li><a href="/login">log in</a></li>
<li><a href="/about">about us</a></li>
<li><a href="/contact">contact</a></li>
</ul>
</nav>
このマークアップは順序付けられていないリスト要素を使用しているため、CSS がなくてもより使いやすくなっています。
ブラウザーのデフォルト スタイルを使用しても、これらのリンクをすばやくスキャンして理解するのがいかに簡単であるかに注目してください。このアプローチでは、デフォルトのリスト スタイルをオーバーライドするために、もう少し CSS を追加する必要があります。
nav li { display: inline; }
最終的な構造とスタイリングはより複雑で、ほとんどのユーザーは CSS を有効にしていますが、このアプローチはより堅牢です。スクリーン リーダーや端末ベースのブラウザーのユーザーにとってより使いやすくなります。
段階的に機能を導入
サイトやアプリの機能に関しては、プログレッシブ エンハンスメントが最も重要です。この原則では、何があっても、Web サイトは可能な限り機能する必要があると述べています。
実際には、これは通常 JavaScript に適用されます。クライアント側の動作を導入する場合は、それがなくても機能するサイトまたはアプリケーションの上に機能を重ねる必要があります。
非常に一般的なケースは、イベント処理です。オンデマンドで追加のコンテンツをロードするページを想像してみてください。これは、手動の無限スクロール、コメントの埋め込みなどです。
<body>
<!--. .. -->
<button onclick="load_more();">
Load More
</button>
<!--. .. -->
</body>
ボタンのonclick属性には、誰かがボタンをクリックしたときに実行される JavaScript コードが含まれています。ただし、JavaScript が使用できない場合、このボタンは何もしません。ユーザーはこのボタンをクリックしたままになり、フィードバックも問題の原因もわかりません。はるかに優れたアプローチは、プログレッシブ エンハンスメントを使用します。
<body>
<!--. .. -->
<a id="p2" href="/page/2">Page 2</a>
<script>
function load_more() { console.log("!"); }
/* Replace link with button */
var link = document.getElementById("p2");
var button = document.createElement("button");
button.innerText = "Load More";
button.addEventListener("click", load_more);
document.body.insertBefore(button, link);
link.parentNode.removeChild(link);
</script>
</body>
このコードは、基本的なリンクをイベント ハンドラーを持つボタンに変換します。JavaScript 自体を使用して JavaScript への依存関係を導入することで、それが機能することを確信できます。また、 /page/2への標準リンクの形で機能するデフォルトの動作があります。
プログレッシブエンハンスメントは本当に必要ですか?
誰もが CSS と JavaScript を備えたブラウザーを使用しています。さて、プログレッシブ エンハンスメントの優れたプラクティスを採用すべきいくつかの理由があります。
- まず、Web サイトにアクセスするすべての人がブラウザーを使用しているわけではありません。一部の訪問者は、検索エンジンのインデクサーなどのボットであり、CSS や JavaScript をまったく理解していない場合があります。
- 次に、サイトにアクセスするすべての人が CSS と JavaScript を備えたブラウザーを使用するわけではありません。一部の訪問者は、最小限のフォーマットでプレーン テキストを表示する端末ベースのブラウザを使用する場合があります。他のユーザーはスクリーン リーダーを使用する場合があります。
- 第 3 に、ブラウザーが CSS と JavaScript をサポートしていても、うまくいかないことがあります。リンクが壊れていたり、ネットワーク接続が悪いと、行方不明になる場合があります。css または . js ファイル。JavaScript のバグにより、他のコードがまったく実行されない場合があります。
- 最後に、一部の訪問者は積極的に CSS や JavaScript を無効にすることを決定する場合があります。プライバシー上の懸念から、または低速または従量制の接続を使用しているために、そうする場合があります。
プログレッシブなマインドセットは不思議に働きます
とりわけ、プログレッシブ エンハンスメントでは、コンテンツ ファーストのアプローチを採用することが推奨されます。コンテンツは王様です。そのため、テキストと画像は、サイトにアクセスしているすべての人がいつでも利用できるようにする必要があります。
すべての読者に可能な限り最高の体験を提供し、利益を得ることができる人々にとってさらに良いものにすることで、すべての世界で最高のものを手に入れることができます. プログレッシブ エンハンスメントは、優れたアクセシビリティとユーザビリティ プラクティスの重要な要素の 1 つにすぎません。
コメントを残す