ホームページ > 記事 > ウェブフロントエンド > HTML5 の新しいタグによるブラウザーの互換性の問題の処理
HTML5 の新しいタグによるブラウザーの互換性の問題の処理
- PHPzオリジナル
- 2016-05-16 15:50:561163ブラウズ
結局のところ、HTML5 仕様はまだ定義されたばかりの仕様であり、特に IE8 以下のブラウザでは、新しいタグや新しい属性をサポートできないものもあります。以下では、ページ内で HTML5 の新しいタグを使用するためのいくつかの実用的な方法を紹介します。その目的は、HTML5 の新しいタグが低レベルのブラウザーで限定的にサポートされ、ページ全体の機能に影響を及ぼさないようにすることです。
HTML5 仕様の新しいタグをブラウザに認識させる
IE8 ブラウザの場合HTML5 の新しいタグのサポートはまだ追加されていないため、HTML5 の新しいタグのコンテンツを IE8 で直接表示することはできません。幸いなことに、IE8/IE7/IE6 は document.createElement メソッドによって生成されたタグをサポートしています。この機能を使用すると、これらのブラウザーで HTML5 の新しいタグをサポートできます。コードは次のとおりです。 🎜>
ブラウザが新しいタグをサポートしたら、タグのデフォルトのスタイルも追加する必要があります:var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
このようにして、2 つの単純な JavaScriptコードと CSS コードを使用すると、IE8 以下のバージョンのブラウザで HTML5 の新しいタグをサポートできます。もちろん、成熟したフレームワークを直接使用するのが最善の方法です。現在、この考え方に基づいたフレームワークが複数あり、最も一般的に使用されているフレームワークは html5shim フレームワークへの参照を追加するだけです。ページの先頭部分: article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->HTML5 の新機能の下位互換性
-
広義の HTML5 には、HTML5、CSS3、および新しい API が含まれます。新しい機能には多かれ少なかれブラウザの互換性の問題があるため、新しい機能を使用する場合はブラウザがこの機能をサポートしているかどうかを確認することが非常に必要です。ブラウザが新機能をサポートしていない場合でも、適切な下位互換性処理を行うことができます。現在、新機能のサポートを検出する統一された方法はありません。一部の新機能には識別可能な対応する API があり、一部の新機能は特定の手法を介してのみ識別できます。幸いなことに、海外の熱心なエンジニアが新しい機能を検出するためのフレームワークを複数開発しています。その中でも、Modernizr の方が検出精度と使用率が高くなります。
<script src="js/modernizr.min.js"></script>ブラウザが JavaScript を無効にしない場合、HTML タグのクラスは動的に置き換えられ、後で追加されます。ブラウザがページをロードします。ロード後の HTML タグは次のようになります。
<html class="no-js">CSS コードでは、これらのクラスを使用して下位互換性コードを追加できます。複数の背景画像を使用します。 例:
<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">このフレームワークに興味のある読者は、Modernizr の公式 Web サイトを参照して、より詳細な例と使用法を確認できます。
#nice {
background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
background: url(background-one.png) top left repeat-x,url(background-two.png) bottom left repeat-x;
}
オーディオとビデオの互換性 -
オーディオとビデオはページにありますマルチメディア タグはメディアでよく使用されますが、ブラウザの互換性は非常にわかりにくいため、ここでは別のトピックとして扱います。オーディオとビデオは、ブラウザーでネイティブにサポートされている比較的初期の機能であるため、特にモバイル プラットフォームでは、オーディオとビデオの再生はサードパーティのプラグインに限定されなくなりました。オーディオとビデオは重要な部分であり、各ブラウザ メーカーは最大の部分を獲得したいと考えています。これは、ブラウザがサポートするオーディオとビデオの形式の差別化にもつながります。ブラウザでサポートされている音声形式のリストは次のとおりです:
バージョン |
サポートされている形式 |
|
Internet Explorer | 9.0 |
MP3、AAC |
Chrome |
6.0 |
Ogg Vorbis、MP3、WAV (9.0 ) |
Firefox | 3.6 |
Ogg Vorbis、WAV |
Safari |
5.0 |
MP3、AAC、WAV |
Opera |
10.0 |
Ogg Vorbis、WAV |
大约有80%的浏览器支持HTML5的b97864c2e0ef2353a16c4d64c7734e92标签，但是并没有一种统一的音频格式。从支持的格式来看，要让所有的浏览器可以播放audio元素上的音频，最佳的方式是提供MP3和Ogg两种格式，兼容代码如下：
<audio controls>
<source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="elvis.oga" type='audio/ogg; codecs="vorbis"'>
<!-- 向后兼容代码：如，显示提示信息、提供下载链接使用flash播放器等 -->
浏览器不支持<code>audio</code>标签
</audio>
视频也有和音频类似的状况，如下是浏览器支持视频的格式列表：
浏览器 |
版本 |
支持格式 |
Internet Explorer |
9.0+ |
MP4 |
Chrome |
6.0+ |
MP4,WebM,Ogg |
Firefox |
3.6+ |
WebM,Ogg |
Safari |
5.0+ |
MP4 |
Opera |
10.0+ |
WebM,Ogg |
从浏览器支持的视频格式来看，最佳的方式是提供WebM和MP4两种格式的视频。兼容代码如下：
<video controls>
<source src=video.webm type=video/webm>
<source src=video.mp4 type=video/mp4>
<!—向后兼容代码: -->
<iframe width="480" height="360" src="http://www.youtube.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen></iframe>
</video>
以上所述是小编给大家介绍的处理HTML5新标签的浏览器兼容版问题，希望对大家有所帮助，更多相关教程请访问 Html5视频教程