“Debugueando” CSS
Visita este artículo en http://www.estadobeta.com/2007/01/17/debugueando-css/
Por Ismael en CSS, artículos, tipsAlgunas 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:
-
-
#elemento-sospechoso {
-
background-color:red;
-
}
-
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?
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
1/17/2007 at 8:23 pm
Como muchos navegadores renderean con características distintas ciertos elementos (el rendereo por defecto), una buena alternativa es “neutralizar” el despliegue de elementos como los li, ul, ol, h1 y formularios.
Cuando no efectúo esta neutralización, suele suceder que en explorer y firefox haya inconsistencias de despliegue.
Siempre agrego esta neutralización al comienzo de mi código y se basa en dejar los margenes y paddings en 0.
1/17/2007 at 9:18 pm
Hola gente de estado beta, llevo poco tiempo metido en esto de los estandares web pero ya estoy dominando en conjuno los codigo CSS y HTML , pero me pasa algo no menor , acabo de terminar de hacer un sitio y lo pude testear en Safari, Opera, Firefox y el desagradable pero no menor E7, sin novedades hasta ese momenento cuando lo probe en E6 y ahi el sitio se veia PESIMO no habia estructura por niun lada ufff , ahora les queria preguntar por alguna clave digamos para que al momento de crear algo pueda ser correcto para los diferentes navegadores, yo se que explorer de apoco ha ido entendiendo esto de los estnadares, pero queria saber sus consejos al momento de desarrollar un trabajo y sabiendo que quizas mi público objetivo solo navega en EXPLORER , uuufff jajaj sorry por lo extenso pero espero recibir alguna ayudade parte de ustedes , gracias y los felicito por los contenidos.
1/18/2007 at 5:10 am
Pues yo os recomiendo FIREBUG, una extensión para Firefox que entre otras bonitas funcionalidad tiene un editor CSS que permite ir editando el código CSS y ver como queda en el navegador y una función LAYOUT que permite ver los tamaños de los borders, margins & padding de un objeto dado.
To Pablo:El problema del IExploter
Más información comentarios condicionales
Nosotros lo que hacemos es trabajar en paralelo con Firefox y Explorer con la extensión IETab para firefox, te permite cambiar el motor del navegador de la pestaña que estás viendo entre Firefox y Explorer. De esta forma, el desarrollo se va haciendo en paralelo, incluyendo en la hoja de estilos específica para el IE, aquellos estilos que ajusten al explorer, sobretodo, los anchos de capa.
Conclusión: Hay que diseñar con paciencia y en paralelo según los estándares del W3C y del puto internet explorer
1/18/2007 at 10:35 am
Pablo: a ver si encuentras algo de utilidad en este artículo previo.
1/18/2007 at 11:51 am
GRACIAS chicos por la ayuda, tratare de poner en práctica lo que me han comentando con tanta buena onda… tengo otra consulta que puede ser hasta un poco patudo pero como dicen por ahi ” no se pierde nada en preguntar “. estoy terminando un proyecto que ya está listo y sería de bastante ayuda que alguien me pueda ” asesorar ” o ayudar directamente, yo se que el mundo de hoy prima el dinero, y si bien no tengo mucho podria hacer una retribución quizas nombrando dentro del sitio etc etc etc. bueno esperare si alguien se animapero muchas gracias desde ya saludos y que estén bien .
bye…
1/18/2007 at 12:54 pm
También es útil instalar el Internet Explorer Developer Toolbar.
1/18/2007 at 12:57 pm
[…] “Debugueando†CSS - Estado Beta […]
1/18/2007 at 6:37 pm
Con la nueva versión de webdeveloper, hasta los iconos están nice =}
1/19/2007 at 1:37 am
Excelente artículo man. Muy buenos datos, aunque personalmente sigo prefiriendo más la receta de la abuela. Te hace estar siempre dentro de los rangos de conocimiento, debes buscar sí o sí el error y eso implica sí o sí indagar, urguetear en el entorno del código, por lo que mantienes en constante recuerdo lo que escribes. Bueno esto es lo que hace la “tota” =P
Suerte.
2/7/2007 at 8:39 pm
wakala eszto0 esz un aszko0 dl dmo0nio0 aszkisz =/ szimplementhee ami nu me gusto0 nada po0ke nu lo0sze =/ szle kuesz adio0 WH/ALGUIEN MSZ =) ESZTO0 ESZ UN ASZCO0 D PAGINA ESZ LA VERDAD=/
9/19/2007 at 8:28 am
necesito saber como abrir los archivos de audio msz de un tal pianito estudio y los quiero pasar a wav. de krystal engine que es un editor de sonido,alguien me puede decir como???gracias les agradece un musico!