Welche HTML5-Tags kann ich verwenden, ohne mir Gedanken über die Browserkompatibilität zu machen?

93

Ich baue 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.

Swagg
quelle
48
Überprüfen Sie caniuse.com und html5please.com auf aktuelle Informationen zur Browserkompatibilität.
rink.attendant.6
@deceze irgendwelche Links, um mehr über Unterlegscheiben zu erfahren?
Swagg
4
HTML5 Boilerplate ist eine gute Ressource
Michael Peterson
47
IMHO können Sie nichts in der Webentwicklung verwenden, ohne sich um die Browserkompatibilität zu sorgen ...
Uooo
2
Siehe Die drei Ebenen der HTML5-Nutzung . Level 1 Zeug kann problemlos verwendet werden. Level 2-Funktionen werden elegant abgebaut. Für Level 3-Funktionen ist eine Polyfüllung erforderlich, wenn die Unterstützung älterer Browser ein Problem darstellt.
Mathias Bynens

Antworten:

100

Sie haben gefragt, von welchen HTML5-Tags Sie sich fernhalten sollen.

Nun, einige der Tags aus HTML5 wurden meines Wissens aus semantischen Gründen erstellt. wie das folgende zum Beispiel.

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

Diese sind fast in Ordnung zu bearbeiten und erfordern nur ein bisschen CSS, z. display: block;in den meisten Browsern normal zu arbeiten, jedoch in älteren Browsern, dh. 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 einrichten .

Für fortgeschrittenere HTML5-Tags, für deren Funktion Javascript-Funktionen erforderlich sind, gelten folgende.

<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, habe ich sie nicht persönlich untersucht.

Daher würde ich sagen, dass jedes Element, für das keine Javascript-Funktionalität erforderlich ist, mit einem kleinen Teil des browserübergreifenden Supportcodes vollkommen in Ordnung ist.

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 wird in > IE8 teilweise unterstützt


Sie sollten auch in dieses Tag schauen.

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

Dieses metaTag 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. Mehr Infos dazu hier .


HTML5-Hilfslinks


Für einen Kick Start können Sie sich HTML5 BoilerPlate ansehen

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 / ...

Aktualisieren

Wie in einem Kommentar erwähnt

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

Vielleicht möchten Sie das untersuchen, ich habe im Moment nichts, um dies zu belegen.

iConnor
quelle
Wenn Sie angeben können, was ist ein älterer IE? 6,7,8?
Swagg
4
Im Allgemeinen ist älterer IE <IE9
iConnor
Seien Sie vorsichtig mit dem Meta-Tag X-UA-kompatibel. Wenn Sie so etwas wie ein HTML5-Boilerplate verwenden, das bedingte Kommentare um das <html>Element enthält (dies passiert auch beim HTML5-Doctype IIRC), können Probleme auftreten, wenn IE9 sich selbst mit dem Tag in den IE7-Standardmodus zwingt. IE schlägt wieder zu.
Cheezone
Vielen Dank für die Informationen, alle Blog-Beiträge oder einige Informationen, die ich in die Antwort zu diesem Thema hinzufügen kann, wären gut :)
iConnor
12

Im Allgemeinen gibt es Probleme.

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

In der Praxis wird empfohlen, die Existenz der Funktion und nicht einen bestimmten Browser zu testen. Das Modernizr- Skript kann in dieser Hinsicht hilfreich sein, es gibt jedoch auch Berichte über nicht erkennbare Funktionen in HTML5 .

Einige Funktionen wie local storagegehen zurück zu IE8.

Andere FileReaderbenötigen IE10 / Firefox21 / Chrome27

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

Paul
quelle
1
Ich muss beachten, dass localStorage & fileReader keine HTML-Tags sind. Das OP fragte, welche HTML5-Tags Kompatibilitätsprobleme haben.
iConnor
Oh ja. Es gibt diese große Liste von semantischen Tags, die in HTML5 gepusht werden, um Ihre Seite maschinenlesbarer und vielleicht SEO-freundlicher zu machen [oder vielleicht auch nicht]. Es gibt einige neue Eingabeelemente. Ich nehme an, einige davon haben möglicherweise Probleme in einem oder mehreren Browsern. Ich würde denken, caniuse könnte diese Informationen haben ...
Paul
8

Schreiben Sie HTML 5 wie gewohnt und verwenden Sie Shims , um die Kompatibilität mit älteren Browsern sicherzustellen. Sie müssen nur mit Javascript-APIs wirklich vorsichtig sein, da diese kaum shimbar sind. Wenn Sie versuchen, sich aus Kompatibilitätsgründen an HTML 4 zu halten, macht die Verwendung von HTML 5 keinen Sinn.

täuschen
quelle
7
Ich würde gerne <!DOCTYPE html>als oberste Zeile anstelle dieser verfluchten langen hässlichen Dinge verwenden, die uns in früheren Zeiten aufgezwungen wurden.
Paul
Wenn dies das einzige ist, was sich zwischen Ihren HTML 4- und "HTML 5" -Dokumenten ändert ... worum geht es dann? :)
täuschen
4

Für einen schnellen Vergleich, welche Tags in welchen Browsern verfügbar sind und welche Unterstützung für jedes Tag verfügbar ist , ist html5test.com eine hervorragende Ressource.

Burhan Khalid
quelle
2

Sie suchen nach einer HTML5-Kompatibilitätsmatrix

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

Bradgonesurfing
quelle
2
Beachten Sie: "Die sachliche Richtigkeit dieses Artikels kann durch veraltete Informationen beeinträchtigt werden. Bitte aktualisieren Sie diesen Artikel, um aktuelle Ereignisse oder neu verfügbare Informationen widerzuspiegeln. (März 2013)"
gersande
1
Ja, das ist möglicherweise wahr, aber im Allgemeinen html5 compatabilitybin ich sicher, dass es viele Ressourcen gibt.
Bradgonesurfing
2

Für die beste Cross-Browser-Kompatibilität empfehle ich außerdem, diese von Eric Meyer erstellte reset.css zu verwenden. http://meyerweb.com/eric/tools/css/reset/ Dadurch verhalten sich die Elemente, die sich von Browser zu Browser unterscheiden, in allen Browsern gleich.

Pacuraru Daniel
quelle