Clever Geek Handbook

Internet ExplorerのHTML 5

画像



要するに 、HTML 5から新しいタグをInternet Explorerで機能させる方法。



HTML 5を見るWeb開発者は、ついに私たちの家にやって来た幸せに泣き叫ぶ。 ほとんどの機能（WebGL、マルチスレッド、Webソケットなど）については、ブラウザーからのサポートを待つ必要があります（そして、最も正しいものはすでにこれらの機能を備えています）が、新しい便利なタグを使用できるようになりました。



ただし、Internet Explorer（最新の第8バージョンでも）はここでつまずきました-HTML 4以外の新しいタグに気付かない-スタイルをそれらに掛けることはできません。



IEには2つの問題もあります。通常のドキュメントにHTML 5タグのサポートを含める必要がある場合と、AJAXを介して動的に追加されるコンテンツに別々に含める必要がある場合です。



メリット



新しいタグを使用する理由：



新しいHTML 5タグ



ブラウザからのサポートを待たずに、新しい意味を持つタグを使用できます。



HTML 5は、現在使用できるプロパティ、 rel



値、および<input>



タイプをさらに追加しますが、W3C Webサイトまたは他の場所でそれについて読みます。



問題としてのIE



これが問題なのかInternet Explorerの機能なのかを言うのは難しいですが、彼は知らないタグ​​に気付かないだけです。 もちろん、これらはIEでサポートされているHTML 4標準に違反していると言えますが、それでも問題があります-IEの最新バージョンでも、CSSスタイルをHTML 5の新しいタグに追加することはできません。 IE 9はこれを修正しますが、ベータ版もまだリリースしていません。



そしていつものようにIEではハックを使って書く必要があります:)。 JavaScript document.createElement('article')



で要素を作成すると、IEは新しいタグの表示を開始します。



ただし、後で別の問題が発生します。 このハックは、jQueryが使用するのが好きなinnerHTML



を介して追加されたコンテンツでは機能しません。 しかし、この問題は、JS操作の助けを借りて処理することもできます。



解決策



最初に、通常のブラウザに対処しましょう。 もちろん、新しいタグには特別な組み込みスタイルはありません（ <strong>



）。 本当に必要ありませんが、CSSで必要な要素をブロックしても問題はありません。

aside, nav, footer, header, section { display: block }







IEにHTML 5タグを含めるためのコードは既に記述およびレイアウトされているため、ホイールを再発明することなく、 <head>



（新しいタグの前）に挿入します。 

 <！-[IEの場合]>
 <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </ script>
 <！[endif]->


ほとんどのHTML 5サイトはこのURLでスクリプトを使用するため、ブラウザのキャッシュに既にある可能性があります。



innerHTML



ソリューションは、 コンパクトなJSスクリプトとしてすでにパッケージ化されています 。 ダウンロードしてサイトに接続し、追加したすべてのHTMLをinnerShiv(html5)



関数innerShiv(html5)



ラップします。



jQueryの例：

$('#example').append( innerShiv ("<section><header>jQuery</header></section>"))







純粋なJSの例：

var s = document.createElement('section');

s.appendChild( innerShiv ("<header><Plain JS</header>"));

document.getElementById('example').appendChild(s);







$(html5).appendTo('#example')



は、 innerShiv



の2番目の引数としてfalse



を渡し、jQueryに必要な形式で結果を返す必要があります。

$(innerShiv(html5, false)).appendTo('#example')







しかし、私は自分のために$5



関数を作成し、同時に通常のブラウザーに不要なコードを削除しました。 

  if（jQuery.browser.msie）{
     window。$ 5 = function（html5）{
         jQueryを返す（innerShiv（html5、false））
     }
 } else {
     window。$ 5 = function（html5）{
         jQueryを返す（html5）
     }
 }


そして私は書きます：

$5(html5).appendTo('#example')







新しいウェブを長くお楽しみください！ :)


More articles:


All Articles