“Debugueando” CSS

Algunas técnicas simples para encontrar y corregir errores en CSS

Empezando con CSS, una de las cosas que descorazonan es cuando comienzan a aparecer errores de origen desconocido o de difícil detección: elementos fuera de lugar, campos de formulario que no funcionan, etc.

Muchos de estos problemas se deben a elementos invisibles que obstaculizan o distorsionan el resto del diseño, por ejemplo porque tienen dimensiones o posicionamiento incorrecto que olvidaste entre líneas y líneas de código.

La solución suele ser simple. Lo difícil es encontrar a los culpables.

No hay métodos específicos para debuguear documentos diseñados con CSS, pero si unas pocas recomendaciones:

Si no usas Firefox, instálalo. A continuación instala la extensión Web Developer para ese navegador. Como el nombre lo sugiere, esa extensión instala en Firefox una serie de herramientas utilísimas para el desarrollo web. De ellas, te puede servir la pestaña “information”, y dentro de ella especialmente las opciones “display block size” y “display ID and class details”. La primera dibuja un borde alrededor de todos los elementos HTML de bloque del documento (DIVs, tablas, párrafos, etc), o sea los elementos estructurales dentro de los cuales se encuentra probablemente el culpable de tus dolores de cabeza. Si el problema se trata de uno de estos elementos con dimensiones incorrectas o mal posicionado, debieras ser capaz de verlo a simple vista utilizando esta opción.

Una vez ubicado el elemento, “display ID and class details” te servirá para ubicar la clase o ID del elemento HTML. Con estos datos puedes corregir los atributos de el o los elementos en tu CSS.

La receta de la abuela es más simple. Si sospechas de algunos elementos, ve a tu CSS y dales un color de fondo:

Code (css)

  1.  

  2. #elemento-sospechoso {

  3.     background-color:red;

  4. }

  5.  

Esto te permite ver la extensión real del elemento y si está sobrepasando la superfice de sus vecinos, una causa común de errores. Lo importante es no agregar bordes de color para detectar problemas, ya que el ancho de los bordes se suma al ancho total de los elementos y eso muy probablemente creará nuevos problemas.

Uno de los problemas más comunes es el extraño comportamiento de elementos cuyos elementos “hijos” tienen el atributo “float”. Estos elementos “contenedores” colapsan verticalmente (el borde inferior se pega al superior) causando todo tipo de rarezas. Si le pones color de fondo a estos elementos no verás nada. El elemento está ahí, pero su altura es 0. La solución simple es darle un alto fijo: height:200px. El problema de esto es que el elemento no se ajustará automaticamente a la altura de sus hijos. Por fortuna hay otros métodos sencillos para solucionar esto.

Esto es sólo un breve listado de métodos básicos. ¿Qué técnicas o herramientas les han dado buenos resultados?

de estadobeta

About The Author

Diseñadora grafica / Desarrolladora web / wordpress themes y mas

No Comments