Durante tiempo, escribir una CSS era un proceso totalmente incierto debido a las diferentes renderizaciones que se producÃan y producen en navegadores basados en Gecko, Opera o Internet Explorer (principalmente el último).
En multitud de ocasiones me he preguntado, ¿por qué ese div aparece abajo? o ¿quién está dejando más espacio del querido, el div de arriba o el de abajo?.
Esta situación conllevaba a una serie de permutaciones de pruebas que no llevaban a ningún lado, y si llevaba a alguno no sabÃas bien por qué.
Afortunadamente han ido aparareciendo herramientas que nos permiten saber en cada momento los lÃmites de cada elemento, sus márgenes(en el caso de un elemento de bloque), padding, border, estilos heredados, estilos sobreescritos , etc. y de manera gráfica, sÃmplemente poniendo el ratón encima del elemento.
Estamos hablando de Firebug, plugin para Firefox y fundamental para entender que ese div se ha renderizado abajo porque no cabe en la lÃnea anterior,que un div muestra un margin de 10 y no de 15 porque lo ha heredado de un estilo global o que un<p> está dejando un padding de 5px como estilo por defecto.
Además de eso nos permitirá cambiar al vuelo la CSS y ver los cambios al instante, evitando tener que cambiar el código CSS en el editor, salvar y F5.
Aquà os dejo un pantallazo:
Bueno eso está muy bien, pero es un plugin de Firefox, ¿qué pasa con Internet Explorer?, pues que por fin han sacado una herramienta similiar compatible con explorer 6 y 7 , se llama IE Developer ToolBar
Para finalizar aquà os dejo un otro plugins más para Firefox:
Normalmente estas dos son necesarias ya que entre Firefox e Internet explorer se copa el 98-99% de los navegadores usados a dÃa de hoy, pero siempre queda el compromiso de hacer una web accesible por todos. Opera suele renderizar los contenidos de manera correcta, Camino esta basado en Gecko….
En cualquier caso, ¿conocéis alguna herramienta similar a Firebug en alguno de éstos navegadores más minoritarios?
Comentarios recientes