That’s the question. Quiero poder depurar y editar el CSS en Internet Explorer de la misma forma que puedo hacerlo con Firefox. O si no es de la misma forma, que haya algo, que me permita hacerlo, sin tener que editar el CSS a ciegas para IE desde Firefox, lo que resulta incómodo e ilógico. No pido que haya algo igual a Firebug, pero me conformaría con una barra lateral al estilo de Edit CSS para Firefox, y que me permita ver y modificar las hojas de estilo en tiempo real.

Depurando CSS en Internet Explorer

Debugbar es un complemento para Internet Explorer que se agrega en forma de barra lateral. Nada menos que recomendada por JMiur la decidí instalar a ver como era. Tal como me comentaba, no es la maravilla de Firebug pero resulta interesante para poder examinar unas cuantas cosas de una página.

Al instalar el complemento y activar la barra lateral de Debugbar, nos aparece una especie de menú con pestañas que se resume en lo siguiente:

• DOM: un DOM inspector o examinador de elementos de la página entre los cuales está el CSS y las etiquetas HTML de la página.
• HTTP(S): un inspector de peticiones HTTP, parametros GET y POST, cookies, etc
• Script: un inspector de funciones Javascript, con una consola JS incluida.
• HTML Check: esta es una de las cosas que más me gusto, y es la validación HTML al instante.
• Info: información general de la página.

La limitación, es que es un depurador, y no permite edición en tiempo real. Pero es de lo mejor que hay si queremos examinar un sitio en IE. Puede descargarse desde este enlace.

Editando CSS en Internet Explorer

Buscando algo que me permita editar CSS en tiempo real para IE, no encontré demasiado, aunque recordé un programa para Windows llamado CSSVista que probé hace bastante tiempo. En aquel entonces me había resultado bastante poco cómodo y engorroso, pero lo probé nuevamente y podría usarlo. La aplicación permite editar CSS no solo en IE sino también en Firefox, actualizando los cambios automáticamente para ambos navegadores:

Desde el programa cargamos la dirección web y luego le damos clic al botón de Edit CSS para comenzar a modificar el estilo de la página. El programa es gratuito y se puede descargar desde aquí.

Otra opción, no tan elegante consiste en un bookmarklet para Internet Explorer (un pequeño código Javascript) que nos abre una ventana popup donde podemos editar las propiedades CSS y ver reflejados los cambios. Para utilizarlo hay que agregar este enlace a los favoritos de IE para tenerlo siempre a mano. Al activarlo y luego de permitir popups para la página que vamos a editar, se abrirá una ventana como la siguiente:

En este enlace se puede ver más información sobre el bookmarklet. Lo he probado con la beta de IE8 y funciona perfectamente.

Y como hacer que IE soporte CSS estandar?

Que gran pregunta! Pero si depende de ellos mismos, aunque las últimas versiones de IE han mejorado algo. En Vagabundia se ha hablado del tema en este artículo y en este otro podemos ver una lista de propiedades CSS soportadas por las diferentes versiones de IE. Lo que es aconsejable, es no comenzar de cero si vamos a diseñar un sitio, sino que busquemos alguna plantilla mínima con CSS validado para ambos navegadores y luego nos póngamos a jugar y lidiar con lo que váyamos agregando. Seguramente va a seguir siendo entretenido mientras los navegadores no se pongan de acuerdo.