Depurar CSS

El lenguaje para especificar estilos en páginas web, CSS, a veces resulta poco práctico en fase de depuración. Muchas veces es difícil saber qué errores hemos cometido y cómo solucionarlos, pero con ayuda de una serie de consejos y buenas prácticas, podremos minimizar el tiempo que perdemos en la búsqueda de los problemas o errores cometidos cuando algo no se ve exactamente como nosotros queríamos.

En este artículo no pretendemos dar una receta, paso por paso, para hallar inequívocamente los errores CSS de un código dado, porque pueden ser variados y a veces esquivos, sino ofrecer una serie de consejos o prácticas que nos ayudarán a encontrar un problema. De hecho, no siempre una única técnica te ayudará a encontrar el problema exacto en cualquier código CSS, por lo que nos conviene ser expertos y tener a mano varios recursos para no volvernos locos cuando algo falla.

Quizás merezca la pena comentar que en DesarrolloWeb.com se publicó hace tiempo un tutorial sobre cómo hacer tu código CSS más correcto y resumido, así como no cometer algunos erorres de sintaxis básicos. Todo ello lo puedes encontrar en el artículo 10 errores comunes en tu código CSS. Este texto es interesante para ayudarte a no cometer errores, pero no cubre muchos problemas básicos que podemos encontrar cuando probamos los estilos que hemos definido. Es decir, te ayudará mientras estás codificando, para ser más correcto, pero no mucho cuando has cometido el error y quieres saber dónde está y cuál es el problema, que es lo que pretendemos mostrar en este momento.

Así que vamos ya con esas técnicas, herramientas, consejos y pruebas que puedes hacer para saber qué es lo que falló en tu CSS.

Firebug tu mejor amigo para depurar CSS

La herramienta de debug en Firefox, Firebug, es bien conocida es por cualquier desarrollador con un poco de experiencia y amor a su tiempo productivo. Supongo que a estas alturas ya debes conocer cuáles son las ventajas y las ayudas que te ofrece Firebug, pero si no es así, te conviene ir instalando esta extensión de Firefox.

En artículos anteriores ya hemos hablado repetidas veces de Firebug, puedes hacer un búsqueda con el buscador interno de DesarrolloWeb.com por esa palabra o ir directamente a la presentación de Firebug.

Firebug tiene, entre otras cosas, un inspector de elementos que nos permite seleccionar cualquier cosa en la página y ver sus atributos CSS y otros detalles. Es ideal porque te ayudará a encontrar errores en tus CSS, como los siguientes:

• Errores de sintaxis
• Errores en rutas de imágenes y otros recursos
• Errores en tu HTML

Los errores de sintaxis (principalmente los que se producen por los típicos errores humanos) son muy fáciles de identificar con Firebug pues a la hora de inspeccionar elementos te permite ver en un panel los estilos CSS que se están aplicando a esos elementos. Si está faltando algún estilo de entre aquellos que habías definido es que Firefox no lo había entendido y por eso no lo había procesado. Entonces quiere decir que o bien has escrito mal el nombre del atributo CSS o bien su valor, o bien ha faltado un ":" o un ";". Revisa la sintaxis en la declaración de estilos que esté faltando en Firebug.

Otra de las cosas que se averiguan fácilmente con Firebug es si las rutas a las imágenes están correctas. Por ejemplo, puede que hayamos escrito mal una ruta para una imagen de fondo. Entonces Firebug mostrará la ruta que hayamos escrito en el atributo CSS, pero al poner el ratón encima de esa ruta no nos mostrará la imagen que hay en ese archivo. (Si la ruta estuviera bien, nos mostraría una miniatura de la imagen que estamos invocando.

Muchas veces los problemas con CSS pueden venir de haber escrito mal el HTML y en ello Firebug también nos ayudará, al mostrarnos también el código HTML que se ha entendido y que se está procesando en el navegador.

Las razones por las que usar Firebug no acaban. Por poner dos ejemplos más, podríamos señalar que tiene una consola avanzada que nos muestra errores Javascript, pero que también la podemos configurar para que nos muestre los errores de sintaxis CSS que podamos estar cometiendo. Además con Firebug podemos estar atentos a los estilos que cada elemento hereda de otros elementos en los que está contenido. Y es que los problemas muchas veces no son de los estilos CSS de un elemento, sino de los que está heredando de otros elementos padre.

Otros productos similares a Firebug para navegadores distintos de Firefox

Como hemos dicho, Firebug en principio está disponible como extensión de Firefox, pero podemos encontrar productos similares para otros navegadores que nos vendrán bien por dos motivos. Primero por si nosotros preferimos desarrollar con otro navegador, pero sobre todo para poder hacer inspección de elementos (para ver el código HTML que está entendiendo el cliente web los atributos CSS que tienen los elementos de la página) en otros navegadores, cuando algo funciona como esperábamos en Firefox pero no en otros browsers.

IE Developer Toolbar:
Un complemento para Internet Explorer 7, ya que Internet Explorer 8 incluye herramientas para desarrolladores en su instalación básica que pueden ayudarnos a inspeccionar elementos.

DebugBar para Explorer:
Otro complemento muy interesante para Explorer que tiene múltiples opciones para debug e inspección de código de páginas web.

Firebug para Google Chrome:
Chrome, el navegador de Google, incluye herramientas similares a las que nos aporta Firebug en todas sus instalaciones. Sin embargo, también existe la herramienta Firebug en versión compatible con Chrome.

Opera Dragonfly:
Un kit de herramientas para desarrolladores que funcionan dentro del navegador Opera.

Validar tu hoja de estilos con un validador CSS

Validar la hoja de estilos CSS ha sido según mi experiencia clave para encontrar un error en situaciones confusas. Hay ocasiones que no se encuentra fácilmente el error con Firebug o que el error se muestra en unos navegadores y otros no.

Por ello, siempre es una buena idea validar tu código CSS. Si tu código CSS tiene algún problema el validador te alertará sobre ello y podrás corregirlo. Quizás ese error no significaba un problema en un navegador en concreto y sí en otro.

Existen varios validadores CSS, pero quizás el que más nos interese es el que comentamos en el artículo Herramienta del W3C para validación de hojas de estilo

En diferentes navegadores existen atajos para acceder a los validadores, a través de opciones del propio navegador o a través de extensiones. Por ejemplo, en Opera, podemos acceder al validador a través de la tecla rápida ALT + CTRL + Mayúsculas + U.

Aislar y reducir el código HTML

En el caso de que seamos incapaces de detectar el problema de nuestro código CSS, a pesar de utilizar un inspector de elementos como el que nos ofrece algún complemento como Firebug, podemos probar algo más laborioso. Se trata de aislar el código fuente que te está dando el problema, o reducirlo todo lo posible para simplificarlo, de modo se cambie el contexto donde se produce el error, para ver qué si eso nos da una pista.

Imagina que tienes una columna que ocupa más anchura de la que debería. Podrías hacer lo siguiente. Vas quitando el código HTML de cada uno de los elementos que hay en esa columna y viendo si ocurre algún cambio. Si quitando un elemento, como una tabla, una división con DIV, un formulario, un banner o cualquier otra cosa, todo vuelve a funcionar, puedes entender que algo con ese elemento está provocando el problema.

Como se puede imaginar, esta técnica es sólo un poco de prueba y ensayo, pero siempre procurando quitar cosas en tu código, haciéndolo cada vez más simple y por consiguiente más sencillo para localizar el problema. Claro que esta técnica representa más trabajo y es sólo un recurso para cuando estás bastante desesperado, porque teóricamente con Firebug sería más fácil encontrar el fallo. De hecho, esta era una de las técnicas más utilizadas para encontrar problemas cuando no existían herramientas como Firebug.

Utilizar un DOCTYPE

Este no es un truco para hacer debug de CSS, pero es una práctica que ayudará mucho a que nuestras tareas de depuración sean mucho más sencillas y no nos desesperemos intentando encontrar la solución a problemas tontos. Sobre todo, es un consejo importante para que tengamos menos errores de compatibilidad de nuestra página entre distintos navegadores.

El DOCTYPE es una cadena de texto que se debe incluir al principio del código HTML, para decirle qué versión de HTML o XHTML estamos utilizando. Distintos DOCTYPES pueden hacer que un mismo código HTML o CSS se vea de distinta manera, pero no es ese el problema. Lo importante es que con un DOCTYPE declarado todos los navegadores atenderán a ese tipo de documento e interpretarán el código HTML + CSS de una manera más similar.

Mi recomendación es indicar un DOCTYPE al comenzar tu trabajo e ir desarrollando tu sitio web poco a poco con ese DOCTYPE activo desde el principio. No importa mucho qué DOCTYPE uses, pero sí importa que al menos uses uno de ellos. Así tendrás muchas más probabilidades que el trabajo que estás realizando se vea igual en todos los navegadores. Es mejor que colocar el DOCTYPE desde el principio y no al final, puesto que en el momento que lo hagamos puede haber algunos elementos de la página o estilos CSS que cambien su manera de mostrarse.

Algunos DOCTYPE con los que podemos trabajar, con su explicación sobre qué significan, podemos verlos en el artículo Doctype HTML.