Umgang mit Browserkompatibilitätsproblemen mit neuen HTML5-Tags
PHPz
Freigeben： 2018-10-12 17:31:02
Original
1162 Leute haben es durchsucht
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 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. Der Code lautet wie folgt:
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])
}
Nach dem Login kopieren
Nachdem der Browser das neue Tag unterstützt, müssen Sie auch den Standardstil des Tags hinzufügen:
Auf diese Weise zwei einfache JavaScript Codes und CSS-Codes können dafür sorgen, dass IE8-Browser und niedrigere Versionen die neuen Tags in HTML5 unterstützen. Der beste Weg ist natürlich, ein ausgereiftes Framework zu verwenden. Es gibt derzeit mehrere Frameworks, die auf dieser Idee basieren. Das am häufigsten verwendete Framework ist das Hinzufügen eines Verweises auf das Framework im Kopfteil der Seite:
HTML5 im weitesten Sinne umfasst HTML5, CSS3 und neue APIs. 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 -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 die 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 neue Tags unterstützen können.
Die Methode zur Verwendung von Modernizr ist sehr einfach. Führen Sie zunächst die JavaScript-Datei des Frameworks im Kopfteil ein:
<script src="js/modernizr.min.js"></script>
Nach dem Login kopieren
Zweitens fügen Sie hinzu ein Name für das HTML-Tag No-JS-Klassen:
<html class="no-js">
Nach dem Login kopieren
Wenn der Browser JavaScript nicht deaktiviert, werden die Klassen im HTML-Tag dynamisch ersetzt und anschließend hinzugefügt Der Browser lädt die Seite. Nach dem Laden sieht das HTML-Tag wie folgt aus:
Im CSS-Code können Sie mithilfe dieser Klassen Abwärtskompatibilitätscode hinzufügen verwendet mehrere Hintergrundbilder. Beispiel:
#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;
}
Nach dem Login kopieren
Leser, die sich für dieses Framework interessieren, können auf der offiziellen Website von Modernizr nach detaillierteren Beispielen und Verwendungsmöglichkeiten suchen.
Audio- und Videokompatibilität
Audio und Video sind auf der Seite Multimedia-Tags werden in den Medien häufig verwendet, aber die Browserkompatibilität ist ziemlich verwirrend, weshalb sie 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:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
