07/08/2013

Polyfills: HTML5 y CSS3 en navegadores desactualizados

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.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce