La gran pregunta con relación al desarrollo de la última versión HTML es: todas las novedades de HTML5 ¿serán soportadas de inmediato por los navegadores más usuales? ¿O tendremos la pesada tarea de una doble codificación que contemple también a aquellos navegadores que no se han actualizado?
La respuesta es mucho más sencilla que la solución. Existe una batalla en la puesta a punto de las herramientas de navegación. Nadie quiere quedarse atrás en el soporte de HTML5 y en breve tendremos grandes novedades referentes a nuevas versiones de Internet Explorer, Mozilla Firefox, Google Chrome y los demás populares navegadores.
Mientras tanto, nos encontramos en medio de una transición durante la cual muchas de las nuevas etiquetas, atributos, características de HTML5, serán procesadas por unos y no por otros.
Aquí trataremos de hacerte llegar alguna información útil para la detección de la compatibilidad de los navegadores, así como dónde investigar la situación de algunos de ellos en cuanto al soporte HTML5 para poder diseñar con HTML5 hoy.
Existen varios métodos para detectar la compatibilidad de un navegador dado con las nuevas etiquetas o atributos de HTML5. Pasaremos a mencionar algunos de ellos.
Detectar soporte HTML5 mediante JavaScript
Tal y como se explica en Dive into HTML5, una de las posibilidades es crear un elemento a través de una etiqueta y luego verificar por JavaScript si uno de sus atributos realmente existe. En caso negativo, significará que el navegador no soporta la etiqueta y/o el nuevo atributo.
function soporteCanvas() {
return !!document.createElement('canvas').getContext; }
if (soporteCanvas) {
// preparemos una animación
} else {
// lo lamento, no hay soporte Canvas }
La detección a través de esta función u otra similar, se basa en el hecho de que –aun cuando el navegador no soporte las nuevas etiquetas- el objeto, conocido o desconocido por el navegador, se almacena en su repositorio de memoria.
Sin embargo, cuando se alude a un atributo, en este caso getContext, el proceso genera un resultado negativo, es decir, una respuesta false. De igual manera puede verificarse el soporte de otras funciones propias de HTML5, como la nueva función de video.
function soporte_video() {
return !!document.createElement('video').canPlayType;
}
if (soporte_video()){
// Este navegador soporta video HTML5
} else {
// No lo soporta, podríamos utilizar Flash
}
Una Biblioteca para Detectar la Compatibilidad: modernizr
Para hacernos la vida más fácil y evitar que debamos desarrollar tantos script de detección, ya existe una extensa biblioteca de código abierto con funciones JavaScript, llamada Modernizr.
Al usar esta librería no sólo podremos detectar la compatibilidad con HTML5, sino también el soporte a variadas propiedades CSS. Para cargar todas las funciones de Modernizr es necesario escribir el código que las active. Este código debe incluirse dentro del <head>de tu página web.
<script src="modernizr.min.js"></script>
A partir de aquí ya estarás en condiciones de verificar las posibilidades de tu navegador en cuanto a, en este caso, su compatibilidad con HTML5. Algunas de las funciones son éstas:
Para verificar soporte canvas.
if (Modernizr.canvas) {
// ahora podemos generar algunos gráficos
} else {
// lástima, no hay Canvas en este navegador
}
Para detectar soporte de video.
if (Modernizr.video) {
// colguemos una película en nuestra página
} else {
// creo que debemos optar por Flash
}
Para verificar el soporte del tipo de input “range”, que permite crear un deslizador.
If (!Modernizr.inputtypes.range) {
$(document).ready(initSlider);
};
En este último caso, si el navegador no soporta “range”, optamos por cargar la función initSlider a nuestro documento de jQuery, de forma tal que al cargar la página la función cumpla con el objetivo de mostrar el slider o deslizador.
Así, podemos utilizar funciones Modernizr para revisar todos los nuevos tipos de input de HTML5.
Como se ve, será muy interesante analizar todas las funciones que brinda Modernizr, una herramienta fantástica que nos ahorrará mucho tiempo en cuanto a la detección de compatibilidad con HTML5.
Otros Recursos y Herramientas Útiles
Mientras buscamos la forma de utilizar todas las novedades de HTML5 y adaptarnos en aquellos casos en que no logremos el soporte, ya hay quienes realizan estadísticas actualizadas sobre el tema.
En el sitio caniuse.com podrás tener acceso a información actualizada sobre el soporte de los navegadores, no sólo con relación a HTML5 sino también con respecto a CSS, APIs JS y otras herramientas de diseño de páginas web. Las tablas de compatibilidad incluyen el desempeño de Internet Explorer, Firefox, Chrome, Safari, Opera, Android Browser. Tienen muy buena presentación y se actualizan tal como los nuevos tiempos lo requieren.
Además, ya existen páginas que nos permiten probar nuestra codificación HTML5 por anticipado y detectar el soporte. Dos de ellas son:
The TryIt Editor (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic)
Rendera (http://rendera.heroku.com/)
Ambos servicios en línea son gratuitos y siguen el mismo principio: una ventana hacia la izquierda donde escribirás el código, y una a la derecha donde verás los resultados del mismo. Una forma interesante de saber si tu navegador soporta la nueva codificación antes de generar tu página.
modificado el 25 agosto, 2017 20:57