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


93

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.


48
Consultez caniuse.com et html5please.com pour obtenir des informations à jour sur la compatibilité du navigateur.
rink.attendant 6

@deceze des liens pour en savoir plus sur les cales?
Swagg

4
HTML5 Boilerplate est une bonne ressource
Michael Peterson

47
À mon humble avis, vous ne pouvez rien utiliser dans le développement Web sans vous soucier de la compatibilité du navigateur ...
Uooo

2
Voir Les trois niveaux d'utilisation de HTML5 . Les trucs de niveau 1 peuvent être utilisés sans problème. Les fonctionnalités de niveau 2 se dégradent gracieusement. Les fonctionnalités de niveau 3 nécessitent un polyfill si la prise en charge des navigateurs plus anciens est un problème.
Mathias Bynens

Réponses:


100

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.


Aussi, si vous pouvez spécifier, quel est l'ancien IE? 6,7,8?
Swagg

4
Généralement plus âgé, IE est <IE9
iConnor

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' <html>é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.
cheezone

Merci pour l'info, tous les articles de blog ou certaines informations que je peux ajouter à la réponse concernant ce problème seraient bons :)
iConnor

12

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


1
Je dois noter que localStorage et fileReader ne sont pas des balises HTML, l'OP a demandé quelles balises HTML5 avaient des problèmes de compatibilité.
iConnor

Oh oui. Il y a cette grande liste de balises sémantiques qui sont poussées dans HTML5 pour rendre votre page plus lisible par machine et peut-être plus conviviale pour le référencement [ou peut-être pas]. Il y a quelques nouveaux éléments d'entrée. Je suppose que certains d'entre eux peuvent avoir des problèmes dans un ou plusieurs navigateurs. Je pense que caniuse pourrait avoir cette information ...
Paul

8

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


7
J'utiliserais volontiers <!DOCTYPE html>comme première ligne au lieu de ces maudites et longues choses laides qui nous ont été imposées dans les temps précédents.
Paul

Si c'est la seule chose qui change entre vos documents HTML 4 et "HTML 5" ... à quoi ça sert? :)
deceze

4

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.


2

Vous recherchez une matrice de compatibilité HTML5

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


2
Remarque: "La précision factuelle de cet article peut être compromise en raison d'informations obsolètes. Veuillez mettre à jour cet article pour refléter les événements récents ou les informations nouvellement disponibles. (Mars 2013)"
gersande

1
Oui, c'est peut-être vrai, mais en général, sur Google, html5 compatabilityje suis sûr qu'il existe de nombreuses ressources.
bradgonesurfing

2

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.