Detaillierte Erläuterung der Browserkompatibilitätsprobleme mit neuen H5-Tags

Schließlich handelt es sich bei der HTML5-Spezifikation um eine Spezifikation, die gerade erst definiert wurde. Es gibt immer noch einige Browser, die die neuen Tags und neuen Attribute nicht unterstützen können, insbesondere Browser von IE8 und niedriger. Im Folgenden finden Sie eine Einführung in die browserkompatible Version des Umgangs mit neuen HTML5-Tags.

Schließlich handelt es sich bei der HTML5-Spezifikation um eine Spezifikation, die gerade erst definiert wurde das die neuen Tags und neuen Eigenschaften nicht unterstützen kann, insbesondere für Browser IE8 und niedriger. Im Folgenden werden einige praktische Methoden zur Verwendung neuer HTML5-Tags in Seiten vorgestellt. Der Zweck besteht darin, den neuen Tags in HTML5 eine begrenzte Unterstützung in Low-Level-Browsern zu ermöglichen und nicht die gesamte Seitenfunktion zu beeinträchtigen.

• Lassen Sie den Browser die neuen Tags in der HTML5-Spezifikation erkennen

Im IE8-Browser Die Unterstützung für neue HTML5-Tags wurde noch nicht hinzugefügt, sodass der Inhalt in neuen HTML5-Tags nicht direkt in IE8 angezeigt werden kann. Glücklicherweise unterstützt IE8/IE7/IE6 von der document.createElement-Methode generierte Tags. Mit dieser Funktion können Sie dafür sorgen, dass diese Browser neue HTML5-Tags unterstützen Für die neuen Tags müssen Sie auch den Standardstil des Tags hinzufügen:

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])
}

Auf diese Weise können zwei einfache Teile von

JavaScript

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

-Code und CSS-Code Browser von IE8 und erstellen Die folgenden unterstützen die neuen Tags in HTML5. Der beste Weg ist natürlich, das ausgereifte

Framework zu verwenden. Es gibt derzeit mehrere Frameworks, die auf dieser Idee basieren. Das am häufigsten verwendete ist das html5shim-Framework Verwenden Sie einfach , um zu zitieren:

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

• Abwärtskompatibilität neuer Funktionen in HTML5
  HTML5 im weitesten Sinne umfasst HTML5, CSS3 und die neue
API

. Da neue Funktionen mehr oder weniger Probleme mit der Browserkompatibilität haben, ist es unbedingt erforderlich, bei der Verwendung neuer Funktionen zu prüfen, ob der Browser diese Funktion unterstützt. Wenn der Browser keine neuen Funktionen unterstützt, kann eine entsprechende Abwärtskompatibilitätsverarbeitung durchgeführt werden. Derzeit gibt es keine einheitliche Methode zur Erkennung der Unterstützung neuer Funktionen. Einige neue Funktionen verfügen über entsprechende APIs, die identifiziert werden können, und einige neue Funktionen können nur durch bestimmte Techniken identifiziert werden. Glücklicherweise haben begeisterte Ingenieure im Ausland mehrere Frameworks zur Erkennung neuer Funktionen entwickelt. Unter anderem weist Modernizr eine höhere Erkennungsgenauigkeit und Nutzungsrate auf.

Das Prinzip des Modernizr-Frameworks besteht darin, automatisch zu erkennen, ob der Browser neue Funktionen unterstützt, und die entsprechende Klasse zum 100db36a723c770d327fc0aef2ce13b1-Tag hinzuzufügen. Wenn der Browser eine Funktion unterstützt, wird eine Klasse mit dem Namen der Funktion hinzugefügt. Andernfalls wird eine Klasse mit dem Präfix „no-“ und dem Namen der Funktion hinzugefügt. Gleichzeitig wird auch ein -Objekt

mit dem Namen modernizr generiert. Durch Beurteilung der Attributwerte, die die einzelnen Funktionen dieses Objekts darstellen, können Sie feststellen, ob der aktuelle Browser diese neue Funktion unterstützt. Das Modernizr-Framework umfasst auch die Funktionen des html5shim-Frameworks, wodurch Browser IE8 und niedriger die Unterstützung neuer Tags ermöglichen.

Die Methode zur Verwendung von Modernizr ist sehr einfach. Geben Sie zunächst die JavaScript-Datei des Frameworks im Kopfteil ein:

Fügen Sie zweitens einen Namen mit dem Namen no-js im html-Tag

Klassen:

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

Wenn JavaScript im Browser nicht deaktiviert ist, werden die Klassen im HTML-Tag dynamisch ersetzt und hinzugefügt, nachdem der Browser die Seite geladen hat. Nach dem Laden sieht das HTML-Tag wie folgt aus:

<html class="no-js">

Im CSS-Code können Sie Abwärtskompatibilitätscode hinzufügen, indem Sie diese Klassen verwenden. Das Folgende ist ein Beispiel für die Verwendung mehrerer Hintergrundbilder:

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

Leser, die sich für dieses Framework interessieren, können auf der offiziellen Website von Modernizr nach detaillierteren Beispielen und Verwendungsmethoden suchen.

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

Audio- und Videokompatibilität

• 
  Audio und Video sind auf der Seite Das

  Multimedia
-Tag wird häufig verwendet, aber die Browserkompatibilität ist ziemlich verwirrend, weshalb es hier als separates Thema behandelt wird. Audio und Video sind relativ frühe Funktionen, die von Browsern nativ unterstützt werden, sodass die Audio- und Videowiedergabe nicht mehr auf Plug-Ins von Drittanbietern beschränkt ist, insbesondere auf mobilen Plattformen. Audio und Video sind ein großes Stück Kuchen, und jeder Browser-Hersteller möchte das größte Stück abbekommen. Dies hat auch zu einer Differenzierung der von Browsern unterstützten Audio- und Videoformate geführt. Die Liste der vom Browser unterstützten Audioformate lautet wie folgt:

Browser	Version	Unterstützte Formate
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=&#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
Oper	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>

【相关推荐】

1. Html5免费视频教程

2. 通过phonegap操作数据库的的教程详解

3. H5中indexedDB 数据库的使用方法详解

4. 为什么现在HTML5的优势越来越大

5. \9和\0可能hack IE11\IE9\IE8无效原因详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Browserkompatibilitätsprobleme mit neuen H5-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!