webentwicklung-frage-antwort-db.com.de

Welche HTML5-Tags kann ich ohne Bedenken hinsichtlich der Browserkompatibilität verwenden?

Ich erstelle eine Web-App für PCs. Welche HTML5-Tags sollten vermieden werden, um Kompatibilitätsprobleme mit Browsern wie IE8 und höher zu vermeiden?

Hinweis: Die meisten Fragen zu diesem Thema sind 1-3 Jahre alt.

93
Swagg

Sie haben gefragt, von welchen HTML5-Tags Sie Abstand halten sollen.

Nun, einige der HTML5-Tags wurden meines Wissens aus semantischen Gründen erstellt. wie die folgenden zum Beispiel.

<article> <section> <aside> <nav> <header> <footer> ..ect

Diese sind fast in Ordnung und erfordern nur ein bisschen CSS, z. display: block;, um in den meisten Browsern normal zu funktionieren, jedoch in älteren Browsern, z. Internet Explorer Sie müssen ein Element in Javascript erstellen, damit es kompatibel ist.

Hier ist ein Beispiel.

document.createElement('article');

Würde das <article> Element für die Verwendung in älteren Internet Explorer.

Für fortgeschrittenere HTML5-Tags, für die Javascript-Funktionalität erforderlich ist, sind einige wie die folgenden.

<audio> <video> <source> <track> <embed> And most importantly <canvas> 

Diese Elemente sind in älteren Browsern schwerer zu unterstützen. Obwohl ich unten einen Link zu Cross-Browser-Polyfills eingefügt habe, obwohl ich sie nicht persönlich untersucht habe.

Daher würde ich sagen, dass jedes Element, das keine JavaScript-Funktionalität erfordert, mit einem winzigen Teil des browserübergreifenden Support-Codes problemlos verwendet werden kann.

Wenn Ihr Targeting > IE8 ist, sollten Sie in Ordnung sein, wenn Sie einen Shiv verwenden.

Wie nenne ich ältere Browser? <IE9

Browser-Unterstützung für HTML5-Tags ist heute.

<section>, <article>, <aside>, <header>, <footer>, 
<nav>, <figure>, <figcaption>, <time>, <mark>

Werden von Internet Explorer nicht weniger als 8 unterstützt, können aber so behoben werden.

CSS:

section, article, aside, header, footer, nav, figure, figcaption{
   display: block;
}
time, mark { 
    display: inline-block;
}

Javascript:

var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
    document.createElement(elements[i]);
}

Und <audio> <video> <canvas> werden in <IE 9 nicht unterstützt

Das <embed> Element hat teilweise Unterstützung in > IE8


Sie sollten sich auch diesen Tag ansehen.

 <meta http-equiv="X-UA-Compatible" content="IE=Edge">

Dieses meta -Tag weist Internet Explorer an, die Seite im höchsten verfügbaren IE Modus anzuzeigen, anstatt in den Kompatibilitätsmodus zu wechseln und die Seite wie in IE7 oder 8 zu rendern. Weitere Informationen zu das hier .


HTML5-Hilfslinks


Für einen Kickstart können Sie HTML5 BoilerPlate

Tabellen zur Unterstützung der Browserkompatibilität finden Sie unter - http://caniuse.com/.

HTML5 Shiv - https://github.com/afarkas/html5shiv

Liste der HTML5-Polyfills - https://github.com/Modernizr/Modernizr/wiki/ ...

Update

Wie in einem Kommentar erwähnt

Seien Sie vorsichtig mit dem Meta-Tag X-UA-Compatible. Wenn Sie so etwas wie HTML5-Boilerplate verwenden, das bedingte Kommentare rund um das Element enthält (dies ist auch beim HTML5-Doctype IIRC der Fall), können Probleme auftreten, wenn sich IE9 selbst mit dem Tag in den IE7-Standardmodus zwingt. IE schlägt erneut zu

Vielleicht möchten Sie das untersuchen, ich habe im Moment nichts, was das belegen könnte.

100
iConnor

Im Allgemeinen gibt es Probleme.

Mir wurde gesagt, dass Ihre Frage so formuliert ist, dass sie sich mit HTML 5 -Tags befasst. Es ist jedoch auch nützlich, die neuen Funktionen im Lichte von Javascript zu betrachten Sie könnten finden oder schreiben.

In der Praxis wird empfohlen, anstelle eines bestimmten Browsers zu prüfen, ob das Feature vorhanden ist. Das Skript Modernizr kann in dieser Hinsicht hilfreich sein, es gibt jedoch auch Berichte über nicht nachweisbare Funktionen in HTML5 .

Einige Funktionen wie local storage gehe zurück zum IE8.

Andere, wie FileReader, erfordern IE10/Firefox21/Chrome27

Aktuelle Informationen erhalten Sie unter http://caniuse.com

12
Paul

Schreiben Sie HTML 5 wie gewohnt und verwenden Sie Shims , um die Kompatibilität mit älteren Browsern sicherzustellen. Mit Javascript-APIs muss man eigentlich nur vorsichtig sein, denn diese sind kaum shimbar. Wenn Sie versuchen, sich aus Kompatibilitätsgründen an HTML 4 zu halten, ist die Verwendung von HTML 5 nicht sinnvoll.

8
deceze

html5test.com ist eine großartige Ressource, um schnell zu vergleichen, welche Tags in welchen Browsern verfügbar sind und welche Unterstützung für jedes Tag verfügbar ist.

4
Burhan Khalid

Aus Gründen der bestmöglichen Cross-Browser-Kompatibilität empfehle ich die Verwendung dieser von Eric Meyer erstellten Datei reset.css. http://meyerweb.com/eric/tools/css/reset/ Dies bewirkt, dass die Elemente, die sich von einem Browser zum anderen unterscheiden, sich in allen Browsern gleich verhalten.

2
Pacuraru Daniel

Sie suchen eine HTML5-Kompatibilitätsmatrix

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_ (HTML5)

2
bradgonesurfing