Libx Awesomeリスト

    このページの内容

    Awesome Progressive Enhancement Resources

    Progressive Enhancement Resourcesを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    概念

    進歩的エンハンスメントとは、対象環境（例: ブラウザー）が対応可能であることを確認した後で、利用者体験を段階的に改善することです。コンテンツから始め、機能性とアクセシビリティを維持してください。

    戦略

    進歩的エンハンスメントはさまざまな方法で適用できます。

    機能検出

    体験をエンハンスする前に、環境がそのエンハンスメントに対応できることを確認する必要があります。機能検出を実行してテストします。

    • CSS feature queries（CSS.supports()と@supports()） - JSメソッドまたはCSS宣言を使い、特定CSS機能のサポートをネイティブにテスト。
    • Feature Detect ES6 - 利用可能なES2015機能を検出。
    • SVG requiredFeatures - [requiredFeatures]がtrueと評価される場合のみSVG要素をレンダリング。
    • Modernizr - 広範な機能検出スイート（カスタムビルド対応）。
    • Feature.js - 軽量な機能検出スイート。
    • Conditioner.js - HTML属性内のディレクティブに応じてJSモジュールを条件付きで読み込み。
    • EnhanceJS - 定義済みの機能テスト後、CSS・JSを非同期に読み込み。

    サポート表

    環境（プラットフォーム、ブラウザー、バージョン）ごとに能力は異なります。サポート表は、各環境が持つ能力を示します。サポートレベルを知ることで、エンハンスメントと実装の労力・影響を比較検討できます。

    • The Web Platform - ドキュメントとテストスイートへのリンクを備えるブラウザー技術の概要。
    • Can I use …? - デスクトップ・モバイルブラウザー間で機能実装と制限を比較。
    • I want to use … - 機能の組み合わせに対するブラウザーサポートを調べる。
    • HTML5 Test - ブラウザー間でHTML5機能サポートをテスト・比較。
    • CSS3 Test - 現在のブラウザーにおけるCSS3機能サポートの詳細なテスト。
    • Accessibility Support - HTML要素・ARIAロールのアクセシビリティサポートをブラウザー・支援技術間で比較。
    • State of Web Type - Web上の書体・タイポグラフィ機能のサポート表。
    • Font Family Reunion - ローカル（システム）既定フォントの互換性表。
    • HTML5 Accessibility - 主要ブラウザー間でHTML5タグ、input type、プロパティの機能サポートを比較。
    • WAI-ARIA Screen reader compatibility - 多様なスクリーンリーダー・ブラウザー組み合わせのARIAロール・属性サポート。
    • What web can do today - デバイスシステム、センサー、アクチュエーターへのアクセスなど、現代Web APIを一覧・確認。
    • HTML5 Worker test - Web Workers・Service WorkersでどのAPIが対応されるかをブラウザー間で比較。
    • HTML5 Please - 推奨事項とpolyfillへのリンクを備えて機能を探る。
    • API Catalog - 主要デスクトップブラウザーにおけるAPI仕様の実装を比較。
    • KangaxのECMAScript互換性表 - ブラウザー・その他ランタイム間のJavaScript機能サポート概要。
    • Node compatibility table - NodeJSバージョン間のJavaScript機能サポート概要。
    • Is service worker ready? - Progressive Web Appsの中核技術に含まれる全機能のサポート概要。
    • Is PWA ready? - 主要な世界的ブラウザーと多数の中国ブラウザーにおける、PWA中核・関連技術のサポート概要。
    • Is WebRTC ready yet? - リアルタイム通信を支える多様なブラウザー機能のサポート概要。
    • Is WebVR ready? - display、gamepad、audio、speech APIを含むWebVRの多様なブラウザー機能サポート概要。
    • Is Houdini ready yet? - Houdini（CSSレンダリングエンジンの一部を公開する低レベルAPI）のブラウザー間サポート概要。
    • Chrome Platform Status
    • Edge Platform Status
    • Firefox Platform Status
    • Webkit Platform Status（Safari）
    • MDN Compatibility tables - MDNのWeb技術ドキュメントには各記事末尾にブラウザー互換性表があります。
    • MDN Browser Compat Data - MDN Compatibility tablesを支えるnpmモジュール。
    • Device Bugs & Quirks - 他のサポート表にはないモバイルデバイスの奇妙なHTML、CSS、JSの癖を集めたクラウドソースコレクション。
    • Can I Email? - メール内HTML・CSSのサポート表。Can I useに着想を得ています。
    • Project Fugu API tracker - 「アプリギャップ」を埋めるWeb APIのブラウザーサポート状況概要。
    • iOS PWA Compatibility - service worker、manifest、background sync、push通知を含むPWA機能のサポート表（非公式、Maximiliano Firtman保守）。

    テスト手法

    進歩的エンハンスメントでは、環境ごとに異なる体験をサポートします。以下はこれらすべての変種をテストする方法です。

    例

    カスタムフォーム要素

    • Fancy radio buttons - HTMLラジオボタンを基盤に、CSS疑似クラス・要素で視覚的にエンハンス。
    • Checkboxes & radio buttons - カスタムフォーカス、ホバー、チェック状態を備え、非同期にエンハンス。
    • Toggle switch - チェックボックスまたはラジオを、CSSのみでスライド式トグルスイッチへ視覚的にエンハンス。
    • 5-star rating - HTMLラジオボタンを基盤に、CSS疑似クラス・要素で視覚的にエンハンス。
    • jQuery slider - 標準HTML selectを基盤とするアクセシブルなカスタムスライダーウィジェット。
    • jQuery custom file input - 記事とライブラリ。
    • React isomorphic form - 事前レンダリング・サーバー側処理が可能なReactフォームコンポーネント集。状態を失わずクライアント側でエンハンスされます。

    データ可視化

    • Timeline - 定義リストからSVGイラストへ（デモ付き記事）。
    • Charts - データ表からHTML5 canvasを使うテーマ付きチャートへ（記事とライブラリ）。

    画像

    • Responsive Carousel - 多様な挙動オプションを持つレスポンシブカルーセルへエンハンスされる画像一覧。
    • Lazy Progressive Enhancement - <noscript>タグ内の画像を遅延読み込み。（注: Evergreenブラウザーのみ）

    メニュー

    ページナビゲーション

    ajaxとhistory.pushStateを使い、静的ページ間を非同期に取得・遷移します:

    • Barba.js - イベントフック、キャッシュ、プリフェッチ対応でページ遷移を追加。
    • SmoothState.js - イベントフック、キャッシュ、プリフェッチ対応でページ遷移を追加（jQueryが必要）。
    • jquery-pjax - 複数コンテナー／コンテンツスロットに対応してページ遷移を追加（jQueryが必要）。
    • MoOx/pjax - jquery-pjaxに似ていますが、jQuery依存なし。
    • Turbolinks - イベントフック・キャッシュ対応でページ遷移を追加。iOS・Androidのネイティブナビゲーション制御と結合するアダプターを持ちます。

    関連記事

    ライセンス

    CC0

    Jasper Moelkerは、法律で許される範囲で、関連・隣接権を含む著作権法上の本作品に対するすべての権利を世界中で放棄します。

    許可を求めず、商用目的でも、作品を複製、変更、配布、実行できます。