【翻訳】 IEの古いバージョンをサポートしながら、現代的なサイトを構築するための20のヒント
IEのサイトに載っていてちょっと面白かったのでメモ。
http://www.modern.ie/cross-browser-best-practices
Cross-Browser, HTML, CSS, JavaScriptのセクションに分けて書かれています。
時間がないので各Tipsのタイトルと概要だけ雑に訳します。
クロスブラウザの基本
１．すべてのブラウザでまったく同じようにレンダリングされる必要はない
モダンブラウザではリッチな機能を、レガシーブラウザでは最低限の情報を、というあれですね。
２．シンプルに開発するために、堅実なテンプレートからはじめる
HTML5 Boilerplateとかが例に挙げられています。
３．安定した標準仕様に焦点をあてる
「IEがそれをやっているのさ！」ということでしょうか…。
４．標準ベースのコードにサイトを移行するためにIE Compact Inspectorを使う
コードチェックのためのツールとしてIE Compact Inspectorというものがあるようです。
５．shimやpolyfilは控えめに使う
６．開発中は複数のブラウザでテストする
各種ブラウザの開発者ツールに加えて、BrowserStackとか使いましょうとのこと。
７．エラーチェックやファイル圧縮のためにビルドプロセスにツールを組み込む
各種ValidatorやGrunt.jsのようなツールを使いましょうとのこと。VisualStudioでもファイルの圧縮などができるようです。
HTML
８．Quirks Modeを避けるために常に標準ベースのDoctypeを使う
Quirks ModeはIEの俗にいう「互換表示モード」で、IE5と同等の機能でレンダリングしようとします。DOCTYPEに変な記述をしていたり、DOCTYPE以外でHTMLが始まっていると起動するので、ちゃんと<!DOCTYPE html>でHTMLを書き始めるようにしましょう。
※IE10だとQuirks Modeの意味合いが変わっていたような…。
９．HTML5で追加されたタグの後方互換性の限界を理解する
IE6,7,8をサポートするつもりなら、<section>や<header>、<footer>などは特別なスクリプトを使わないと認識できないので、伝統的な<div>によるマークアップがおすすめとのことです。うーむ。
１０．CSSはHTMLの先頭で参照する
ページが読み込まれる前にスタイルが設定されているのが理想的だから。
１１．JavaScriptはHTMLの最後で参照する
ページがすべて読み込まれた後に実行されるのが理想的だから。
１２．HTMLの中にインラインのJavaScriptタグを書かない
メンテナンス性の問題があるから。
１３．HTMLの中にインラインのJavaScriptイベントを書かない
<button onclick="validate()">Validate</button>みたいなやつのこと。ページの末尾でスクリプトを読み込んでいるとエラーの原因になります。
CSS
１４．CSSカスケードのルールを理解して利用する
１５．将来も動作するようにベンダープレフィックスを考慮する
ベンダープレフィックスがついているプロパティも将来はプレフィックスが外れることを想定してプレフィックスがないプロパティを列挙するなど対策をとっておくこと。JavaScriptで動的に設定するブログポストもあります。
１６．互換性問題を解決するためにCSSパーサーをHackしない
JavaScript
１７．ブラウザの検出(navigator.userAgent)ではなく、機能の検出を選ぶ
navigator.userAgentはバグがあったりするので、実際にブラウザが利用しようとしている機能を実装しているかどうか、コード上で確認してから利用した方がよい。Modernizr推奨。
１８．HTMLドキュメントが読み込まれたときに、できるだけ小さいスクリプトを実行する
jQueryの$(document).ready()みたいな感じ。
