VIE, 27 / ENE / 2012
HTML5: los secretos para lograr compatibilidad con los navegadores
Cuando trabajamos con HTML5 surge un tema que genera dudas y que puede complicar nuestros proyectos si no lo sabemos manejar; sí hablamos de la compatibilidad y en esta nota veremos cómo resolverlo.
En notas anteriores les he contado sobre las bondades de HTML5, pero siempre queda en el aire flotando el tema: ¿qué tan compatible es este futuro estándar en pleno 2012?
En términos generales debemos decir que ningún navegador es 100% compatible con todas las características de HTML5 y CSS3. Esta regla se mantiene aún hoy y seguirá por un tiempo, hasta que se estandaricen todas sus características. Claro que en este sentido encontraremos navegadores que presentan mayor compatibilidad que otros.
Para comprender un poco mejor esto, debemos saber que HTML5 comenzó a transitar su ruta hacia la estandarización en el año 2008, con sus primeros borradores. En el 2009 algunos navegadores comenzaron a ofrecer soporte a determinadas características, aunque recién en los años siguientes encontraríamos un soporte más extendido.
Las versiones más recientes de los navegadores más populares del mercado soportan HTML5. Entre ellos: Internet Explorer 9 (muy mejorada en IE10), Firefox 9, Chrome 16, Safari 5.1 y Opera 11.60.
Varios de estos navegadores cuentan con soporte para HTML5 en versiones anteriores, especialmente las surgidas entre 2010 y 2011. En el caso de IE, las versiones 6, 7 y 8 no tienen soporte para HTML5. El primero en dar compatibilidad en esta familia ha sido Internet Explorer 9, lanzado oficialmente en el año 2011.
Una buena herramienta para saber el nivel de soporte de HTML5 es el HTML5 Test. Además de ofrecernos un puntaje global, nos indica el soporte de HTML5, ítem por ítem, del navegador que estamos usando para pasar el test.
Cómo resolver la compatibilidad con HTML5
Seguramente esta es una de las grandes cuestiones. La clave está en detectar características soportadas por el navegador. ¿Cómo es esto? Bueno, primero y principal es probable que no necesitemos utilizar todas las características de HTML5 en todos nuestros proyectos. Lo que debemos hacer, mediante JavaScript, es detectar si la característica que estamos incluyendo es soportada por el navegador.
Una librería Open Source que nos simplifica mucho este camino es Modernizr. De una forma sencilla, nos permite incluirla en nuestras páginas y comprobar la compatibilidad con el navegador.
Junto con Modernizr podemos utilizar otra librería llamada yepnope, la cual nos facilitará el trabajo de realizar nuestra estructura condicional para indicar que contenido utilizar si hay soporte HTML5 en el navegador o qué hacer en caso contrario.
Finalmente, tendremos la posibilidad de escribir nuestra solución para el caso en que no encontremos compatibilidad. En algún caso podrá ser un código JavaScript, un CSS alternativo o bien un fallback a una película Flash en el caso de video y audio. Si buscamos hacer más corto este camino, podremos utilizar HTML5 Cross Browser Polyfills. Estas librerías están basadas generalmente en HTML, CSS y especialmente en JavaScript. Dentro de las soluciones que encontraremos se destacan alternativas para audio, video, formularios, geolocalización, SVG, Canvas, Web Storage, Web Sockets, Web Workers, entre otras.
En pleno 2012, Internet Explorer 6 se encuentra prácticamente fuera de carrera. Números menores al 3% en el mercado de habla hispana son contundentes y su uso baja cada día más. Los navegadores de última generación soportan HTML5, pero ninguna en su totalidad, por lo cual es importante detectar características a la hora de usar HTML5. Finalmente, la plataforma móvil, en especial los dispositivos iOS y Android de alga gama, son una gran tentación para exprirmir HTML5 al máximo. Esto quiere decir que todo fluye hacia el mismo lugar, en otras palabras, este año tendremos un gran crecimiento en el uso de HTML5 pero … ¡No olvidemos la compatibilidad!
por Damián De Luca
@damiande
Autor del libro: HTML 5: Entienda el cambio, aproveche su potencial.
Cuando trabajamos con HTML5 surge un tema que genera dudas y que puede complicar nuestros proyectos si no lo sabemos manejar; sí hablamos de la compatibilidad y en esta nota veremos cómo resolverlo.
En notas anteriores les he contado sobre las bondades de HTML5, pero siempre queda en el aire flotando el tema: ¿qué tan compatible es este futuro estándar en pleno 2012?
En términos generales debemos decir que ningún navegador es 100% compatible con todas las características de HTML5 y CSS3. Esta regla se mantiene aún hoy y seguirá por un tiempo, hasta que se estandaricen todas sus características. Claro que en este sentido encontraremos navegadores que presentan mayor compatibilidad que otros.
Para comprender un poco mejor esto, debemos saber que HTML5 comenzó a transitar su ruta hacia la estandarización en el año 2008, con sus primeros borradores. En el 2009 algunos navegadores comenzaron a ofrecer soporte a determinadas características, aunque recién en los años siguientes encontraríamos un soporte más extendido.
Las versiones más recientes de los navegadores más populares del mercado soportan HTML5. Entre ellos: Internet Explorer 9 (muy mejorada en IE10), Firefox 9, Chrome 16, Safari 5.1 y Opera 11.60.
Varios de estos navegadores cuentan con soporte para HTML5 en versiones anteriores, especialmente las surgidas entre 2010 y 2011. En el caso de IE, las versiones 6, 7 y 8 no tienen soporte para HTML5. El primero en dar compatibilidad en esta familia ha sido Internet Explorer 9, lanzado oficialmente en el año 2011.
Una buena herramienta para saber el nivel de soporte de HTML5 es el HTML5 Test. Además de ofrecernos un puntaje global, nos indica el soporte de HTML5, ítem por ítem, del navegador que estamos usando para pasar el test.
Cómo resolver la compatibilidad con HTML5
Seguramente esta es una de las grandes cuestiones. La clave está en detectar características soportadas por el navegador. ¿Cómo es esto? Bueno, primero y principal es probable que no necesitemos utilizar todas las características de HTML5 en todos nuestros proyectos. Lo que debemos hacer, mediante JavaScript, es detectar si la característica que estamos incluyendo es soportada por el navegador.
Una librería Open Source que nos simplifica mucho este camino es Modernizr. De una forma sencilla, nos permite incluirla en nuestras páginas y comprobar la compatibilidad con el navegador.
Junto con Modernizr podemos utilizar otra librería llamada yepnope, la cual nos facilitará el trabajo de realizar nuestra estructura condicional para indicar que contenido utilizar si hay soporte HTML5 en el navegador o qué hacer en caso contrario.
Finalmente, tendremos la posibilidad de escribir nuestra solución para el caso en que no encontremos compatibilidad. En algún caso podrá ser un código JavaScript, un CSS alternativo o bien un fallback a una película Flash en el caso de video y audio. Si buscamos hacer más corto este camino, podremos utilizar HTML5 Cross Browser Polyfills. Estas librerías están basadas generalmente en HTML, CSS y especialmente en JavaScript. Dentro de las soluciones que encontraremos se destacan alternativas para audio, video, formularios, geolocalización, SVG, Canvas, Web Storage, Web Sockets, Web Workers, entre otras.
En pleno 2012, Internet Explorer 6 se encuentra prácticamente fuera de carrera. Números menores al 3% en el mercado de habla hispana son contundentes y su uso baja cada día más. Los navegadores de última generación soportan HTML5, pero ninguna en su totalidad, por lo cual es importante detectar características a la hora de usar HTML5. Finalmente, la plataforma móvil, en especial los dispositivos iOS y Android de alga gama, son una gran tentación para exprirmir HTML5 al máximo. Esto quiere decir que todo fluye hacia el mismo lugar, en otras palabras, este año tendremos un gran crecimiento en el uso de HTML5 pero … ¡No olvidemos la compatibilidad!
por Damián De Luca
@damiande
Autor del libro: HTML 5: Entienda el cambio, aproveche su potencial.
