comparte el articulo 

Compatibilidad de tu web con distintos navegadores

Actualizado el 08/08/2008 < > 25 Cometarios

Resumen: Podremos estar satisfechos si conseguimos que se vea igual de bien en los más importantes, como Explorer, Firefox, Opera, Safari y Mozilla.

¿Qué es la compatibilidad web?

Que una web sea compatible con todos los navegadores significa que se vea igual (o muy similar) en todos ellos. Obviamente esto es bastante complicado, podremos estar satisfechos si conseguimos que se vea igual de bien en los más importantes, como Explorer, Firefox, Opera, Safari y Mozilla. Si consigues que se vea bien en estos 5, conseguirás que el 99% de tus usuarios vea correctamente tu web.

El problema radical en que no todos los navegadores interpretan en código HTML y CSS de la misma manera, entre ellos existen pequeñas variaciones que son las que hacen que el resultado no sea el mismo de unos a otros. Algunas de esas diferencias son tan importantes que pueden hacer que partes de tu web no funcionen o no se vean, y como el propósito de hacer una web es que la vea el mayor número de personas (y que éstas la vean correctamente), nos interesa que la web funcione en el mayor número de navegadores posibles.

Por tanto, a la hora de hacer una página web no es suficiente con preocuparse por centrarnos en la audiencia adecuada, registrar un nombre de dominio rompedor o tener un diseño agradable al usuario. Todo esto puede verse ensombrecido si un usuario no ve la página correctamente al entrar con un navegador que no has tenido en cuenta al crearla.

Para que veas un ejemplo leve de lo que hablamos, aquí puedes apreciar como se ve una página web en diferentes navegadores. Por supuesto es ficticia y el diseño está hecho descuidado a propósito:

 

 

Como hemos dicho, hay casos de incompatibilidad más graves en los que el diseño se desajusta, no cabe completo en pantalla, scripts o menús que se comportan de manera diferente de un navegador a otro… en fin, un desastre, sobre todo si tu web es un negocio en línea o una página de empresa que requieren cuidar el aspecto al máximo para atraer al cliente.

Mejorar la compatibilidad con navegadores

Validar el código de tu sitio web

Validar el código de tu web en base a los estándares del W3C es un buen hábito que conviene que cojas cuanto antes mejor. Básicamente consiste en escanear tu web en busca de errores de programación para una vez detectados poder corregirlos. Además, a parte de detectar errores de codificación te proporciona una breve explicación del error, por lo que aprenderás cosas nuevas validando tu web. Tener una página sin errores es importante porque maximiza la compatibilidad entre navegadores al mismo tiempo que te asegura que tu código siga valiendo para futuras revisiones de HTML, CSS, etc.

Tómate tu tiempo para validar el código CSS de tu web. Eso hará que te sea más fácil conseguir que tu sitio se vea igual en los distintos navegadores ya que hará que tengas un código más limpio y sobre todo sin errores.

Para validar tu CSS lo mejor es usar las herramientas disponibles, ya que si te propones hacerlo manualmente la tarea será difícil y larga. Además, es muy sencillo que se te pasen errores, mientras que usando herramientas online no ocurrirá. El validador de CSS del W3C es la mejor opción para ello, ya que esta entidad es la que se encarga de crear los estándares de la web.

Resetear los estilos CSS

Si no usas ningún estilo CSS en los elementos de tu página igualmente tendrán un aspecto determinado. Los títulos tienen una tamaño según su importancia (H1, H2, H3…), los márgenes tienen un tamaño determinado, las citas llevan sangría, etc. Muchos de estos valores por defecto, son iguales de unos navegadores a otros pero otros no, y esos precisamente son los que te crearán problemas a la hora de conseguir que tu web se vea igual en los diferentes navegadores, ya que por mucho estilo que les des, su valor predeterminado sigue contando.

Por eso, resetear tu hoja de estilos es una de las mejores medidas que podemos adoptar para prevenir el problema de la incompatibilidad entre navegadores, ya que por defecto, todos los elementos HTML tienen unos atributos CSS predeterminados. Así, los márgenes, espacios y tamaños de fuente de títulos (entre otros) pueden tener diferentes propiedades por defecto de un navegador a otro y provocar que se vean diferentes por mucho formato que le demos nosotros. Al resetear el CSS digamos que ponemos a cero esos valores por defecto y podemos empezar desde el principio a dar el formato que nosotros queramos, controlando el aspecto de cada elemento mucho mejor. Para resetear el CSS se escribe un código CSS al principio de tu hoja de estilos, y después todo lo que tu vayas creando. El código de Eric Meyer es una de las formas más conocidas que tenemos de resetear el CSS de nuestra web, muy efectivo:

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
        margin: 0; 
        padding: 0; 
        border: 0; 
        outline: 0; 
        font-weight: inherit; 
        font-style: inherit; 
        font-size: 100%; 
        font-family: inherit; 
        vertical-align: baseline; 
} 
/* remember to define focus styles! */ 
:focus { 
        outline: 0; 
} 
body { 
        line-height: 1; 
        color: black; 
        background: white; 
} 
ol, ul { 
        list-style: none; 
} 
/* tables still need 'cellspacing="0"' in the markup */ 
table { 
        border-collapse: separate; 
        border-spacing: 0; 
} 
caption, th, td { 
        text-align: left; 
        font-weight: normal; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
        content: ""; 
} 
blockquote, q { 
        quotes: "" ""; 
}

Por otro lado, una forma más sencilla, aunque no tan completa, de anular los valores por defecto que más problemas suelen dar (margin y padding) es poner el siguiente código al principio de tu hoja de estilos y luego las reglas que vayas creando:

* {margin:0; padding:0}

Lo que hace este código es dar un margin y padding de 0 a todas las propiedades CSS.

Evidentemente no es tan completo como el anterior código, pero si no quieres complicarte mucho la vida o necesitas ahorrar espacio reduciendo la hoja de estilos, este código también quita muchos problemas.

Usa técnicas soportadas

CSS ofrece un montón de técnicas para mejorar el aspecto de nuestras páginas web, pero no todas son bien soportadas por los navegadores. Lo mejor es intentar evitar el uso de propiedades que puedan causarnos problemas con algunos navegadores, en especial con los más usados por los visitantes (IE, Firefox…). En general, usando buenas prácticas en CSS minimizamos el riesgo de incompatibilidades entre navegadores.

Diseñar para Firefox, no para Explorer

Una de las cosas que han hecho a Firefox tan popular es que es uno de los más completos navegadores en cuanto a respetar los estándares web se refiere. Y como él hay muchos otros (cada vez más) que se preocupan por seguir al máximo los estándares del W3C. Por tanto, diseñando para Firefox estamos minimizando el uso de reglas indebidas o malinterpretadas, ya que el aspecto que nos devuelve el navegador de lo que programamos se acerca mucho más a la regla general que diseñando en Internet Explorer.

Diseñar optimizando para Firefox hace de nuestro código un código más limpio, más estándar, y por tanto más universal. Una vez funcione en Firefox, puedes empezar a pensar en que tu sitio se vea bien en Explorer. Si lo haces al revés, cuando consigas que se vea bien en Explorer tendrás que ir arreglando el código para que se vea bien uno por uno en el resto de navegadores, mucho más trabajo ¿no?.

Publicado el 08/08/2008, última actualización 08/08/2008.

Licencia: Eres libre de distribuir este artículo bajo los términos de la licencia creative commons, siempre que pongas claramente el siguiente texto en la página que publica el artículo (enlaces activos incluidos):

Autor: Verónica Milán

URL: Compatibilidad de tu web con navegadores

Añadir Comentario (Subir al texto)

25 Cometarios

  1. hugo

    hola!!necesito aprender a hacer pagina web sencillas pero no tengo idea de como se hace me pueden dar algun documento para principiante ..!!!gracias

    Miércoles, 27 de agosto 2008

  2. Hack CSS para Internet Explorer 7 :: LaWebera.es

    [...] opción que se utiliza para dar diferentes estilos a navegadores es el uso de !important lo cual es aceptado por Firefox, IE7 y los demás navegadores, pero no por [...]

    Jueves, 16 de octubre 2008

  3. Jheyson

    Muy buenos aportes a tener muy en cuenta a la hora de realizar una web…

    Martes, 21 de abril 2009

  4. atsek

    Excelente!. muchas felicidades.

    Jueves, 4 de junio 2009

  5. Como centrar una pagina web

    [...] Me refiero a que por defecto, el contenido de las páginas está alineado a la izquierda, es decir, el contenido de tu página está pegado al borde izquierdo de la ventana del navegador. [...]

    Viernes, 20 de noviembre 2009

  6. Como acelerar la carga de un sitio Web

    [...] de la red, como la ejecución de los scripts de la página y el despliegue de esta por parte del navegador. La experiencia que su grupo ha recogido puede resumirse en los siguientes [...]

    Lunes, 30 de noviembre 2009

  7. 10 Consejos para empezar un blog con WordPress

    [...] que funciona todo:  hazlo con varios navegadores, al menos Firefox e Internet Explorer, ya que IE no respeta estándares y hay cosas que no [...]

    Viernes, 18 de diciembre 2009

  8. CSS Sprites para efecto rollover en botones e imagenes

    [...] Compatibilidad: Como se utiliza con CSS 2, es compatible con la mayoría de navegadores. [...]

    Martes, 26 de enero 2010

  9. Diseñar una página web para varias resoluciones de pantalla

    [...] pantalla diferentes que emplean los usuarios de Internet. El diseñador empleará un monitor y un navegador que se encuentran adaptados a sus necesidades y posibilidades, pero esto no debe ser motivo para [...]

    Miércoles, 27 de enero 2010

  10. Normas elementales en HTML

    [...] CSS siempre que sea posible, pero seguir incluyendo HTML semántico para maximizar la compatibilidad con navegadores [...]

    Lunes, 1 de febrero 2010

  11. monica

    HolA, pero tan extraño que digan que si se puede ver en firefox se puede ver en explorer, yo tengo un problema y es que mi web se ve en todos los navegadores menos en explorer, he intentado y arreglado todo y no se ve, se ve hasta la mitad de la web y no se porque en cambio en firefox la abro y se ve completa sin ningun problema, algu consejo para que se pueda ver en explorer? gracias.

    Miércoles, 3 de febrero 2010

  12. 7 Consejos para diseñar tu web de forma eficaz

    [...] multinavegador: otro tema harto conocido, hacer nuestras páginas web compatibles con los diferentes navegadores existentes en el mercado. Básicamente, cuando diseñes un sitio web, preocupate de que se vea bien [...]

    Martes, 9 de febrero 2010

  13. Internet Explorer 6, no gracias

    [...] sin nombrar el uso de hacks css, comentarios condicionales y demás truquitos para intentar que una web se vea correctamente en todos los navegadores, incluido el odiado [...]

    Viernes, 12 de febrero 2010

  14. La influencia de los Navegadores en Internet

    [...] “nacieron” con la burbuja punto com. Quizás en aquellos años a muchos de nosotros la compatibilidad y los estándares  no nos parecía algo relevante ya que sólo éramos unos internautas novatos [...]

    Jueves, 4 de marzo 2010

  15. Creación de sitios web en Flash

    [...] crear sitios web completos en Flash podemos agregarle interactividad a nuestro sitio, así como compatibilidad con casi todos los navegadores de la web, incluso Internet Explorer, olvidándonos un poco de hojas de estilo y scripts, podemos usar [...]

    Martes, 23 de marzo 2010

  16. Josè Luis Lara Cruz

    Estimada Verònoca quedo muy agradecido por tu gran aporte , estoy en investgaciòn para hacer mi pàgina , justamente sin cometer fallas ,ya que estas cuestan mucho dinero .
    Ademàs estoy notando que al medio dìa , la fuerza de los rayos solares que impactàn en las piesas de los satelites afectan a la compatibilidad de los navegadores.Aqui hay una responsabilidad tècnica de los navegadores.
    A vuestras ordenes, JL.Lara.

    Martes, 30 de marzo 2010

  17. Verónica Milán

    Hola José Luis, el tema de los rayos solares y la compatibilidad entre navegaores WEB, no lo veo factible, aunque me gustaría saber en qué te basas para exponer un argumento así.

    Un saludo.

    Miércoles, 31 de marzo 2010

  18. Herramientas para un desarrollo web más sencillo (Parte I)

    [...] y se agregaron buscadores y colores a ciertas etiquetas e incluso subrayado en algunos navegadores, lo cual benefició al programador para llegar a la parte que necesitaba, pero aún así se [...]

    Martes, 6 de abril 2010

  19. Problemas de maquetación con Internet Explorer 6

    [...] Antes de continuar avanzando en la forma en que se debe hacer la maquetación una página web, debemos tener en cuenta algunos problemas que se suscitan en la visualización de las páginas web por parte de diferentes navegadores. [...]

    Viernes, 16 de abril 2010

  20. Código listo para hacer un menú desplegable con XHTML y CSS

    [...] esto no es ningún inconveniente. Sin embargo, la mayoría de los usuarios de internet cuentan con navegadores que, en pos de conseguir una mayor seguridad, bloquean muchos scripts. Otro de los inconvenientes [...]

    Viernes, 30 de abril 2010

  21. HTML – XHTML Doctype o versión del documento de una página web

    [...] que definas el tipo de documento de tu web, como se muestra a continuación, para obtener una interpretación correcta de tu código fuente en todos los navegadores actuales. Si no lo haces corres el riesgo de que la página no se vea como tu [...]

    Miércoles, 5 de mayo 2010

  22. David

    Josè Luis tiene un grave problema mental parece. Si vas a comentar en algo tan interesante no agregues pavadas, ¿Rayos solares? Que tomaste????

    Domingo, 16 de mayo 2010

  23. Rocio Liscio

    Excelente informacion… Es una pag muy completa, en sentido estricto de la palabra. Me ayudaron muchisimo.
    Saludos,Rocio Liscio.

    Jueves, 16 de septiembre 2010

  24. haney

    esta bien todo
    pero estas seguro q el codigo de Eric Meyer
    es correcto y se cumple para todos los navegadores no importando las versiones
    ahora
    necesito saber cuales son las fuentes destinadas para la lectura en paginas web

    *Rpta para hugo y para principiantes utilizen dreamwaver o quanta
    para hacer sus paginas web siguiendo sus WIZARDs (los magos q haran paso a paso la realizacion de la misma)

    Miércoles, 17 de agosto 2011

  25. FerOm

    a mi me funcionó un problema de alineación en el diseño, añadiendo:

    nowrap=”nowrap”

    en las propiedades de mi celda

    Viernes, 16 de agosto 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras