Todo maquetador web tarde o temprano tiene que enfrentarse a la frustrante tarea de probar la página en diferentes navegadores: lo que se ve bien en Firefox no se ve bien en Internet Explorer, eso que se muestra a la derecha en Chrome se sale de la pantalla en Safari, en mi iPhone se ve bien pero en el iPhone del cliente sale todo movido… ¿Y si os digo que siguiendo estos consejos podéis hacer que todas esas frases pasen a formar parte del pasado?
Todos hemos escuchado alguna vez a un abogado decir aquello de «depende del juez que nos toque», lo cual no deja de ser curioso porque se supone que la ley es la misma para todos. Algo parecido pasa con los navegadores: si bien el HTML está considerado un estándar, cada navegador lo interpreta a su manera, llegando en ocasiones a extremos del todo insospechados.
A lo lago de la historia se ha luchado contra esta torre de Babel utilizando hacks, estilos condicionales o archivos CSS distintos para cada navegador, pero dada la cantidad de variantes de navegadores y sistemas operativos existentes actualmente esas técnicas han quedado desfasadas.
La metodología que hemos venido usando estos últimos años ha sido la de maquetar en Firefox, creando un archivo css «maestro», para después mediante programación detectar el navegador y añadir un archivo css con las particularidades de cada uno.
Sin embargo, con la llegada de HTML5 es posible crear una web con un estilo único que sirva para todos los navegadores, simplemente siguiendo estos 5 consejos:
1. Maquetar correctamente
No por obvio este punto deja de ser importante: una página debe tener una estructura determinada, definir correctamente el doctype, huir de iframes y tablas (por si algún despistado en la sala) y utilizar las etiquetas para lo que fueron concebidas (si vas a maquetar una lista ¡utiliza <ul> y <ol>!).
2. Utilizar estilos reset en CSS
Una buena práctica es cargar un archivo CSS de estilos reset, llamados así porque tienen el propósito de igualar los estilos por defecto de todos los navegadores. En general se centra en tamaños, márgenes y paddings, consiguiendo que al comienzo de nuestra labor los estilos estén equiparados.
3. Usar javascript para navegadores obsoletos
Dado que utilizaremos HTML5, los navegadores antiguos no serán capaces de interpretarlo. Por eso se hace necesario incluir unos scripts que darán a nuestro querido IE8 o inferior la capacidad de «entender» HMTL5.
4. Validación W3C
Casi con un 99% de seguridad, si tu página pasa el test de validación W3C se verá correctamente en la mayoría de navegadores. No somos máquinas y es posible que se nos vayamos dejando «detalles» conforme maquetamos, así que es recomendable que cada cierto tiempo pasemos el validador para que nos muestre lo que estamos haciendo mal.
5. Solo por si acaso: ficheros CSS para cada navegador
Si has seguido los otros 4 consejos es muy probable que no necesites ningún retoque en tus estilos, pero si este fuera el caso siempre nos quedará la opción de identificar el navegador utilizando PHP y añadir un pequeño archivo CSS con las particularidades de cada uno de los navegadores. Al cargarlo después del archivo de estilos principal los estilos particulares sobrescribirán a los generales.
En GitHub os dejó la estructura básica que solemos utilizar en nuestros proyectos, incluidos el reset de Eric Meyer y los archivos javascript respond.js y html5shiv.js. Espero que os sea de utilidad.
Trackbacks/Pingbacks