web-dev-qa-db-fra.com

Quelles balises HTML5 puis-je utiliser sans me soucier de la compatibilité du navigateur?

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

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

html5browsercross-browsercompatibility
93
Swagg

Vous avez demandé de quelles balises HTML5 il fallait se tenir éloigné.

Eh bien, certaines des balises de 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 navigateurs plus anciens, c'est-à-dire. Internet Explorer, vous devez créer un élément en Javascript pour qu'il soit compatible.

Voici un exemple. 

document.createElement('article');

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

Pour les balises HTML5 plus avancées qui nécessitent la fonctionnalité Javascript pour fonctionner, voici quelques exemples.

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

Ces éléments sont plus difficiles à prendre en charge/shiv dans les anciens navigateurs. Bien que j'aie inclus un lien pour traverser les polyfills de navigateur 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é à l'utilisation avec un tout petit peu de code de prise en charge multi-navigateur.

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

Comment appeler les anciens navigateurs? <IE9

La prise en charge 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 comme ceci.

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'élément <embed> Est partiellement pris en charge dans > IE8

Vous devriez également examiner cette balise. 

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

Cette balise meta indique à Internet Explorer d'afficher la page dans le plus haut IE disponible, au lieu de passer en mode de compatibilité et de rendre la page comme IE7 ou 8 le ferait. Plus d'informations sur que ici .

Liens d'assistance HTML5

Pour un Kick Start, vous pouvez consulter HTML5 BoilerPlate

Pour les tableaux de prise en charge de la 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/...

Mise à 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 examiner la question, je n'ai rien à l'appui pour le moment.

100
iConnor

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 de regarder les nouvelles fonctionnalités à la lumière de tout Javascript vous pourriez trouver ou écrire.

Dans la 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 de fonctionnalités indétectables en HTML5 .

Certaines fonctionnalités comme local storage retournez à IE8.

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

Pour des informations actuelles, essayez http://caniuse.com

12
Paul

Écrivez HTML 5 comme vous le feriez normalement et utilisez Shims pour assurer la compatibilité avec les anciens navigateurs. Il suffit de faire très attention aux API Javascript, car celles-ci sont difficilement shimables. Si vous essayez de vous en tenir à HTML 4 de référence pour la compatibilité, il est inutile d'utiliser HTML 5.

8
deceze

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.

4
Burhan Khalid

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 fait que les éléments qui diffèrent d'un navigateur à l'autre se comportent de la même manière dans tous les navigateurs.

2
Pacuraru Daniel

Vous recherchez une matrice de compatibilité HTML5

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

2
bradgonesurfing