Internet Explorer 7-9:最大のCSS3、HTML5サポート用のツールの選択

おそらく、CSS3 Pie、Selectivizr、HTML5 Boilerplate、CSS3 Media queryなどのことをすでに聞いたことがあるでしょう。 これらすべてのツールを一緒に使用する方法についてです。事実は、それらの間の競合が繰り返し認識されているということです。 さて、HTML 5とCSS 3が必要な理由がよくわからない場合は、これらの技術を強制しません。 レイアウト時間を短縮できるとだけ言います(ただし、これが唯一のプラスではありません)。



必要なもの:



-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をサポートするためにこれらのツールを一緒使用する場合、予想されるいくつかの問題があります。





頭痛の種を取り除くには、すでに実証済みのテンプレートを使用してください。このテンプレートは、 こちらgithubからダウンロードできます。 このテンプレートの中核はHTML5ボイラープレートです。

明確化





有用なリソース:




All Articles