WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

IE対応「html5shiv.js」「css3-mediaqueries-js」

html5shiv.js

HTML5で制作したサイトをInternetExplorer8(IE8)以前のバージョンで閲覧すると、レイアウトが崩れる。
これはHTML5から新たに導入されたタグaside,article,header,nav,section,footerなどを解釈してくれないため。

これらのタグをIE8以前のバージョンに対応させるための対策法である、「HTML5shiv.js」というスクリプトを読みこんで対策する。

github.com


css3-mediaqueries-js

IE8以下では、CSS3の新機能、メディアクエリが適用されない。CSSが適用されないときに「css3-mediaqueries-js」を読みこませて対策する。

github.com

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
「<!--[if lt IE 9]>」と「<![endif]-->」のコメントアウトで囲まれているが、
IEの独自仕様でブラウザに解釈される。