Estoy creando una aplicación web para usar en PC. ¿Cuáles son las etiquetas HTML5 de las que debe mantenerse alejado para evitar problemas de compatibilidad con navegadores como IE8 y superiores?

Nota: La mayoría de las preguntas tienen entre 1 y 3 años sobre este tema.

Preguntó de qué etiquetas HTML5 debe mantenerse alejado.

Bueno, algunas de las etiquetas de HTML5 que yo conozco se hicieron por razones semánticas. como el siguiente por ejemplo.

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

Es casi seguro trabajar con ellos y solo requieren un poco de CSS, por ejemplo. display: block;para que funcione normalmente en la mayoría de los navegadores, aunque en navegadores más antiguos, es decir. Internet Explorer debe crear un elemento en Javascript para que sea compatible.

Aquí hay un ejemplo.

document.createElement('article');

Establecería el <article> elemento para su uso en Internet Explorer anterior.

Para etiquetas HTML5 más avanzadas que requieren la funcionalidad de Javascript para funcionar, se encuentran algunas como las siguientes.

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

Estos elementos son más difíciles de soportar / modificar en navegadores más antiguos. Aunque he incluido un enlace para cruzar polyfills de navegador en la parte inferior, aunque no los he investigado personalmente.

Por lo tanto, diría que cualquier elemento que no requiera la funcionalidad de Javascript está perfectamente bien para usar con un poco de código de soporte de navegador cruzado.

Si su orientación > IE8, entonces debería estar bien si usa un shiv.

¿Cómo llamo a los navegadores más antiguos? <IE9

El soporte del navegador para etiquetas HTML5 hoy es.

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

No son compatibles con Internet Explorer menos de 8, pero se pueden solucionar de esta manera.

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

Y <audio> <video> <canvas>no son compatibles con <IE 9

El <embed>elemento tiene soporte parcial en > IE8

También debería mirar esta etiqueta.

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

Esta metaetiqueta le dice a Internet Explorer que muestre la página en el modo IE más alto disponible, en lugar de entrar en modo de compatibilidad y representar la página como lo haría IE7 u 8. Más información sobre eso aquí .

Enlaces de ayuda HTML5

Para comenzar, puede consultar HTML5 BoilerPlate

Para conocer las tablas de compatibilidad con el navegador, puede consultar: http://caniuse.com/

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

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

Actualizar

Como se menciona en un comentario

Tenga cuidado con la metaetiqueta X-UA-Compatible. Si usa algo como html5 boilerplate que tiene comentarios condicionales que rodean el elemento (esto también ocurre con el html5 doctype IIRC), puede tener problemas con IE9 forzándose a sí mismo en el modo estándar IE7 incluso con la etiqueta. IE ataca de nuevo

Es posible que desee investigar esto, no tengo nada que respalde esto en este momento.

Generalmente, hay problemas.

Me han dicho que su pregunta está redactada para preguntar acerca de las etiquetas HTML 5, pero también es útil ver las nuevas funciones a la luz de cualquier Javascript que pueda encontrar o escribir.

En la práctica, el método recomendado es probar la existencia de la función en lugar de un navegador específico. El script Modernizr puede ser útil en este sentido, pero también hay informes de características indetectables en HTML5 .

Algunas características como local storagevolver a IE8.

Otros, como FileReader, requieren IE10 / Firefox21 / Chrome27

Para obtener información actualizada, pruebe http://caniuse.com

Escriba HTML 5 como lo haría normalmente y use Shims para garantizar la compatibilidad con navegadores más antiguos. En realidad, solo debe tener cuidado con las API de JavaScript, porque difícilmente se pueden cambiar. Si está tratando de ceñirse a la línea de base HTML 4 por compatibilidad, no tiene sentido usar HTML 5.

Para una comparación rápida de qué etiquetas están disponibles en qué navegadores y qué nivel de soporte para cada etiqueta, html5test.com es un gran recurso.

Está buscando una matriz de compatibilidad HTML5

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

Además, para obtener la mejor compatibilidad entre navegadores, le sugiero que utilice este reset.css creado por Eric Meyer. http://meyerweb.com/eric/tools/css/reset/ Esto hace que los elementos que difieren de un navegador a otro, se comporten igual en todos los navegadores.