ブラウザ機能格差への３つの対応概念 まとめ

フロントエンド開発は、つまるところWebブラウザに依存する。

Webブラウザの大きな問題点として、ブラウザ間の機能格差があり、これへの対処法として３つの考え方があるが、投稿されていなかったので、シンプルにして投稿いたします。

グレースフル・デグラデーション

1. まずは、対応度の高いブラウザに合わせて作成。
2. その後、対応度の低いブラウザでは、いくぶんか表現を削除。

ブラウザごとに表現を変えても良いという考え方
上限から、減らす考え方

プログレッシブ・エンハンスメント

1. まずは、対応度の低いブラウザに合わせて作成。
2. その後、対応度の高いブラウザだけリッチな表現を加える。

ブラウザごとに表現を変えても良いという考え方
下限から、足す考え方

レグレッシブ・エンハンスメント

1. まずは、対応度の高いブラウザに合わせて作成
2. その後、対応度の低いブラウザでは、Polyfillを用いて同等な表現を加える。

ブラウザごとの表現を変えないという考え方
※デメリットとして、Polyfillは、JavaScriptを用いた技術のため、古いブラウザに対して負荷がかかることになる。負荷検証コスト等を踏まえる必要がある。


※これらは、表現の格差であり、コンテンツ（情報）の格差ではない。

これらを踏まえて思うこと

フロントエンド開発のブラウザ差異に関しては、これらの情報共有が必要になる。

• 対象端末・ブラウザの範囲
• 対象端末・ブラウザの機能
• 対象端末・ブラウザ間の機能格差（HTML5, CSS3, JavaScriptへの対応度）
• 対応方法（上記３つのいづれか）



デザインとマークアップを分業していると、いつの間にかグレースフル・デグラデーションになっているのではないか。むむむ。

疑問

ベンダープレフィックスでの対応って関係あるのか

参考：どうする？ブラウザ機能格差の解消 第1回 3つの実装の考え方