Cómo detectar la compatibilidad de HTML 5 en el navegador

¿Cuál es la mejor forma de detectar la compatibilidad del navegador para la syntax de HTML 5? ¿Y avisa al usuario si el navegador no es compatible?

Entiendo el tutorial que muestra cómo probar la compatibilidad del navegador para HTML5 . Pero tengo curiosidad por saber si esa es la única manera. ¿Debo inspeccionar todos y cada uno de los elementos?

Eche un vistazo a Modernizr :

Aprovechar las nuevas capacidades de HTML5 y CSS3 puede significar sacrificar el control sobre la experiencia en navegadores antiguos. Modernizr 2 es su punto de partida para crear los mejores sitios web y aplicaciones que funcionen correctamente independientemente del navegador o del dispositivo que utilicen sus visitantes.

Gracias a las nuevas pruebas de Media Query y a la micro biblioteca de YepNope.js incorporada como Modernizr.load (), ahora puede combinar la detección de características con las consultas de medios y la carga de recursos condicional. Eso le da el poder y la flexibilidad para optimizar en cada circunstancia.

Tiene una gran cantidad de métodos integrados para probar las características del navegador y proporciona una forma útil de proporcionar código alternativo para cuando las funciones que desea utilizar no son compatibles.

Más información: http://www.modernizr.com/

La “compatibilidad HTML5” es algo muy vago.

Cuando las personas preguntan acerca de la compatibilidad con HTML5, generalmente significan “¿qué navegadores son compatibles con estas características del navegador nuevo X, Y y Z que quiero usar?”

Hay una gran cantidad de características que se han agregado a los navegadores en los últimos años, y que ahora se conocen comúnmente como “HTML5”.

De hecho, no hay navegadores compatibles con todas las funciones nuevas.

Lo que debe hacer es determinar qué funciones tienen un soporte lo suficientemente amplio como para que valga la pena usarlas, qué características desea usar, pero está feliz de trabajar si se encuentra con un navegador que no las admite y que le ofrece absolutamente tiene que usar para lograr lo que quiere hacer.

Una lista bastante completa de las nuevas funciones del navegador, junto con las tablas de compatibilidad del navegador para todas ellas, está disponible en http://caniuse.com/ (si se desplaza hacia la parte inferior, verá en la tabla de compatibilidad general que la mejor stream los navegadores solo admiten el 89% de las funciones que han probado. Esto mejorará con el tiempo a medida que se lanzan nuevas versiones … pero, por supuesto, también se introducirán nuevas funciones).

Para determinar en tiempo de ejecución si el navegador del usuario admite una función determinada, puede usar Modernizr . Esta es una herramienta basada en Javascript que le brindará un conjunto de clases CSS y banderas de Javascript que le informan qué funciones son compatibles. Puede usar esto para activar el comportamiento alternativo en su sitio si el navegador no admite una función que desee. (Modernizr también incluye la funcionalidad HTML5Shim, que permite a IE al menos manejar páginas HTML que contienen nuevos elementos HTML5).

Para una mayor compatibilidad entre navegadores, hay toda una gama de hacks que se han escrito para permitir que navegadores más antiguos (principalmente IE sean justos) admitan una gama de funciones más nuevas. Puede ver una lista bastante completa de ellos aquí: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Obviamente, tratar de ejecutar más de unos pocos a la vez en IE afectará severamente el rendimiento de su sitio, pero puede ser útil si necesita admitir una o dos características. Mi favorito en este momento es CSS3Pie , que ofrece compatibilidad con IE6 / 7/8 para esquinas redondeadas CSS, sombras y degradados.

Espero que ayude.

Aquí hay un tutorial sobre detección de compatibilidad y capacidades HTML5:

http://diveintohtml5.ep.io/detect.html

Existen detectores HTML5 alternativos que utilizan técnicas similares, pero sugeriría usar Modernizr.

Para resumir el “puntaje” de HTML5, puede diseñar su propio “esquema de marcado”. Sumar puntuación ponderada te da el puntaje total.

El método más simple: en JS crea un nuevo elemento y establece los atributos para que sean un colorpicker (HTML5) en JS, y devuelve el tipo del elemento (es un selector solo si el navegador es compatible con HTML5):

var element = document.createElement("input"); element.setAttribute("type", "color"); return element.type !== "text"; 

¿Necesito inspeccionar todos y cada uno de los elementos?

Nop. Solo las partes que desea usar que no son compatibles con versiones anteriores.

Vea cinco cosas que debe saber sobre HTML5 , especialmente los puntos 1 y 4.

Sugeriría que intentes usar .
Cualquier texto escrito dentro de entre y se mostrará en navegadores que no admitan la etiqueta .
Dado que la etiqueta de audio se agregó recientemente en HTML5.

Esto funciona en IE 11 (y con suerte otros navegadores también).

 // Detect HTML v5 compatibility var isHtml5Compatible = document.createElement('canvas').getContext != undefined; 

Es una toma de la respuesta de Clement y el enlace de Shivan ( http://diveintohtml5.info/detect.html ). La respuesta de Clement no funcionó en IE 11.

En mi caso uso jQuery UI para todo, así que no necesito Modernizr (también me pareció más lento). Leer los comentarios bastante negativos del blog “Cómo usar Modernizr” apoya esta suposición.

Pero ahora jQuery ha dividido la compatibilidad del navegador entre las secuencias de desarrollo v1 y v2, es necesario para las personas que desean admitir navegadores v5 que no sean HTML para cargar CUALQUIER script v1 o v2 jQuery al inicio. Por lo tanto, esta detección de “un trazador de líneas” HTML v5 es perfecta. A continuación, se indica cómo cargo JQuery correctamente con el resultado:

 // Use jQuery v2 for HTML v5 browsers else v1 to support old browsers var jQueryScriptPath = (isHtml5Compatible) ? "/Scripts/jquery-2.0.3.js" : "/Scripts/jquery-1.10.2.js"; document.writeln(" 

Si vota esta respuesta, también vote clemente y las respuestas de Shivan también 🙂