• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Manejar la compatibilidad entre navegadores

Log in or subscribe for free to enjoy all this course has to offer!

Esta es la situación: estás trabajando duro en el diseño de tu sitio web. Has invertido tiempo en él, teniendo cuidado y al final estás bastante satisfecho contigo mismo. Haces que un amigo pruebe el sitio web y responde: "He de decir que no está tan bien".

O bien tu amigo y tú tenéis gustos completamente diferentes, o el sitio web está bien desde tu lado, pero no desde el suyo . De hecho, los navegadores no generan las imágenes exactamente de la misma manera, aunque intenten seguir las mismas reglas de HTML y CSS. Cuanto más antiguo sea el navegador, más probable será que no entienda las funciones que estés utilizando.

En lugar de entrar en pánico, puedes encontrar en este capítulo algunas maneras de aprender a tratar estas diferencias entre navegadores y obtener los mejores resultados posibles, independientemente del navegador.

Comentarios condicionales

A menudo las versiones antiguas de Internet Explorer ocasionarán problemas. Como algunas de ellas todavía se usan, tienes que aprender a lidiar con ellas.

Sintaxis de los comentarios condicionales

Afortunadamente, hay una manera muy cómoda de adaptar el código a versiones antiguas de Internet Explorer. Mediante comentarios condicionales, puedes asegurarte de que una parte de tu código HTML sea de solo lectura para ciertas versiones de IE. Estos son comentarios HTML que tienen una forma bastante especial y solo los leerá IE.

<!--[if IE]>
Código HTML reservado para IE
<![endif]-->

El conjunto forma un comentario HTML, empieza con<!-- y termina en -->. Por lo tanto, los navegadores ignoran este código situado en el interior, excepto IE, que lo interpreta como una condición [if IE]que significa "Si se trata de Internet Explorer".

La ventaja es que esta técnica te permite abordar diferentes versiones de Internet Explorer. Por ejemplo:

<!--[if IE8]>

… solo abordará Internet Explorer 8.

Los siguientes símbolos se pueden utilizar para abordar a un conjunto de versiones:

  • lt: menor que;

  • lte: menor que o igual a;

  • gt: mayor que;

  • gte: mayor que o igual a.

Por tanto:

<!--[if lte IE8]>

... significa "Todas las versiones de Internet Explorer menores o iguales a IE8" (en otras palabras, IE8, IE7, IE6 ...).
Por otro lado, los navegadores que no sean Internet Explorer pueden abordarse con la siguiente sintaxis:

<!--[if !IE]><!-->
Código HTML para algunos de los otros navegadores
<!--<![endif]-->

Aunque la sintaxis es un poco compleja, la solución está bien diseñada. Si te fijas bien, hay dos etiquetas de comentario. Como el código HTML se encuentra fuera de las etiquetas de comentario, lo leerán todos los navegadores excepto IE, que lee los comentarios que le piden que no lea el código HTML que sigue.

Utilidad de los comentarios condicionales

¿Para qué se usan los comentarios condicionales?

Puede utilizar comentarios condicionales para mostrar un mensaje destinado a versiones anteriores de Internet Explorer: "Precaución, estás navegando con un explorador muy antiguo, por favor, actualízalo...".

No obstante, se utiliza sobre todo para cargar hojas de estilos especiales para IE:

<!--[if lte IE8]>
<link rel="stylesheet" href="style_ie.css" />
<![endif]-->

La hoja de estilos style_ie.css la leerán, en este caso, solamente versiones de IE no superiores a IE8. Puedes "adaptar" el código CSS del interior para asegurarte de que se muestre el sitio web lo mejor que se pueda en estos navegadores. Depende de ti cambiar el tamaño de los elementos, si es necesario, o utilizar otros métodos de posicionamiento más adecuados, etc.

Sin embargo, ya que hay varias versiones de Internet Explorer en circulación (IE6, IE7, IE8, IE9, etc.), una hoja de estilos no es suficiente. A veces querrás hacer un cambio solo para IE6 y IE7, otras veces solo para IE6 y en ocasiones para IE8 y IE9... La única solución es crear una hoja de estilos para cada versión. Pero esto hará que tengas que manejar una gran cantidad de archivos .css.

La solución que ahora suelen usar los webmasters experimentados es asignar un nombre de clase a la etiqueta <body> que abarca el cuerpo de la página. El nombre de la clase indicará el nombre de la versión de IE correspondiente al navegador, en el archivo .css. En este caso, un solo archivo CSS es suficiente. Por ejemplo, si escribes:

<body class="ie8">

... IE8 se especifica como navegador en el archivo CSS. Podemos entrar en lo siguiente en el archivo CSS:

.ie8 nav
{
    /* Cambiar el estilo de la etiqueta de navegación para IE8 */
}

Con comentarios condicionales, puedes escribir varias versiones de la etiqueta <body> según el navegador:

<!--[if IE6]><body class="ie6 old_ie"><![endif]-->
<!--[if IE7]><body class="ie7 old_ie"><![endif]-->
<!--[if IE8]><body class="ie8"><![endif]-->
<!--[if IE9]><body class="ie9"><![endif]-->
<!--[if !IE]><!--><body><!--<![endif]-->

Hacks CSS

Los "Hacks" son soluciones temporales para permitir que solo algunas versiones de Internet Explorer lean propiedades CSS. El principio es el mismo que en los comentarios condicionales, pero es menos "transparente"; los hacks se basan en errores de estos navegadores causados al leer propiedades CSS cuando no deberían.

Este es uno de los hacks más conocidos:

balise
{
    margin: 15px; /* Para otros navegadores */
    ma\rgin: 20px; /* Para IE6 y IE7 */
}

Un eror en IE6 y IE7 hace que lean la segunda propiedad. Normalmente, la barra invertida (\) en medio del nombre de la propiedad hace que no sea válida, pero estos navegadores ignoran la barra invertida y leen la propiedad como si todo fuera normal.

Existen otros hacks, por ejemplo:

balise
{
    margin: 15px; /* Para otros navegadores */
    *margin: 20px; /* Para IE6 y IE7 */
    _margin: 20px; /* Para IE6 */
}

Un asterisco antes del nombre de la propiedad hace que todos los navegadores, excepto IE6 e IE7, ignoren la línea. Del mismo modo, incluir un guión bajo (_) hace que la línea sea ignorada por todos los navegadores, excepto IE6.

Herramientas de depuración

Tu página a veces no se visualiza como quieres, incluso en un navegador más reciente. En este caso, tienes que buscar el error que has cometido. Aunque hay varias técnicas, solo voy a mostrar las que utilizo más a menudo.

Utilizar el color de fondo para marcar elementos

La técnica más sencilla para depurar es simplemente dar un color de fondo a un elemento que no esté comportándose como quisieras (por ejemplo, un menú mal colocado). Es tan simple como eso:

nav
{
    background-color: blue;
}

Este color de fondo muy llamativo es temporal, lo usas solo para ver dónde está "colocado" tu elemento. A menudo, esto te permite entender lo que está pasando en tu página.

Si esta técnica no es suficiente, tenemos que sacar la artillería pesada: una herramienta de depuración.

Herramientas de depuración

Son herramientas muy potentes (y bastante impresionantes) que te permiten interactuar con la página web directamente en el navegador. La mayoría de los navegadores actuales cuentan con estas herramientas, especialmente diseñadas para los desarrolladores web que somos:

  • Google Chrome: ve al menú Llave inglesa > Herramientas > Herramientas de depuración (figura de abajo). También puedes hacer clic derecho en un elemento de tu página y a continuación hacer clic en Inspeccionar el elemento.

  • Mozilla Firefox: instala la extensiónFirebug. Aparecerá un botón en la parte superior o inferior derecha de la ventana (dependiendo de la versión del navegador) para abrir el panel de depuración.

  • Internet Explorer: ve al menú Rueda de engranaje> Herramientas de desarrollo (disponibles para IE8 y superiores).

  • Opera: puedes ejecutar su potente herramienta de depuración Dragonfly pulsando Ctrl + Mayús + I. También puedes hacer clic derecho en un elemento de tu página y a continuación hacer clic en Inspeccionar el elemento.

Herramienta de depuración de Google Chrome (en la parte inferior del navegador)
Herramienta de depuración de Google Chrome (en la parte inferior del navegador)

Hay varias maneras de utilizar estas herramientas. Puedes examinar la jerarquía de tus etiquetas visualizando el código fuente (en la parte inferior izquierda de la figura a continuación) y editar el código de tu página en tiempo real: haz doble clic sobre un texto o una etiqueta que quieras editar ¡y verás el cambio del resultado en la ventana del navegador a medida que avanzas! Una advertencia: los cambios no se guardan, ya que solo estás haciendo una prueba sencilla para entender el comportamiento del navegador.

La lista de las propiedades CSS que se aplican al elemento seleccionado actualmente en el código fuente se muestran en la parte inferior derecha. Puedes añadir, quitar o cambiar sus propiedades, etc. Todos los cambios se aplican inmediatamente. Ten en cuenta que las propiedades CSS que sobrescriban otras propiedades se tachan o se difuminan; esto te permite entender cómo se comporta tu hoja de estilos.

Por último, para abordar directamente un elemento de tu página, puedes hacer clic derecho sobre el elemento a analizar, y luego hacer clic en Inspeccionar elemento. La barra de herramientas de depuración también ofrece un botón para abordar un elemento (una lupa en Google Chrome, un cursor en IE, etc.).

¡Aquí termina este curso! Considera consultar todos los apéndices si no lo has hecho todavía: ¡descubrirás nuevas pistas para continuar tu aprendizaje de HTML y CSS! ;)

Example of certificate of achievement
Example of certificate of achievement