Je crée une application Web à utiliser sur des PC. Quelles sont les balises HTML5 à éviter pour éviter les problèmes de compatibilité avec les navigateurs comme IE8 et supérieur?

Remarque: la plupart des questions datent de 1 à 3 ans sur ce sujet.

Vous avez demandé quelles balises HTML5 éviter.

Eh bien, certaines des balises HTML5 de ma connaissance ont été faites pour des raisons sémantiques. comme le suivant par exemple.

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

Ils sont presque parfaits pour travailler avec, et nécessitent juste un peu de CSS, par exemple. display: block;pour fonctionner normalement dans la plupart des navigateurs, bien que dans les anciens navigateurs ie. Internet Explorer, vous devez créer un élément en Javascript pour qu'il soit compatible.

Voici un exemple.

document.createElement('article');

Définirait le <article> élément pour une utilisation dans l'ancien Internet Explorer.

Pour les balises HTML5 plus avancées qui nécessitent la fonctionnalité Javascript pour fonctionner, certaines sont les suivantes.

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

Ces éléments sont plus difficiles à prendre en charge / à éviter dans les anciens navigateurs. Bien que j'aie inclus un lien vers les polyfills multi-navigateurs en bas, bien que je ne les ai pas personnellement étudiés.

Je dirais donc que tout élément qui ne nécessite pas de fonctionnalité Javascript est parfaitement adapté à une utilisation avec un tout petit peu de code de support multi-navigateurs.

Si votre ciblage > IE8, vous devriez être bien si vous utilisez un shiv.

Comment appeler les anciens navigateurs? <IE9

Le support du navigateur pour les balises HTML5 est aujourd'hui.

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

Ne sont pas pris en charge par Internet Explorer moins de 8 mais peuvent être corrigés de cette manière.

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

Et <audio> <video> <canvas>ne sont pas pris en charge dans <IE 9

L' <embed>élément a un support partiel dans > IE8

Vous devriez également examiner cette balise.

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

Cette metabalise indique à Internet Explorer d'afficher la page dans le mode IE le plus élevé disponible, au lieu de passer en mode de compatibilité et de rendre la page comme le ferait IE7 ou 8. Plus d'informations à ce sujet ici .

Liens d'assistance HTML5

Pour un Kick Start, vous pouvez consulter HTML5 BoilerPlate

Pour les tableaux de support de compatibilité du navigateur, vous pouvez consulter - http://caniuse.com/

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

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

Mettre à jour

Comme mentionné dans un commentaire

Soyez prudent avec la balise meta compatible X-UA. Si vous utilisez quelque chose comme le passe-partout html5 qui a des commentaires conditionnels entourant l'élément (cela se produit également avec le doctype IIRC html5), vous pouvez rencontrer des problèmes avec IE9 se forçant en mode standard IE7 même avec la balise. IE frappe à nouveau

Vous voudrez peut-être vous pencher là-dessus, je n'ai rien à étayer pour le moment.

Généralement, il y a des problèmes.

On m'a dit que votre question est formulée pour poser des questions sur les balises HTML 5, mais il est également utile d'examiner les nouvelles fonctionnalités à la lumière de tout Javascript que vous pourriez trouver ou écrire.

En pratique, la méthode recommandée consiste à tester l'existence de la fonctionnalité plutôt qu'un navigateur spécifique. Le script Modernizr peut être utile à cet égard, mais il existe également des rapports sur des fonctionnalités indétectables dans HTML5 .

Certaines fonctionnalités comme local storagerevenir à IE8.

D'autres, comme FileReader, nécessitent IE10 / Firefox21 / Chrome27

Pour obtenir des informations à jour, essayez http://caniuse.com

Écrivez HTML 5 comme vous le feriez normalement et utilisez Shims pour assurer la compatibilité avec les anciens navigateurs. Il suffit d'être prudent avec les API Javascript, car celles-ci sont difficilement adaptables. Si vous essayez de vous en tenir au HTML 4 de base pour des raisons de compatibilité, il ne sert à rien d'utiliser HTML 5.

Pour une comparaison rapide des balises disponibles dans quels navigateurs et du niveau de prise en charge de chaque balise, html5test.com est une excellente ressource.

Vous recherchez une matrice de compatibilité HTML5

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

Aussi, pour la meilleure compatibilité entre navigateurs, je vous suggère d'utiliser ce reset.css créé par Eric Meyer. http://meyerweb.com/eric/tools/css/reset/ Cela permet aux éléments qui diffèrent d'un navigateur à l'autre, de se comporter de la même manière dans tous les navigateurs.