IEの古いバージョンをサポートしつつ、モダンブラウザ用のサイトを制作する時の20のアドバイス

Post on:2013年5月22日

クロスブラウザ

ウェブサイトはすべてのブラウザで同じように見える必要はありません。
例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。
開発をシンプルにするために、堅実なテンプレートを利用しましょう。
動作が安定しているスタンダードにフォーカスを合わせて制作する。
スタンダードなコードに移行させるにはIE Compat Inspectorが便利。
HTML5を使ったクロスブラウザサイトを制作する時はPolyfillsが役立つコードを提供します。
ウェブサイトの制作中は、数多くのブラウザでテストする。
ブラウザが無い時は、Browser Stackなどのツールを利用する。
エラーや軽量化はツールを使って行うと便利です。
エラーチェックにはHTML validators、CSS validators、UglifyJS、JSHintなど。

doctypeはQuirks Modeを避ける。
<!DOCTYPE html>を使う。
HTML5のsection, header, footerなどの新しい要素を旧ブラウザで理解させるには限界がある。
html5shivなどでIE6/7/8で利用できるようにすることができるが、旧ブラウザにも安全に対応するならdivを使うことを検討する。
CSSファイルはHTMLファイルの上部に配置する。ベストはhead内に配置。
これはCSSファイルが読み込まれるまで、空白ページを見せることになってしまうため。
JavaScriptファイルはHTMLファイルの下部に配置する。ベストは</body>の上に配置。
スクリプトを最下部に配置することで、ページがより速くロードされます。
HTMLのマークアップ内にインラインのJavaScriptは避ける。
インラインのスクリプトがあると、ブラウザはそこでHTMLの解析をやめてしまうので、外部ファイルを利用する。
HTMLのマークアップ内にインラインのJavaScriptのイベントは避ける。
例えば、<botton onclick="validate()7quot;>など。これはスクリプトを最下部に配置し、まだロードされていないスクリプトを呼んだ際にエラーになります。

CSSのルールを身につけてから、使用する。
不必要なid, classを乱用せず、タグや子孫セレクタを使用するのが一般的。!importantの使用は避ける。
将来も動作するために、ベンダープレフィックス有り・無しの両方を使用する。
もしくは、スクリプトで付与するようにする。
CSSハックは使わない。
CSSのハックはそのブラウザの最新版は次の版がでるまで有用であるか分からないため、全く当てになりません。その代わりに、条件付きコメントなどそれを必要とするバージョンのみ適用するスタイルシートファイルを用意して利用します。

ブラウザのバージョン判定にnavigator.userAgentを頼らない。
navigator.userAgentは程度の低い判定です、代わりにModernizrを使用するのを勧めます。
ユーザーのインタラクションを邪魔しないようにスクリプトを実行させる。
インタラクションのためにjQeuryの$(document).ready() を使ったAJAXの導入を検討してみる。
コンテンツの本質でないスクリプトは遅延させてロードする。
Facebook, Google+, Twitterのボタンなどのスクリプトは遅延ロードさせる。