CSSの指定前の処理(IE対応)
IE8以下ではHTML5に対応していないため、新要素は無視されてしまう。IEをHTML5に対応させるJavaScriptがhtml5shivサイトで公開されており、これを最初に読み込んで対応する。
1 2 3 4 5 6 |
<!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]--> <link rel="stylesheet" type="text/css" href~[ファイル名]"> |
- 新要素に対してCSSの設定をしている場合、スクリプトがCSSの設定をオーバーライドしないよう、スクリプトの記述をCSS呼び出しの前に置かなければならない。
- IEの判定部分を<!–[if IE]>としている例もある。
- HTML5ではscript要素のtype属性の初期値は”text/javascript”として設定されているので省略可能。
IEの条件付きコメント
Microsoft Internet Explorer (MSIE)において、HTMLソースコード中にある条件付きのステートメント。 IE5で初めて導入され、IE9までサポートされた。IE10以降この機能は廃止され、単なるコメントとして扱われる。
コメントの種類 | 記述 |
標準のHTMLコメント | <–コメント–> |
下の階層が隠れる | <!–[if expression]>HTML<![endif]–> |
下の階層が見える | <![if expression]>HTML<![endif]> |
下の階層が隠れる条件付きコメント
ブラウザがIEの場合のみHTMLが解釈され、IE以外の場合はブラウザからHTMLが見えない。たとえば、ブラウザがIEの場合のみスクリプトを実行するような場合。
1 2 3 |
<!--[if IE 8]> ~IE8の場合のみ認識されるHTML~ <![endif]--> |
下の階層が見える条件付きコメント
以下は、Microsoftのデフォルトの記法で、ブラウザがIEの場合にはHTMLが解釈されず、IE以外のブラウザにはHTMLが見える記法。
1 2 3 |
<![if !IE]> ~IEでないブラウザで認識されるHTML~ <![endif]> |
の表現をIEから見ると、ブラウザがIEなのでifの中身は無視される。一方IE以外のブラウザからみると前後のタグ自体が無視されるため、ifの中身だけが見えて実行される。
この記法は正当な(X)HTMLに準拠したものではなく、IE以外のブラウザで前後のタグが無視されることを期待しているにすぎない。そこで、W3C標準を順守するため、以下のような表現が考えられる。
1 2 3 |
<!--[if !IE]>--> ~IEでないブラウザで認識されるHTML~ <!--<![endif]--> |
この記法は、正当な(X)HTMLである。ただし条件式のパターンによっては、条件が真となる場合に、HTMLの解釈の前に”–>”を表示してしまう。
1 2 3 |
<!--[if gt IE 6]><!--> ~IE以外のブラウザとIE7以降で認識されるHTML~ <!--<![endif]--> |