必要なもの：
-HTML 5 Boilerplate -css、htmlなどの単なるテンプレートであるため、空のファイルで作業を開始する必要はありません。 他のタイプセッターの大きな仕事は、これらのコード行にあります。IEのさまざまなバグが修正され、ユーザーがドキュメントを印刷したい場合に備えてスタイルが規定されています。
-Modernizr -IEにセマンティックHTML 5タグを使用できるようにし、タグに便利なクラスを追加します。 たとえば、Internet Explorer 7の場合、.ie7クラスがhtmlに追加され、このブラウザーでのみhtml要素の表示を構成するために使用できます（結局、IEの特定のバージョンに対してのみいくつかの要素を微調整する必要がしばしばあります）。
-CSS3セレクターのSelectivizrおよびIE9.js-場合によっては、クラスを記述するよりも、nth-child（2）またはnth-last-of-type（1）などのコンストラクトを使用してhtml要素を選択する方がはるかに便利で高速ですhtml、およびクラスによって要素を選択します。
-CSS3メディアクエリ -レスポンシブデザイン（画面の解像度に応じて要素の表示を変更できる便利なテクノロジー。したがって、モバイルデバイス用のサイトを構成できます）
-CSS3 Pieは、影、丸い角、グラデーションなどを作成するのに最適です。
-boxsizing.htc -IE7で「border-box」をサポートするために使用します。 これはなぜですか？ 要素にパディングを設定すると、通常の状況では要素の幅（高さ）も増加します。つまり、パディングに加えて、要素の幅（高さ）も監視する必要があります。 このツールを使用すると、毎回幅（高さ）を計算することなく、安全にパディングを示すことができます。 簡単な例：入力要素を作成し、その要素にパディングを設定します-幅（または高さ）が増加し、多くの場合余分な作業が追加されます。
IE 7-9ブラウザーでCSS 3とHTML 5をサポートするためにこれらのツールを一緒に使用する場合、予想されるいくつかの問題があります。
- Selectivizr
- ローカルディレクトリでは動作しませんが、サーバーでは動作します
- jQueryではなく、MooToolsでの作業
- フォームの構造：最後の子：IE9.jsなしでは機能しません
- IE9.js
- フォームの構造：最後の子：Selectivizrなしでは機能しません
- CSS3 Pie
- PIE.htcはSelectivizrでは機能しません
- PIE.htcはIE9.jsでは機能しません
- PIE.htcは、boxsizing.htcを使用する要素では機能しません
頭痛の種を取り除くには、すでに実証済みのテンプレートを使用してください。このテンプレートは、 こちらとgithubからダウンロードできます。 このテンプレートの中核はHTML5ボイラープレートです。
明確化 ：
- jQueryは最小化され、plugins.jsに配置されてサーバーリクエストの数を減らします（それによりページの読み込みを高速化します）
- 上記の問題を回避するために、PIE.htcの代わりにPIE.jsが使用されます
- PIE.jsはIEの9番目のバージョンにも使用されるため、グラデーションを実装できます（それだけではないかもしれません）
- Selectivizrはサーバー上でのみ動作します（私にとってこれは謎です）、したがって、完全に動作するには、ローカルサーバーをオンにすることをお勧めします（ローカルディレクトリに植字する場合）
- PIE.jsでは、最後にjQueryを使用して2つの行を追加し、border-radius、box-shadow、および-pie-backgroundを操作します
- HTML5 Boilerplateの作成者は、すべてのJavaScriptコードを1つのファイルscript.jsにコピーすることをお勧めします（このようにして、複数のスクリプトファイルを使用する場合、サーバーリクエストの数を減らします）。
有用なリソース：
- HTML 5 Cross Browser Pollyfills-さまざまな目的のための多くの異なるデザインで、共通点が1つあります。これらは、ブラウザがサポートしていない場合でも、HTML 5およびCSS 3を昨日すでに使用できるようにするものです。
- caniuse.com-ここでは、ブラウザでサポートされているWebテクノロジーを確認できます