Qui les balises HTML5 puis-je utiliser sans se soucier de la compatibilité du navigateur?

Question

Je fais construire une application web pour une utilisation sur des Ordinateurs. Quelles sont les balises HTML5 de rester à l'écart pour éviter les problèmes de compatibilité avec les Navigateurs comme IE8 et plus?

Remarque: la Plupart des questions sont de 1 à 3 ans sur ce sujet.

Answer 1

Vous avez demandé à ce que les balises HTML5 de rester loin de.

Bien Certaines des balises de HTML5 à partir de mes connaissances ont été faites pour des raisons sémantiques. comme les suivantes, par exemple.

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

Ce sont presque bien travailler avec, et juste besoin d'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 sont nécessaires pour créer un élément en Javascript afin de pouvoir être compatible.

Ici est un exemple.

document.createElement('article');

Définissez l' <article> élément pour une utilisation dans les plus anciennes d'Internet Explorer.

Pour les plus avancés balises HTML5 qui nécessitent Javascript fonctionnalité de travailler sont certains, comme la suivante.

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

Ces éléments sont plus difficiles à soutenir/shiv dans les navigateurs plus anciens. Bien que j'ai inclus un lien vers la croix-navigateur polyfills au fond, bien que je n'ai pas personnellement étudié.

Je dirais donc que tout élément qui ne nécessite pas de Javascript fonctionnalités sont parfaitement bien à une utilisation avec un tout petit peu de la croix-navigateur de code de support.

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

Que dois-je appeler les anciens navigateurs? < IE9

Navigateurs pris en charge pour les balises HTML5 aujourd'hui.

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

Ne sont pas pris en charge par Internet Explorer inférieur à 8 , mais peut être fixe 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 <audio> <video> <canvas> ne sont pas pris en charge dans < IE 9

L' <embed> élément a une prise en charge partielle dans > IE8

---

Vous devriez également regarder dans cette balise.

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

Cette meta balise indique à Internet Explorer pour afficher la page dans la plus grande IE mode disponible, au lieu d'aller dans le mode de compatibilité et de rendu de la page que IE7 ou 8 devait faire. Plus d'infos à ce sujet Ici.

---

HTML5 Helper Liens

---

Pour un Coup de pouce, vous pouvez consulter HTML5 BoilerPlate

Pour la compatibilité avec les navigateurs prennent en charge des tables, vous pouvez consulter la - http://caniuse.com/

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

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

Mise à jour

Comme mentionné dans un commentaire

Soyez prudent avec la balise meta X-UA-Compatible. Si vous utilisez quelque chose comme html5 boilerplate qui a des commentaires conditionnels entourant l'élément (c'est également le cas avec le doctype html5 IIRC), vous pourriez rencontrer des problèmes avec IE9 forcer lui-même dans IE7 normes de la mode, même avec la balise. IE frappe à nouveau

Vous aimeriez peut-être cela, je n'ai rien pour le moment.

Answer 2

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

J'ai été dit que votre question est rédigée de façon à poser à propos de HTML 5 balises , mais il est également utile pour consulter les nouvelles fonctionnalités à la lumière de tout code Javascript que vous pourriez trouver ou écrire.

Dans la pratique, la méthode recommandée consiste à tester l'existence de la fonction plutôt que d'un navigateur spécifique. Le Modernizr script peut être utile à cet égard, mais il y a aussi des rapports de indétectable fonctionnalités de HTML5.

Certaines fonctionnalités comme l' local storage revenir à IE8.

D'autres, comme l' FileReader, exiger IE10/Firefox21/Chrome27

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

Answer 3

Écrire en HTML 5, comme vous le feriez normalement, et utiliser des Cales pour assurer la compatibilité avec les anciens navigateurs. Vous ne devez être prudent avec les Api Javascript vraiment, parce que ceux-ci sont à peine cale-mesure. Si vous êtes en essayant de coller à la ligne de base de HTML 4 pour la compatibilité, il n'y a aucun point en utilisant le HTML 5.

Answer 4

Pour une comparaison rapide de ce que les étiquettes sont disponibles dans les navigateurs, et quel est le niveau de prise en charge pour chaque balise, html5test.com est une grande ressource.

Answer 5

Vous êtes à la recherche d'un HTML5 matrice de compatibilité

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