HTML5向けのIE対策いろいろ

オリンピック面白いですね。
女子柔道の松本選手が野獣、アサシン、野生児・・・といろいろすごい相性で呼ばれてましたが、
試合見て納得しました。

今回はhtml5で制作するときに便利なIE対で使えるjs,CSSをまとめました。

Media Queriesを対応させたい

IE6〜8ではMedia Queriesが使えないので、下記のjsどちらかを読み込んで対応させます。
(最近の主流はRespond.js?)

Respond.jsはhead内でCSSファイルの後に設置するだけでOK。


CSSハック

*つけたりでいろいろ設定できるのですが、
ときどき書き方をど忘れするので別の方法を・・・








.ie7 di#aa みたいなかんじで指定ができます。

IEで最新のレンダリングを適用

あんまり使ってるサイト見ませんが一応・・・

IE8には3つのレンダリングモードがあります。

  • IE8標準準拠モード (デフォルトのレンダリングモード)
  • IE7標準準拠モード
  • Quirksモード

「IE=edge」という値で最新のレンダリングモードを選択できます。

※link要素、script要素より前に書かないと適用されない場合があるので注意


//Chrome Frame(IEのプラグイン)を使用する場合

IE8以前でHTML5のタグを使えるようにする

html新要素(header,footer,article要素等)がIEでも使えるようになるjs


リセットCSSより便利?なCSS

リセットCSSとは違い、ブラウザの初期値を維持しながらブラウザが起こりうるバグを回避するスタイルが組み込まれてるCSSです。
ブラウザのバグ回避も組み込まれてます。


まとめるとこんなかんじ

<!DOCTYPE HTML>






<head>
	
	
	<title>title</title>
	
	
	
	
</head>

こんなん書いといてあれですけど、
html5.js以外はまだちゃんと試したことないです。。