結局のところ、HTML5仕様は定義されたばかりの仕様であり、一部のブラウザは新しいラベルと新しい属性、特にIE8以下のバージョンのブラウザをサポートできません。ページ内のHTML5の新しいタグを使用するいくつかの実用的な方法を以下に示します。
IE8ブラウザはHTML5タグの新しいサポートを追加していないため、IE8の新しいHTML5タグにコンテンツを直接表示することはできません。幸いなことに、IE8/IE7/IE6は、Document.CreateElementメソッドによって生成されたラベルをサポートしています。
var e = abbr、記事、脇、オーディオ、キャンバス、データリスト、ディテール、ダイアログ、イベント、フィギュア、フッター、hgroup、マーク、メーター、メーター、出力、プロゲス、セクション、時間、video.split（ '、'）; var i = e.length;
ブラウザが新しいラベルをサポートした後、ラベルのデフォルトスタイルを追加する必要があります。
記事はさておき、フィギュート、フィギュア、フッター、hgroup、nav、セクション{display} mark {background：＃000}}}}このようにして、2つの単純なJavaScriptコードとCSSコードにより、IE8以下のバージョンのブラウザーがHTML5の新しいタグをサポートすることができます。もちろん、現在、このアイデアに基づいて多くのフレームワークがあります。
<！ - [lt ie 9]> <scrip> src = http://html5sim.googlecode.com/svn/trunk/html5.js </script> <！
HTML5に広い意味で、HTML5、CSS3、および新しいAPIが含まれます。新機能はブラウザと多かれ少なかれ互換性があるため、新機能を使用するときにブラウザがこの機能をサポートするかどうかを検出する必要があります。ブラウザが新機能をサポートしていない場合、適切に互換性があります。現在、新しい機能のサポートを検出する均一な方法はありません。幸いなことに、海外の熱狂的なエンジニアは、より高い検出精度と使用率を持つModernizrの多くの新しい機能を開発しました。
ModelNizrフレームワークの原則は、ブラウザが新しい機能をサポートしているかどうかを自動的に検出し、対応するクラスを<HTML>タグに追加することです。ブラウザが特定の機能をサポートする場合、特徴的な名前にちなんで名付けられたクラスが追加されます。同時に、Modernizrと呼ばれるオブジェクトも生成します。 Modernizrフレームワークには、IE8以下のブラウザが新しいタグをサポートできるようにするHTML5SHIMフレームワークの機能も含まれています。
Modernizrの使用方法は非常に単純です。
<スクリプトsrc = js/modelnizr.min.js> </script>
第二に、HTMLラベルにNO-JSという名前のクラスを追加します。
<html class = no-js>
ブラウザがJavaScriptを無効にしない場合、ブラウザがページを読み込んだ後、HTMLタグのクラスは動的に置き換えて追加されます。読み込んだ後、HTMLタグは次のものに似ています。
<html class = js canvas canvasttext Geolocation rgba hsla no-multiplebgs borderraderradius boxshadow opacimanimamns no-cssgra dients no-csssreflections csstransforms no-csstransforms3d no-csstransinion
CSSコードでは、これらのクラスを使用して、以下の互換性コードを追加できます。
#nice {background：url（background-one.png）左上reper-x;}。}。このフレームワークに興味のある読者は、Modernizrの公式Webサイトを閲覧して、より詳細な例と使用方法を取得することができます。
オーディオとビデオは一般的にページで使用されていますが、ブラウザはより混乱しているため、別のトピックがあります。オーディオとビデオは、以前のブラウザのネイティブサポートの特性であるため、オーディオとビデオの再生は、特にモバイルプラットフォームでの第3パーティのプラグインに限定されなくなりました。オーディオとビデオは大きなケーキであり、すべてのブラウザメーカーは最大のメーカーを区別したいと考えています。これにより、ブラウザはオーディオ形式とビデオ形式の形式を区別します。ブラウザのサポートオーディオ形式のリストは次のとおりです。
ブラウザ | バージョン | サポート形式 |
インターネットエクスプローラー | 9.0+ | mp3、aac |
クロム | 6.0+ | ogg vorbis、mp3、wav（9.0+） |
Firefox | 3.6+ | ogg vorbis、wav |
サファリ | 5.0+ | mp3、aac、wav |
オペラ | 10.0+ | ogg vorbis、wav |
ブラウザの約80％はHTML5の<udio>タグをサポートしていますが、均一なオーディオ形式はありません。サポート形式の観点から、すべてのブラウザはオーディオ要素でオーディオを再生できます。
<オーディオコントロール> <ソースsrc = elvis.mp3 type = 'audio/mpeg;情報、ダウンロードリンクの提供、フラッシュプレーヤーなどを使用します。->ブラウザは<udio </code>タグ</audio>をサポートしません
ビデオは、次のように、ブラウザでサポートされているフォーマットのリストにも似ています。
ブラウザ | バージョン | サポート形式 |
インターネットエクスプローラー | 9.0+ | MP4 |
クロム | 6.0+ | mp4、webm、ogg |
Firefox | 3.6+ | webm、ogg |
サファリ | 5.0+ | MP4 |
オペラ | 10.0+ | webm、ogg |
ブラウザでサポートされているビデオ形式から判断すると、最良の方法は、WebMとMP4形式で2つの形式を提供することです。互換性のあるコードは次のとおりです。
<ビデオコントロール> <ソースsrc = video.webm type = video/webm> <source src = video.mp4 type = video/mp4> <！ ？r = 0 frameborder = 0 Allowfullscreen> </iframe> </video>
上記は、Xiaobianによって紹介されたHTML5のブラウザ互換性バージョンです。 VEVBウーリンのウェブサイトへのご支援ありがとうございます！