Miguel Monreal Ordiñana

Herramientas para CSS en Firefox e Internet Explorer

Posted on: marzo 24, 2007

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:

Screenshot de Firebug

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:

Web Developer toolbar.

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?

Anuncios

3 comentarios to "Herramientas para CSS en Firefox e Internet Explorer"

muchas gracias, estaba buscando una herramienta para el IE y al parecer mejor aun porque según leo es compatible con el 6 y el 7…menudos son…. voy a ver que pasa con los estilos que no me hace caso a nada el IE, con el firebug en Firefox lo tengo controlado pero usar el IE es una locura que te saca de quisio!
Gracias por la info!

IE = IE developer toolbar, DebugBar, Firebug Lite
Safari = Menu / Preferencias / Avanzado / Herramientas para Desarrrollador
Opera = Opera Developer Toolbar

Te puedes creer que no me salía el nombre de “Web Developer toolbar”??? Dios me estaba volviendo loca! Y Googleando justo me ha salido tu blog… y me has resuelto la duda! jeje! Qué cosas…

Saludicos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: