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.

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.

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

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.

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.

Sie suchen nach einer HTML5-Kompatibilitätsmatrix

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

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.