リセット
まず、最初におさえるのはブラウザ間の基本的な表示差異の吸収です。
差異の吸収方法はいろいろありますが、
HTML5 Boilerplate を使うのは良い方法の 1つです。
HTML5 Boilerplate は Webサイトのひな形として機能し、
ブラウザ間の表示差異をよい感じにリセットしてくれます。
Google、Microsoft、NASA、Nike…などが使用しています。
試しにひな形をサーバにアップしたのに閲覧できない…
という方は、同梱されている .htaccess を取り除いてみて下さい。
とりあえず見れるようになると思います。
もう一つ、知っておくと良いのは index.html の
lang属性 (lang=””) を削除することです。
lang属性によって使用言語を明記することは
HTML の設計上、とても良いことです。
しかし、Android のバグによって文字化けを生じることが
あるため、これを避けるためにやむを得ず削除します。
やむを得ない場合について
詳細をお知りたい方は以下をご参考ください。
Android の Chrome で コピーライト (©) や 円マーク (¥) などが文字化けする (正しく表示できない) 原因と対処法
その機能は使えるのか
リセットが済んだならば、そのページ独自の
デザインや機能を CSS や JavaScript で作り上げて行きます。
新しい機能を使えば、より簡潔に美しく高機能な
Webサイトを制作することができますが、その一方、
古いブラウザで不具合が起きるかもしれません。
CSS 3、HTML 5、JS API など、それぞれ
どのブラウザのどのバージョンでどこまで使えるのか、
不具合を未然に防ぐためには、
これを予め知っておく必要性があります。
とはいえ、W3C の勧告と、各ブラウザの実装状況を
事細かに実際にテストするのは現実的ではありません。
そんなとき、http://caniuse.com/ で各ブラウザの対応状況を調べることができます。
例えば、上記のように color で検索すると
カラービッカーを input要素で実現できる
input[type=color] は IE や Safari を
考慮すると使用できないことが分かります。
opacity で要素を半透明化すると、
その子要素も共々が半透明になります。
モーダル風の表現など、背景は半透明にしたいが、
(その子ノードとなる) 文字は半透明にしたくない場合など
background-color: rgba(0, 0, 0, 0.25)
のように CSS3 Colors を親要素に適用すると
(子は半透明にならないため) 意図を体現できます。
この方法を使う場合は IE8 への完全な対応を
あきらめる必要があると分かります。
download で検索すると Download attribute
について知ることができます。
download 属性とはブラウザにダウンロードすべきファイルと、
ダウンロード時に (制作者が意図する) そのファイル名を
指定するための設定項目です。
つまり、ユーザがクリックやタップした際、
制作者が意図するファイル名で、
スムーズにダウンロードされるようになります。
Firefox では download属性に same-origin policy
が適用されるため、ダウンロード対象をWebページと
同一ドメインのサーバに置く必要があると分かります。
余談ですが、現在の IE では download属性を使えません。
しかし、実装して欲しい機能のリクエストの上位
にあるため、そのうち実装されるかもしれません。
さらに余談ですが、Chrome では途中で
バグが入ったため、バージョンによっては
デグレードのために正しく動作しません。
※指定のファイル名が無視されてしまいます…
その他の機能はどうでしょうか。
スマホが高解像度化し、画素密度も多様になった
ことでベクタ画像が好適となりました。
SVG で検索すればどのくらいの範囲で
利用可能かを知るヒントが得られます。
古いブラウザを除き、主要なブラウザでは使用できそうです。
WebGL – 3D Canvas graphics はどうでしょう。
Android 4.4.x が現役の間は使えそうもありません。
ウェブフォントには
- TTF (True Type Font)
- OTF (Open Type Font)
- EOT (Embeded Open Type)
- WOFF (Web Open Font Format)
- SVG Font (Scalable Vector Graphics Font)
など色々な種類があります。
例えば、EOT は Microsoft の IE 用です。
SVG は画像こそ広くサポートされていますが、
フォントとなるとそのサポートは限定的です。
標準的な地位を確立しつつある WOFF ですが
IE 8 や Android 4.3 以下を切り捨てる必要があると分かります。
まとめ
http://caniuse.com/ でいろいろと検索して見ると
概ね以下の 3つに特別な配慮が必要ということが分かります。
- IE 9 とそれ以下のバージョン
- Android 4.3 とそれ以下のバージョン
- Android の Browser (標準ブラウザ)
このあたりのブラウザを完全な動作対象とする
場合、使用可能な機能を予め調べて絞り込んで
おくと、不具合を減らすことができます。
以上、最新機能を使った Webサイトを
制作される方のご参考になれば幸いです。
お問い合わせについて
業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
※ご契約前のコメントやメールでのやりとりは無料です。
