Category Archives: Polyfills

HTML 5: Soporte en navegadores

Soy fan number one del HTML 5 y el CSS3 que nos permite crear cosas que llavamos soñándo desde años. Pero como no todo el campo es orégano, el standar todavía no se ha cerrado y la implementación está siendo desigual, como desigual está siendo el soporte en navegadores.

Esto es algo que nos lleva a una lucha diaria con el tan deseado por unos y el tan temido por otros cross browser. Y digo temido porque todavía sigo teniendo pesadillas con el cliente que exige que su página se vea al pixel en el navegador de su oficina que no se ha actualizado desde el origen de los tiempos.

Nos quedan tres alternativas:

  1. Seguir maquetando las webs en XHTML y esperar hasta que todos los navegadores soporten HTML5.
  2. Utilizar HTML 5 y esperar a que todos los que utilizan navegadores antiguos se den cuenta de que se están perdiendo algo y se actualicen.
  3. Utilizar HTML 5 y buscarnos la vida para que los despistados de los navegadores obsoletos no se pierdan lo bueno.

Cada uno que elija.

En fin, me encantaría quedarme con la segunda opción, sobre todo porque ahorraría muchísimo tiempo para dedicarlo en mejorar el desarrollo, pero al final siempre acabo en la batalla de la tercera alternativa: probando, testeando, buscando polyfills para que todos se queden tranquilos, y mi conciencia también.

Estos últimos meses me he hecho con algunos recursos que me vienen bien para esta tarea de preparar la web para distintos navegadores, y me gustaría compartirlos por si a alguien le puede ayudar en su propia lucha 😉

Can I use

Esta es la web referencial para ver el soporte que tiene en la actualidad cada elemento de HTML y CSS.  Y digo en la actualidad, porque lo tienen al día, e incluso con predicciones de futuro cercano y futuro lejano. Todo un lujo.

http://caniuse.com/

HTML 5 Shiv

Este pequeño script hará que los navegadores que no soporten las etiquetas HTML 5 las entiendan. Se pone en el <head> y ya está, una cosa menos de la que preocuparnos.

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

http://code.google.com/p/html5shiv/

Modernizr

Librería JavaScript que detecta la compatibilidad del navegador con HTML5 y CSS3

http://modernizr.com

Polyffils

Esta palabra tan bonita quiere decir hack, los recursos que utilicemos para que nuestro desarrollo se vea bien en otro navegador sin soporte se denominan así.

Iba a hacer una lista de los más útiles, pero como no es muy productivo reinventar la rueda os dejo un enlace MUST que ha creado Paul Irish http://paulirish.com/ que tiene que estar en los marcadores de cada uno de nosotros.

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

En siguientes posts explicaré los que yo he utilizado hasta el momento.

Estaría bien que contribuyerais nombrando los polyfills que usais vosotros, para que podamos tener feedback entre todos y podamos aprender más.