古いブラウザーでの HTML フォーム
ウェブ開発者は誰でも、ウェブが自分たちにとって非常に厳しい場所であることを、すぐに（時には痛みを伴って）学びます。最悪の災いは古いブラウザーです。これはかつて "Internet Explorer" を意味していましたが、特に携帯電話など、ブラウザーも OS もアップデートできない古い端末を使用している人が何百万人もいます。
この荒れた環境に対応するのも仕事のうちです。幸いなことに、知っておくと古いブラウザーによる問題のほとんどを解決することができる秘訣があります。また、 HTML の <input> 型は、対応していなくても失敗はしません。 type=text で代替されます。
問題について知る
一般的なパターンを理解するには、ブラウザーのドキュメントを読むことが役立ちます。 MDN でこの記事を読んでいるのであれば、始めるのにふさわしい場所にいます。使用したい要素（または DOM インターフェイス）の対応状況を確認するだけです。 MDN には、ウェブページで使用できるほとんどの要素、プロパティ、API の互換性一覧表が用意されています。他にも驚くほど役に立つリソースがあります。
HTML フォームでは複雑なやり取りが行われるため、シンプルに保つという経験則があり、「KISS の原則」とも呼ばれています。フォームを「よりかっこよく」あるいは「高機能に」したい場合はたくさんありますが、効率的なフォームの作成はデザインや技術の問題ではありません。むしろ、シンプルさ、直感性、そしてユーザーとの対話のしやすさが重要なのです。 forms usability on UX For The Masses のチュートリアルがこれをよく説明しています。
グレイスフルデグラデーションはウェブ開発者の最大の味方
グレイスフルデグラデーションとプログレッシブエンハンスメントは、様々なブラウザーに同時に対応することにより、優れたものを作ることができる開発パターンです。新しいブラウザーで何かを構築した場合、古いブラウザーでも同じ方法または別な方法で動作するのであれば、グレイスフルデグラデーションが実施できていることになります。
HTML フォームに関する例をいくつか見ていきましょう。
HTML の入力型
HTML5 で追加された入力型は、劣化の仕方が高度に予測可能であるため、古いブラウザーでもすべて使用可能です。ブラウザーにとって未知の type 属性の値が <input> 要素にあった場合、その値が text であったかのように代替されます。
<label for="myColor">
Pick a color
<input type="color" id="myColor" name="color" />
</label>
| 対応済み | 未対応 |
|---|---|
|
|
フォームのボタン
HTML フォームでボタンを定義する方法は 2 つあります。
<input>
<input> 要素は、要素セレクターを使用して CSS を適用したい場合に少し難しくなることがあります。
<input type="button" value="click me" />
すべての入力フィールドの境界線を除去した場合、グローバル CSS の revert 値を使用することで、入力ボタンのみデフォルトの外観に戻すことができます。
input {
/* このルールは、input 要素で定義するボタンを含む、境界線を持つ入力型の
デフォルトのレンダリングを無効にします */
border: 1px solid #cccccc;
}
input[type="button"] {
/* これではデフォルトのレンダリングを復元できません */
border: revert;
}
古いブラウザーでのスタイル設定の制限
古いブラウザーにおける HTML フォームの大きな課題の一つは、CSS によるスタイル設定です。他の箇所でも説明されているように、appearance: none; を宣言することで、デフォルトのスタイルを除去し、その上に独自のスタイルを適用することができます。ただし、古いブラウザーでは、このモジュールの前半で取り上げたスタイル設定手法が、現行ブラウザーほど対応していない傾向があります。古いブラウザーでの対応が必要な場合は、フォームコントロールのスタイル設定を一切行わないほうがよいかもしれません。特定の入力型の対応状況を検出する方法については、次の節を参照してください。
古いブラウザーでフォームウィジェットのデフォルトのスタイルを変更しなければならない場合は、スタイルガイドを定義して、すべてのフォームコントロールの一貫性を確保し、ユーザーの使い勝手を損なわないようにしてください。また、JavaScript でのウィジェットの再構築など、難しいテクニックを検討することもできますが、その手間を考えると、割に合わないことがあります。
機能検出とポリフィル
CSS や JavaScript は素晴らしい技術ですが、古いブラウザーで壊れないようにすることが重要です。ターゲットとしているブラウザーで完全に対応していない機能を使用する前には、機能検出を行う必要があります。
CSS の機能検出
置き換えられたフォームコントロールウィジェットをスタイル付けする前に、 @supports を使用してその機能にブラウザーが対応しているかどうかをチェックすることができます。
@supports (appearance: none) {
input[type="search"] {
appearance: none;
/* 検索入力のスタイル再設定 */
}
}
appearance プロパティは、要素をプラットフォームのネイティブのスタイルで表示したり、 none の値を指定することで、デフォルトのプラットフォームのネイティブベースのスタイルを削除したりするために使用されます。
JavaScript によるフォーム入力の検出
JavaScript で、特定の入力型の対応状況を確認することができます。これは、先ほど触れた事実、つまり、対応していないブラウザーではすべての入力型が <input type="text"> に切り替わるということに基づいています。
検査関数を定義しましょう。関数本体の最初の行では、検査用の <input> 要素を作成します。次に、その type 属性を、検査したい型に設定します。最後に、type 属性の値を検査します。その入力型に対応していないブラウザーでは、上記の行は効力がなく、type は text として返されます。その下の行では、否定演算子 (!) を使用して返値を反転させています。これは、type が text でない場合、その入力型が対応していることになるため、true を返したいからです。完全な関数は下記のようにします。
function testDatetimeLocalSupport() {
const testInput = document.createElement("input");
testInput.setAttribute("type", "datetime-local");
return testInput.type !== "text";
}
上記の例は、こうした検査の基本的な考え方を示しています。しかし、一から作り直すのではなく、機能検出ライブラリーを使用しましょう。
この検査結果に基づいて、例えば、JavaScript を使用して未対応の型に対する独自の代替実装を作成したり、古いブラウザーには単純なデフォルトスタイルを指定したいという理由から、未対応の型にスタイルを適用するこのスタイルシートを適用しないといった選択が可能になります。
控えめな JavaScript
最大の問題のひとつは、API が利用できるかどうかです。そのため、「控えめな」 JavaScript によって取り組むことベストプラクティスであると考えられています。これは、2 つの要件によって定義される開発パターンです。
- 構造と動作を厳密に分割する。
- コードが動作しない場合でも、コンテンツや基本的な機能はアクセス可能かつ利用可能のままでなければならない。
The principles of unobtrusive JavaScript（原文は Peter-Paul Koch 氏によって dev.opera.com 向けに記述されたものです）で、これらのアイデアを明快に説明しています。
パフォーマンスに注意を払う
Modernizr のようなスクリプトはパフォーマンスを非常に意識していますが、200 キロバイトのポリフィルをロードすると、アプリケーションのパフォーマンスに影響を与えます。これは、古いブラウザーでは特に重要です。古いブラウザーの多くは JavaScript エンジンが非常に遅く、ポリフィルをすべて実行するとユーザーに負担がかかります。パフォーマンスはそれ自体が問題ですが、古いブラウザーはとても敏感です。基本的に古いブラウザーは遅く、ポリフィルが増えれば増えるほど、より多くの JavaScript を処理しなければなりません。つまり、新しいブラウザーに比べて二重に負担がかかるのです。古いブラウザーでコードをテストし、実際にどのように動作するかを確認してください。すべてのブラウザーでまったく同じ機能を使うよりも、一部の機能を削除したほうがユーザーの使い勝手が向上することもあります。最後になりましたが、常にエンドユーザーのことを考えてください。
おわりに
このように、ブラウザーや OS におけるデフォルトのフォームコントロールの外観を考慮することは重要です。これらの問題に対処するためのテクニックは数多くありますが、そのすべてをマスターすることは、この記事の範囲を超えています。大前提として、デフォルトの実装を変更することに価値があるかどうかを検討してから挑戦してください。
この HTML フォームガイドのすべての記事を読んでいれば、フォームの使用に慣れているはずです。新しいテクニックやヒントを見つけた場合は、ガイドの改善にご協力ください。