Polyfills: HTML5 y CSS3 en navegadores desactualizados

La aparición de los estándares HTML5 y CSS3 facilitó la implementación de una enorme cantidad de características que los desarrolladores web suelen querer utilizar. La principal innovación de HTML5 son sus etiquetas semánticas, que permiten a los buscadores reconocer mejor el tipo de contenido que indexan; y CSS3, además de incorporar nuevos efectos visuales, agregó la capacidad de adaptar nuestro sitio a múltiples plataformas gracias a sus Media Queries.

Sin embargo, no siempre podemos explotar al máximo este mundo de posibilidades, ya que los navegadores no adoptan los nuevos estándares al mismo tiempo ni de la misma forma. Particularmente, las versiones de Internet Explorer previas a la 10 no los reconocen o lo hacen de manera parcial. Para resolver este problema, podemos utilizar Modernizr, una biblioteca de JavaScript que permite detectar la compatibilidad del navegador del usuario con cada elemento HTML5 o CSS3 que utilicemos. Dependiendo de la situación, se pueden reemplazar esas características faltantes con diversos polyfills: bloques de código que permiten al navegador soportar características incompatibles con él.

  • html5shiv. Con este script, las etiquetas HTML5 que no sean reconocidas por el navegador se imitan a través de JavaScript. De esta manera, se reproduce el comportamiento que deseamos en browsers anticuados.
  • CSS3 PIE. Una solución para que las versiones 6, 7 y 8 de Internet Explorer puedan reconocer ciertos elementos visuales de CSS3, como bordes redondeados o gradientes.
  • css3-mediaqueries.js. Como puede deducirse, se trata de una biblioteca en JavaScript para que navegadores como Internet Explorer 5, Firefox 1, Opera 7 y sus versiones posteriores puedan manipular los Media Queries de CSS3.

Los propios creadores de Modernizr mantienen una extensa lista de polyfills que podemos utilizar como soporte cuando se detectan características incompatibles con el navegador. Si bien el agregado de scripts siempre ralentiza la carga del sitio, en casos donde contemos con un gran volumen de tráfico desde navegadores antiguos es bueno contar con este tipo de herramientas.