H5 の新しいタブブラウザの互換性の問題-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

H5 の新しいタブブラウザの互換性の問題

php中世界最好的语言

Mar 26, 2018 pm 02:39 PM

firefox html5 webkit

今回は、H5 新しいタブブラウザの互換性問題について説明します。H5 新しいタブブラウザの互換性問題に対処する際の注意事項は何ですか? 以下は実際的なケースです。

結局のところ、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])
}

ログイン後にコピー

ブラウザーが新しいタグをサポートした後、タグのデフォルトのスタイル:

article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}

ログイン後にコピー

このように、

JavaScript コードと CSS コードの 2 つの単純な部分により、IE8 以下のブラウザで HTML5 の新しいタグをサポートすることができます。もちろん、成熟したフレームワークを直接使用するのが最善の方法です。現在、この考え方に基づいたフレームワークが複数あり、最も一般的に使用されているフレームワークは html5shim フレームワークへの参照を追加するだけです。ページの先頭部分:

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

ログイン後にコピー

HTML5 の新機能の下位互換性

広義の HTML5 には、HTML5、CSS3、および新しい API が含まれます。新しい機能にはブラウザの互換性の問題がある可能性があるため、新しい機能を使用する場合はブラウザがこの機能をサポートしているかどうかを確認することが非常に必要です。ブラウザが新機能をサポートしていない場合でも、適切な下位互換性処理を行うことができます。現在、新機能のサポートを検出する統一された方法はありません。一部の新機能には識別可能な対応する API があり、一部の新機能は特定の技術を介してのみ識別できます。幸いなことに、海外の熱心なエンジニアが新しい機能を検出するためのフレームワークを複数開発しています。その中でも、Modernizr の方が検出精度と使用率が高くなります。

Modernizr フレームワークの原理は、ブラウザが新しい機能をサポートしているかどうかを自動的に検出し、対応するクラスをタグに追加することです。ブラウザーが機能をサポートしている場合は、機能名を含む名前のクラスが追加されます。それ以外の場合は、「no-」接頭辞と機能名を付けた名前のクラスが追加されます。同時に、modernizr という名前のオブジェクトも生成されます。このオブジェクトの各機能を表す属性値を判断することで、現在のブラウザがこの新しい機能をサポートしているかどうかを知ることができます。 Modernizr フレームワークには、HTML5shim フレームワークの機能も含まれており、ブラウザ IE8 以下で新しいタグをサポートできるようになります。

Modernizrの使い方はとても簡単です。まず、head部分にフレームワークのJavaScriptファイルを導入します:

<script src="js/modernizr.min.js"></script>

ログイン後にコピー

次に、

htmlタグにno-jsというクラスを追加します:

<html class="no-js">

ログイン後にコピー

If JavaScript isブラウザで無効になっていない場合、ブラウザがページをロードした後、HTML タグのクラスが動的に置き換えられ、追加されます。ロード後の HTML タグは次のようになります。

<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">

ログイン後にコピー

CSS コードでは、これらのクラスを使用して下位互換性コードを追加できます。以下は、複数の背景画像を使用する例です。

#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;
}

ログイン後にコピー

これに興味のある読者。フレームワークでは、Modernizr の公式 Web サイトを参照して、より詳細な例と使用法を確認できます。

オーディオとビデオの互換性

オーディオとビデオはページ内でよく使用される

マルチメディアタグですが、ブラウザの互換性は非常にわかりにくいため、これは別のトピックです。オーディオとビデオは、ブラウザーでネイティブにサポートされている比較的初期の機能であるため、特にモバイルプラットフォームでは、オーディオとビデオの再生はサードパーティのプラグインに限定されなくなりました。オーディオとビデオは重要な部分であり、各ブラウザメーカーは最大の部分を獲得したいと考えています。これは、ブラウザでサポートされるオーディオとビデオの形式の差別化にもつながります。ブラウザでサポートされている音声形式のリストは次のとおりです:

ブラウザ	バージョン	サポートされている形式
Internet Explorer	9.0+	MP 3、AAC
Chrome	6.0 +	Ogg Vorbis、MP3、WAV (9.0+)
Firefox	3.6+	Ogg Vorbis、WAV
Safari	5.0+	MP3、AAC、WAV
オペラ	10.0+	Ogg Vorbis、WAV

大约有80%的浏览器支持HTML5的

<audio controls>
    <source src="elvis.mp3" type=&#39;audio/mpeg; codecs="mp3"&#39;>
    <source src="elvis.oga" type=&#39;audio/ogg; codecs="vorbis"&#39;>
    <!-- 向后兼容代码：如，显示提示信息、提供下载链接使用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>

ログイン後にコピー

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！