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

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

Note: La plupart des questions ont 1 à 3 ans sur ce sujet.

Vous avez demandé quelles sont les balises HTML5 à éviter.

Eh bien, certaines des balises HTML5 à partir de mes connaissances ont été créées pour des raisons sémantiques. comme le suivant par exemple.

Celles-ci sont presque parfaites pour travailler, 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, par exemple. 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

pour une utilisation dans Internet Explorer plus ancien.

Pour les balises HTML5 plus avancées nécessitant une fonctionnalité Javascript pour fonctionner, certaines sont similaires à ce qui suit.

  

Ces éléments sont plus difficiles à supporter / shiv dans les anciens navigateurs. Bien que j’aie inclus un lien pour traverser les polyfills du navigateur en bas, bien que je ne les ai pas personnellement étudiés.

Donc, je dirais que tout élément ne nécessitant pas de fonctionnalité Javascript est parfaitement adapté à l’utilisation d’un tout petit code de support inter-navigateur.

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

Comment appeler les anciens navigateurs?

La prise en charge du navigateur pour les balises HTML5 est aujourd’hui.

 
,
,

Ne sont pas supportés par Internet Explorer moins de 8 mais peuvent être corrigés comme ça.

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 ne sont pas supportés dans

L'élément prend partiellement en charge dans > IE8


Vous devriez également regarder cette balise.

   

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


Liens d'aide HTML5


Pour un Kick Start, vous pouvez consulter HTML5 BoilerPlate

Pour les tableaux de compatibilité de 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 X-UA-Compatible. Si vous utilisez quelque chose comme html5, qui contient des commentaires conditionnels entourant l'élément (cela se produit également avec le doctype IIRC html5), vous risquez de rencontrer des problèmes avec IE9 en mode standard même avec la balise. IE frappe à nouveau

Vous voudrez peut-être examiner cela, je n'ai rien à soutenir 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 de fonctionnalités indétectables dans HTML5 .

Certaines fonctionnalités telles que local storage reviennent à IE8.

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

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

Ecrivez HTML 5 comme vous le feriez normalement et utilisez Shims pour assurer la compatibilité avec les anciens navigateurs. Il suffit de faire attention aux API Javascript, car celles-ci sont difficilement modifiables. Si vous essayez de vous en tenir au HTML 4 de base pour la compatibilité, il est inutile d’utiliser HTML 5.

Pour une comparaison rapide de quels tags sont disponibles dans quels navigateurs, et quel niveau de support pour chaque tag, html5test.com est une excellente ressource.

Vous recherchez une masortingce 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 rend les éléments différents d’un navigateur à l’autre, de se comporter de la même manière dans tous les navigateurs.