Desarrollo en HTML5 y CSS3

Adam de Boor (Gmail) comentó su intención de reducir sus 443.000 líneas de código JS, actualizando su frontend a HTML5 y CSS3, haciendo que Gmail sea un 12% más rápido. ¿Es el momento de dejar atrás los navegadores más antiguos y desarrollar sólo en HTML5 y CSS3?

HTML5, al contrario que la especificación XHTML2, está pensada para ser retrocompatible (el Doctype es la mínima expresión aceptada por los navegadores antiguos: <!doctype html>; si tu navegador no soporta input type=”mail”, cae por defecto a input type=”text”… pero no se rompe).

Los nuevos tags (article, nav, section, etc) tienen un problema con IE por debajo del 9: no aceptan estilos porque el navegador no los concibe como elementos estilables. Se arregla con una pequeña línea de JS que diga document.createElement(“article”) (para cada nuevo elemento) o directamente agregando la librería desarrollada por Remy Sharp.

Muchos elementos aún no tienen un soporte completo en todos los navegadores, como canvas. Si no puedes evitar usarlos, siempre puedes usar javascript para tener un fallback en caso de no-soporte. Si añadimos también librerías como selectivzr, para poder usar selectores css3, las posibilidades a la hora de maquetar se multiplican.

Remy Sharp llamó “Polyfills” a estas librerías capaces de rellenar huecos de compatibilidad en los navegadores. Aquí hay una lista con un montón de polyfills.

Respecto a que no se vea igual en todos los navegadores, Andy Clarke escribió en un artículo llamado “Ignorance is Bliss” que si no enseñas un mockup en psd a los clientes, sino directamente la maqueta (con sus diferencias entre navegadores, pero que se vea bien en todos), el cliente a veces ni se da cuenta de que su página no se ve igual en IE7 que en Safari, porque solo utiliza un navegador. Está llevado un poco al extremo, pero el caso es que es real, la gente no ve la página en un navegador y luego abre otro para comprobar si es idéntica (sólo lo hacemos nosotros :P), así que con respetar unos mínimos es suficiente, y no hace falta que las esquinas redondeadas de 2px se vean en todos los navegadores.

Sobre la definición del estándard, Jeremy Keith, explica las peleas entre dos consorcios, uno el open source, formado por Firefox y compañía y otro formado por Apple, Microsoft etc. En ese momento había dos estándares, HTML5 y HTML 5 (nótese la diferencia del espacio) puesto que había problemas con la utilización del códec h264 por el cual el consorcio open source no quería pagar derechos de autor por el códec.

En resumen, hoy en día hay fallbacks para casi todo y ya se puede utilizar HTML5 y CSS3, el único “inconveniente” (y viene de lejos aunque se incrementa más con CSS3) viene de parte de algunos clientes que no entienden la naturaleza de la web y pretenden que una web se vea igual en cualquier navegador, hay que saber valorar (y vender!) el “progressive enhancement”como un extra de calidad (que lo es), más que un problema “porque no se ve igual que en IE6″.

Esta entrada fue publicada en Maquetación y etiquetada , , . Guarda el enlace permanente.

Una respuesta a Desarrollo en HTML5 y CSS3

  1. Hola a todos!! Pues yo actualmente estoy buscando maquetadores/desarrolladores HTML5 y CSS3 para un cliente final en Madrid. Si alguno estáis interesado, no dudéis en contactar conmigo porque es una oferta realmente interesante a nivel técnico, a parte de interesante por el cliente :p

    Mis datos son:

    África Muñoz – 914430755 – africa.munoz@hays.es

    Saludines!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>