🐁 🔪 🈸 Internet ExplorerのHTML 5 ⁉️ 🌲 👩🏿‍🤝‍👨🏻

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

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

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

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

メリット

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

短いDOCTYPE-最後に、HTMLドキュメントテンプレートをコピーする必要はありませんが、メモリから単純にドライブできます： <!DOCTYPE html>
より短いレコード - <div class="header">代わりに、単に<header>と書くことができます。
より多くのセマンティクス -検索エンジンとブラウザは、メニューの場所（ <nav> ）、ページのコンテンツの場所（ <article> ）、およびいつ更新されたか（ <time pubdate datetime="…"> ）を認識します。

新しいHTML 5タグ

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

<header> -ナビゲーションまたは紹介でブロックします。たとえば、サイトの上部。
<nav> -ナビゲーション。たとえば、サイトメニュー。
<aside>は、サイドバーに配置されることが多い二次情報です。
<article>は独立したコンテンツです。たとえば、記事のテキストや別のコメント。
<section> -ドキュメントのセクション。
<footer> -「地下室」、著作権がよく書かれている場所など
<figure> -写真またはビデオのキャプション。
<hgroup>は、たとえば、見出しがメイン見出しと<hgroup>見出しで構成されている場合の見出しブロックです。
<mark> -単語の選択。たとえば、検索クエリに一致します。
<output> -プログラムの出力または計算結果。
<time datetime="…" pubdate> -時間。 datetime 、マシンにとって便利な形式で指定されます。 pubdateプロパティが設定されている場合（SGMLの敵はpubdate="pubdate"記述できます）、指定された時間はドキュメントまたは最も近い<article>です。

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')

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

Internet ExplorerのHTML 5

メリット

新しいHTML 5タグ

問題としてのIE

解決策

More articles: