Escribiendo CSS para Firefox e Internet Explorer… al mismo tiempo

A la hora de construir/diseñar un sitio web, siempre se recomienda ver nuestro diseño en diferentes navegadores. Lo clásico es tener instalado al menos dos navegadores: Explorer (el que usa la mayoría, 90% de la gente para un sitio no tecnológico) y otro que cumpla con los estándares como corresponde, hoy por hoy, Firefox (que puede llegar ser usado por el 45% de los visitantes, como es el caso de este blog).

Lo típico es tener 2 o 3 navegadores instalados, e ir probando el sitio en uno y otro. La novedad es la aparición de algunas alternativas para realizar esta tarea de forma más simple y potente a la vez.

Opción 1: Extensión IETab para Firefox.
Esta extensión permite instanciar IE dentro de una pestaña de Firefox. Ya no tienes que tener dos ventanas abiertas, sino que en Firefox puedes ver el mismo sitio en uno y otro navegador, con un par de clics.

IETab

Un detalle: Si utilizas Firefox 1.0.x tienes que instalarte dos extensiones, si usas 1.5 beta, sólo una.

Opción 2: CSSVista
Esta es una aplicación independiente, donde en un sector de la ventana puedes editar la hoja de estilos, y en el otro sector, dividido en dos, ves el sitio en Firefox y en IE. Lo mas interesante es esa capacidad de poder editar los estilos y ver al momento los cambios en ambos navegadores.

CSSVista

La aplicación es gratuita, y recién se encuentra en versión 0.1. Sólo tiene una contra: para que funcione tienes que bajarte e instalar el Microsoft .NET Framework Version 2.0, que pesa unos 23 Mb.

Opción 3: Browsershots
Este no es un software que instalas, sino un sitio web que ya he comentado antes.

Browsershots realiza capturas de pantalla de un sitio web que especifiques, en diferentes navegadores, resoluciones y plugins, a saber: Firefox 1.0.4, Galeon, Konqueror 3.3, Mozilla 1.7.8, MSIE 6.0, Opera 8.50 y Safari 2.0, en 800 x 600 y 1024 x 768.

El pro es que tienes bastantes navegadores donde ver tu sitio, incluso varios de otros sistemas operativos. La contra es que sólo funciona con sitios que estén online, y además tienes que esperar unas horas para ver los resultados, aunque puedes llegar a montártelo en tu propio servidor.

De una forma u otra, ya no hay excusas para que nuestros sitios no se vean como corresponde.

Las primeras opciones descubiertas vía Nuhuati, la tercera vía BlogPocket

5 thoughts on “Escribiendo CSS para Firefox e Internet Explorer… al mismo tiempo

  1. Almaju

    Saludos Mario, te comento que el artículo se actualizó, con la aportación de un visitante (Xonico) quien comentó la existencia de dos servicios a través del web, uno browsershots, pero te hizo falta mencionar:

    browsercam

    Que también parece una excelente opción

  2. Strike

    Muy bueno el artículo, de todos modos creo hay un truco que nos puede servir a la hora de dimensionar capas. No es perfecto pero disimula al menos los tamanyos de las capas y otros aspectos gráficos. Solo para CSS.
    es el siguiente, lo vi buscando un validador.

    *{-moz-box-sizing: border-box;box-sizing: border-box}
    p{margin-top:0px;margin-bottom:1em}
    form{margin:0px}
    input{padding:1px}

    Espero que os sirva de algo. salu2.

  3. Gonzalo

    Por favor, trabajo actulizando una pagina web, y me ocurre lo siguiente:

    A la hora de poner el texto lo maqueto para que en explorer se quede correctamente y pruebo la pagina en el fire fox y no se queda igual. por favor espero respuesta a mi correo muchas gracias

    gonzalopezparejo@gmail.com

  4. Mario Post author

    Gonzalo:
    Te recomiendo que primero armes tu sitio para los navegadores que trabajan conformes a los estándares. Una vez que se vea bien, te fijas porqué falla en el Explorer, y aplicas el ‘hack’ correspondiente, que en general los bugs del explorer están documentados.

  5. Pingback: Terminen con el navegador de Bill - Blogpocket

Leave a Reply

Your email address will not be published. Required fields are marked *