web-dev-qa-db-ja.com

ブラウザの互換性を気にせずに使用できるHTML5タグはどれですか？

私は、PCで使用するWebアプリを構築しています。 IE8以上のようなブラウザーとの互換性の問題を防ぐために、HTML5タグから遠ざけますか？

注：ほとんどの質問は、このテーマに関する1〜3年前のものです。

html5browsercross-browsercompatibility
93
Swagg

どのHTML5タグを使用しないかを尋ねました。

さて、私の知識によるHTML5のタグのいくつかは、セマンティック上の理由で作成されました。たとえば次のように。

<article> <section> <aside> <nav> <header> <footer> ..ect

これらはほとんど問題なく動作し、CSSを少し必要とします。 display: block;はほとんどのブラウザで正常に動作しますが、古いブラウザでは動作します。 Internet Explorerでは、互換性を持たせるためにJavaScriptで要素を作成する必要があります。

例を次に示します。

document.createElement('article');

古いInternet Explorerで使用するために<article>要素を設定します。

動作するためにJavaScript機能を必要とするより高度なHTML5タグについては、次のようなものがあります。

<audio> <video> <source> <track> <embed> And most importantly <canvas>

これらの要素は、古いブラウザではサポート/シブするのが困難です。クロスブラウザーのポリフィルへのリンクを下部に含めましたが、個人的には調査していません。

そのため、Javascript機能を必要としない要素は、クロスブラウザーサポートコードを少し使用するだけで問題ありません。

ターゲティング> IE8であれば、shivを使用すれば大丈夫です。

古いブラウザとは何ですか？ <IE9

現在のブラウザはHTML5タグをサポートしています。

<section>, <article>, <aside>, <header>, <footer>, 
<nav>, <figure>, <figcaption>, <time>, <mark>

Internet Explorerでは8未満ではサポートされていませんが、このように修正できます。

CSS：

section, article, aside, header, footer, nav, figure, figcaption{
   display: block;
}
time, mark { 
    display: inline-block;
}

Javascript：

var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
    document.createElement(elements[i]);
}

<audio> <video> <canvas>は<IE 9ではサポートされていません

<embed>要素は、> IE8で部分的にサポートされています

このタグも調べる必要があります。

 <meta http-equiv="X-UA-Compatible" content="IE=Edge">

このmetaタグは、Internet Explorerに、互換モードに移行してIE7または8のようにページをレンダリングする代わりに、利用可能な最高のIEモードでページを表示します。それ ここ 。

HTML5ヘルパーリンク

キックスタートの場合、チェックアウトできますHTML5 BoilerPlate

ブラウザー互換性サポートテーブルについては、チェックアウトできます-http://caniuse.com/

HTML5 Shiv-https://github.com/afarkas/html5shiv （

HTML5ポリフィルのリスト-https：//github.com/Modernizr/Modernizr/wiki/...

更新

コメントで述べたように

メタタグX-UA-Compatibleに注意してください。要素を囲む条件付きコメントを持つhtml5ボイラープレートのようなものを使用すると（これはhtml5 doctype IIRCでも発生します）、タグを使用してもIE9がIE7標準モードに強制される問題が発生する可能性があります。 IE再び攻撃

あなたはこれを調べたいかもしれません、私は現時点でこれをバックアップするものは何もありません。

100
iConnor

一般的に、問題があります。

あなたの質問はHTML 5tagsについて質問するように書かれていると言われましたが、Javascriptに照らして新機能を見ることも有用ですあなたが見つけるか書くかもしれません。

実際には、推奨される方法は、特定のブラウザーではなく機能の存在をテストすることです。 Modernizr スクリプトはこの点で役立ちますが、 HTML5の検出できない機能 のレポートもあります。

local storageなどの一部の機能はIE8に戻ります。

FileReaderなどのその他のものにはIE10/Firefox21/Chrome27が必要です

現在の情報については、 http://caniuse.com を試してください

12
Paul

通常のHTML 5を作成し、 Shims を使用して、古いブラウザーとの互換性を確保します。 Javascript APIはほとんどシム化できないため、本当に注意する必要があります。互換性のためにベースラインHTML 4に固執しようとしている場合、HTML 5を使用しても意味がありません。

8
deceze

どのブラウザでどのタグが利用可能か、各タグのサポートレベルをすばやく比較するには、 html5test.com が優れたリソースです。

4
Burhan Khalid

また、最高のクロスブラウザー互換性のために、Eric Meyerによって作成されたこのreset.cssを使用することをお勧めします。 http://meyerweb.com/eric/tools/css/reset/ これにより、ブラウザごとに異なる要素が作成され、すべてのブラウザで同じように動作します。

2
Pacuraru Daniel

HTML5互換性マトリックスを探している

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_（HTML5）

2
bradgonesurfing