Depuración de errores en códigos CSS

Cualquier persona que ha diseñado una página web, aún cuando solo se trate de pruebas para estudiar los lenguajes de diseño,  sabe que es muy frecuente que un diseño no se comporte como se desea. Esto, en la mayoría de los casos, es originado por errores de diversa índole durante el proceso del diseño. Para corregir estos errores, hay que iniciar el proceso de depuración de los códigos que se han generado, proceso que de hacerse simplemente leyendo el código y tratando de ver donde se encuentra el o los errores, puede significar una tarea extremadamente ardua, principalmente cuando se trata de códigos complejos.

A pesar de que en ciertas ocasiones los errores se encuentran en el código HTML, esto es muy poco frecuente y la mayor parte de los casos, se trata de errores cometidos en el código CSS, en cualquiera de los modos de aplicarlo. Los errores más frecuentes son:

1.       El selector se encuentra mal escrito. Este es un error típico, donde el selector (identificador o clase) tiene nombre diferente en el código HTML y en el código CSS. Es uno de los errores más difíciles de identificar, ya que generalmente se trata de pequeños errores, como una letra cambiada o un signo de acentuación, que para su detección necesita de una lectura en detalle.

2.       Las propiedades CSS no se encuentran bien escritas o tienen valores no permitidos. Este error también es bastante frecuente. En la mayoría de las ocasiones, se trata de errores al escribir, aunque también es posible que se trate de una utilización  de un valor en una propiedad que no la soporta.

3.       Errores de prioridad. Las diferentes propiedades y sus respectivos valores, cuentan con un orden de prioridades, que en caso de que dos o más propiedades o sus valores se superpongan, este conflicto se resuelva por este orden de prioridades. Normalmente, las propiedades posteriores (dentro del documento) tienen prioridad sobre las anteriores, por lo que aquella prevalecerá sobre ésta.

4.       Errores de manejo del espacio. Esto es muy frecuente en aquellos elementos que no tienen bordes o fondos visibles que permitan identificar el espacio real que ocupan. También se generan este tipo de inconvenientes cuando se realizan cálculos para la ocupación del espacio, y no se tienen en cuenta alguno de los parámetros que modifican el tamaño que ocupa un elemento, como el espaciado, los márgenes o los bordes.

5.       Errores en el navegador. Mucho menos frecuente es este tipo de errores, lo que es detectable con la utilización de más de un navegador (algo que muchos diseñadores hacen para comprobar la visibilidad de su diseño en todos los navegadores).

Primer paso en la depuración: validar los códigos

Una de las formas más sencillas y prácticas de detectar errores en la formulación de los códigos es la validación de los mismos, mediante la utilización de algunas de las herramientas disponibles para ello. Esto solo es útil en caso de que el o los errores sean de sintaxis, es decir, en la utilización de propiedades o valores incorrectos.

Para validar los códigos, es necesario que se utilice el validador CSS de la W3C. El validador solo es posible utilizarlo cuando el diseño se encuentra en el servidor, por lo que cuando el diseño se encuentra en el ordenador del diseñador, se debe utilizar otro tipo de herramientas, como la extensión Web Developer de Mozilla Firefox, que tiene una función que permite la validación local utilizando el validador CSS de W3C.

La página que muestra los errores de los códigos, permite depurar todos los errores de sintaxis, incluyendo aquellos que no generan errores en la visualización del diseño.

Segundo paso: hacer visibles los diferentes elementos

Esta es una de las primeras estrategias utilizadas por los diseñadores, y que consiste simplemente en hacer que los diferentes elementos que no son visibles tengan alguna propiedad (en forma provisoria y transitoria) que permita la visualización del mismo en pantalla.

Dado que la inclusión de bordes en estos elementos, modifica el espacio que estos ocupan, la mejor solución es la inclusión de un color de fondo. Este tipo de soluciones permite ver si los errores de visualización del diseño están generados por problemas de anidamiento o de espacio, lo que permitirá realizar las modificaciones correspondientes.

Cuando se trata de errores de prioridad o de nombre del selector, también resulta útil modificar algunos de los elementos visibles, como modificar el tamaño de una fuente o el grosor de la misma. En caso de que estas modificaciones no tengan efecto en el diseño, nos encontraremos frente a alguno de estos errores, con lo que podremos verificar si el nombre de los selectores involucrados se encuentran bien escritos (tanto en el documento CSS como en el HTML) o si existe algún conflicto de prioridades que impide la modificación.

Una técnica poco frecuente: utilización de la propiedad “outline”

Esta propiedad genera un contorno en el elemento, que a pesar que puede ser confundido con un borde, a diferencia de la propiedad “border”, no ocupa espacio y no es posible determinar diferentes grosores para izquierda, derecha, arriba y abajo, como en el caso de los bordes.

Además de poder utilizarla en los elementos en forma individual, tal como se ha descrito para la utilización de color de relleno, Chris Page ha propuesto una solución muy ingeniosa en su artículo A Handy CSS Debugging Snippet, que consiste en hacer que todos los elementos de la página adquieran en forma transitoria un borde de este tipo, que permite identificar todos los elementos y el espacio que ocupan.

Para ello, basta con incluir el siguiente código en el CSS del diseño que estamos desarrollando:

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

Utilización de herramientas de los navegadores

Otra de las formas de solucionar los errores en los códigos de nuestras páginas web, es la utilización de la mejor herramienta disponible en la actualidad, que es el plugin “Firebug” de Mozilla Firefox. Firebug posee dentro de sus varias herramientas, un botón que permite que, cuando el puntero pasa por encima de cualquier elemento, este adquiera un borde y un fondo semitransparente que permite visualizarlo correctamente.

Además, cuando se selecciona un elemento, Firebug muestra el selector CSS que determina las propiedades del elemento, junto con los elementos padre que le heredan sus propiedades, con lo que la detección de posibles errores es mucho más sencilla. Además de estas funciones, Firebug presenta muchas otras ayudas para los diseñadores de páginas web.

Luego de la aparición de esta herramienta, otros navegadores han implantado algunas ayudas para los diseñadores, pero ninguno es tan completo como el que hemos nombrado. Sin embargo, la detección de los errores que se producen en los navegadores Internet Explorer no se pueden detectar mediante su utilización, por lo que para ello se debe utilizar algunos de los métodos descritos anteriormente.