Introducción a CSS

jueves, 17 de febrero de 2011

Los modos de compatibilidad de Internet Explorer 8

El navegador Internet Explorer 8 introduce el concepto de "compatibilidad de la página"para asegurar que todas las páginas HTML se vean correctamente en cualquier versiónde ese navegador. En realidad, esta nueva característica es una mejora del modo quirksexplicado anteriormente.

Internet Explorer 8, a diferencia de sus versiones anteriores, soporta completamente elestándar CSS 2.1. Sin embargo, muchos sitios web se diseñaron para Internet Explorer 6y 7, por lo que incluyen trucos, hacks y filtros que arreglan los errores y carencias deesas versiones del navegador.

Para evitar que las páginas diseñadas para navegadores anteriores se vean mal en estanueva versión, Internet Explorer 8 incluye la opción de "compatibilidad de la página",que permite indicar la versión de Internet Explorer para la que la página ha sidodiseñada.

De esta forma, si la página no se visualiza correctamente en Internet Explorer 8, sepuede indicar al navegador que la muestre como si fuera Internet Explorer 6 o 7. Enrealidad, Internet Explorer 8 incluye seis modos de funcionamiento:

▪ Modo IE5: la página se muestra según el modo quirks de Internet Explorer 7, quees casi idéntico a como se veían las páginas en el navegador Internet Explorer 5.

▪ Modo IE7: la página se muestra en el modo estándar de Internet Explorer 7, sinimportar si la página contiene o no la directiva .

▪ Modo IE8: los contenidos se muestran en el modo estándar de Internet Explorer8, que es el más parecido al del resto de navegadores que soportan los estándares(Firefox, Opera, Safari y Google Chrome).

▪ Emular el modo IE7: el navegador decide cómo mostrar los contenidos a partirde la directiva de la página. Si esa directiva es una de las que activan elmodo estándar, la página se muestra en el modo estándar de Internet Explorer 7.

En otro caso, se muestra en el modo quirks de Internet Explorer 5. Este modo es elmás útil para la mayoría de sitios web.

▪ Emular el modo IE8: el navegador decide cómo mostrar los contenidos a partirde la directiva de la página. Si esa directiva es una de las que activan elmodo estándar, la página se muestra en el modo estándar de Internet Explorer 8. En otro caso, se muestra en el modo quirks de Internet Explorer 5.

▪ Modo límite ("edge mode"): indica a Internet Explorer que los contenidos sedeben mostrar en el modo de compatibilidad más avanzado disponible. Actualmente, este modo es equivalente al modo IE8. Si las futuras versionesInternet Explorer 9 y 10 incluyeran mejor compatibilidad, las páginas sevisualizarían en ese modo avanzado de compatibilidad.

El modo de compatibilidad de la página se indica mediante una nueva etiqueta con la propiedad X-UA-Compatible y cuyo valor es el que utiliza Internet Explorer 8 para determinar el modo que se utiliza:

<head>
<meta http-equiv="X-UA-Compatible" content="IE=5" >

...
</head>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" >
...
</head>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" >
...
</head>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
...
</head>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
...
</head>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
...
</head>

No obstante, esta opción de compatibilidad de la página debe entenderse como unasolución temporal que evita que los sitios web se vean mal en Internet Explorer 8. Laúnica solución correcta a largo plazo consiste en actualizar las páginas para que susdiseños sigan los estándares web.

Margen, relleno, bordes y modelo de cajas

La anchura y altura de un elemento no solamente se calculan teniendo en cuenta sus propiedades width y height. El margen, el relleno y los bordes establecidos a un elemento determinan la anchura y altura final del elemento. En el siguiente ejemplo se muestran los estilos CSS de un elemento:

div {
width: 300px;
padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
margin-right: 30px;
border: 10px solid black;
}

La anchura/altura establecida con CSS siempre hace referencia a la anchura/altura del contenido. La anchura/altura total del elemento debe tener en cuenta además los valores del resto de partes que componen la caja del box model.

Por otra parte, la guerra de navegadores que se produjo en los años 90 provocó que cada fabricante (Microsoft y Netscape) añadiera sus propias extensiones y mejoras en sus productos. Posteriormente, aparecieron los estándares publicados por el W3C y los fabricantes se encontraron con el problema de la incompatibilidad entre sus implementaciones anteriores de HTML y CSS y las implementaciones que requerían los estándares.

La solución que adoptaron fue la de incluir en el navegador dos modos diferentes de funcionamiento: modo compatible con las páginas antiguas (denominado "modo quirks" y que se podría traducir como "modo raro") y modo compatible con los nuevos estándares (denominado "modo estándar"). El modo quirks es equivalente a la forma en la que se visualizaban las páginas en los navegadores Internet Explorer 4 y Netscape Navigator 4.

La diferencia más notable entre los dos modos es el tratamiento del "box model", lo que puede afectar gravemente al diseño de las páginas HTML. Los navegadores seleccionan automáticamente el modo en el que muestran las páginas en función del DOCTYPE definido por el documento. En general, los siguientes tipos de DOCTYPE activan el modo quirks en los navegadores:
▪ No utilizar ningún DOCTYPE

▪ DOCTYPE anterior a HTML 4.0 (<!DOCTYPE HTML PUBLIC "-//W3CDTD HTML 3.2 Final//EN">) * DOCTYPE de HTML 4.01 sin URL (<!DOCTYPE HTML PUBLIC "-//W3CDTD HTML 4.01 Transitional//EN">)

En el caso concreto de Internet Explorer, también activan el modo quirks los modos XHTML 1.0 que incluyen la declaración de XML (por ejemplo <?xml version="1.0" encoding="UTF-8"?>) al principio de la página web:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Se pueden consultar todos los casos concretos que activan el modo quirks para cada navegador en la página http://hsivonen.iki.fi/doctype/

La versión 5.5 y anteriores de Internet Explorer y las versiones 6 y 7 en modo quirks siguen su propio modelo de cálculo de anchuras y alturas que es muy diferente al método definido por el estándar.

La anchura del elemento es la que se obtiene de sumar la anchura de su contenido (300), sus bordes (2 x 10) y sus rellenos (2 x 50). Por lo tanto, la anchura del elemento son 420 píxel, a los que se suman los 30 píxel de margen lateral a cada lado.

Para evitar este problema y crear diseños con el mismo aspecto en cualquier navegador, es necesario evitar el modo quirks de Internet Explorer. Por tanto, todas las páginas deben incluir la declaración apropiada de DOCTYPE.

Propiedades shorthand

Como sucede con los márgenes y los rellenos, CSS define una serie de propiedades de tipo "shorthand" que permiten establecer todos los atributos de los bordes de forma directa. CSS ha definido una propiedad "shorthand" para cada uno de los cuatro bordes y una propiedad "shorthand" global.

Antes de presentar las propiedades, es conveniente definir los tres siguientes tipos de valores:

border-top: Estilo completo del borde superior
border-right: Estilo completo del borde derecho

border-bottom: Estilo completo del borde inferior

border-left: Estilo completo del borde izquierdo

Valores: ( <medida_borde> || <color_borde> || <estilo_borde> ) | inherit
Se aplica a: Todos los elementos
Valor inicial: -
Descripción: Establece el estilo completo de cada uno de los cuatro bordes de los elementos

Las propiedades "shorthand" permiten establecer alguno o todos los atributos de cada borde. El siguiente ejemplo establece el color y el tipo del borde inferior, pero no su anchura:

h1 {
border-bottom: solid red;
}

En el ejemplo anterior, la anchura del borde será la correspondiente al valor por defecto (medium). Este otro ejemplo muestra la forma habitual utilizada para establecer el estilo de cada borde:

div {
border-top: 1px solid #369;
border-bottom: 3px double #369;
}

Por ultimo, CSS define una propiedad de tipo "shorthand" global para establecer el valor de todos los atributos de todos los bordes de forma directa:

border: Estilo completo de todos los bordes
Valores: ( <medida_borde> || <color_borde> || <estilo_borde> ) | inherit
Se aplica a: Todos los elementos
Valor inicial: -
Descripción: Establece el estilo completo de todos los bordes de los elementos

Las siguientes reglas CSS son equivalentes:
div {
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
div { border: 1px solid red; }

Como el valor por defecto de la propiedad border-style es none, si una propiedad shorthand no establece explícitamente el estilo de un borde, el elemento no muestra ese borde:

/* Sólo se establece el color, por lo que el estilo es
"none" y el borde no se muestra */
div { border: red; }

/* Se establece el grosor y el color del borde, pero no
su estilo, por lo que es "none" y el borde no se muestra */
div { border-bottom: 5px blue; }

Cuando los cuatro bordes no son idénticos pero sí muy parecidos, se puede utilizar la propiedad border para establecer de forma directa los atributos comunes de todos los bordes y posteriormente especificar para cada uno de los cuatro bordes sus propiedades particulares:

h1 {
border: solid #000;
border-top-width: 6px;
border-left-width: 8px;
}

Estilo

Por último, CSS permite establecer el estilo de cada uno de los bordes mediante las siguientes propiedades:

border-top-style: Estilo del borde superior
border-right-style: Estilo del borde derecho
border-bottom-style: Estilo del borde inferior
border-left-style: Estilo del borde izquierdo

Valores: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Se aplica a: Todos los elementos
Valor inicial: none
Descripción: Establece el estilo de cada uno de los cuatro bordes de los elementos

El estilo de los bordes sólo se puede indicar mediante alguna de las palabras reservadas definidas por CSS. Como el valor por defecto de esta propiedad es none, los elementos no muestran ningún borde visible a menos que se establezca explícitamente un estilo de borde.

Los bordes más utilizados en los diseños habituales son solid y dashed, seguidos de double y dotted. Los estilos none y hidden son idénticos visualmente, pero se diferencian en la forma que los navegadores resuelven los conflictos entre los bordes de las celdas adyacentes en las tablas.

Si se quiere establecer el mismo estilo para todos los bordes, CSS define una propiedad de tipo "shorthand":

border-style: Estilo del borde
Valores: (none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ) {1, 4} | inherit
Se aplica a: Todos los elementos
Valor inicial: -
Descripción: Establece el estilo de todos los bordes del elemento.

Como es habitual, la propiedad permite indicar de uno a cuatro valores diferentes y las reglas de aplicación son las habituales de las propiedades "shorthand".

Color

El color de los bordes se controla con las cuatro propiedades siguientes:

border-top-color: Color del borde superior
border-right-color: Color del borde derecho
border-bottom-color: Color del borde inferior
border-left-color: Color del borde izquierdo

Valores: <color> | transparent | inherit
Se aplica a: Todos los elementosValor inicial: -
Descripción: Establece el color de cada uno de los cuatro bordes de los elementos

Si se quiere establecer el mismo color para todos los bordes, CSS permite la utilización de un atajo mediante una propiedad de tipo "shorthand", que permiten indicar varias propiedades de forma resumida:

border-color: Color del borde
Valores: ( <color> | transparent ) {1, 4} | inherit
Se aplica a: Todos los elementosValor inicia: -

Descripción Establece el color de todos los bordes del elemento En este caso, al igual que sucede con la propiedad border-width, es posible indicar de uno a cuatro valores y las reglas de aplicación son idénticas a la propiedad border-width.

Bordes

CSS permite definir el aspecto de cada uno de los cuatro bordes horizontales y verticales de los elementos. Para cada borde se puede establecer su anchura, su color y su estilo.

Anchura

La anchura de los bordes se controla con las cuatro propiedades siguientes:

border-top-width: Anchura del borde superior
border-right-width: Anchura del borde derecho
border-bottom-width: Anchura del borde inferior
border-left-width: Anchura del borde izquierdo

Valores: ( <medida> | thin | medium | thick ) | inherit
Se aplica a: Todos los elementos
Valor inicial: Medium
Descripción: Establece la anchura de cada uno de los cuatro bordes de los elementos

La anchura de los bordes se puede indicar mediante una medida (absoluta o relativa y en cualquier unidad de medida de las definidas) o mediante las palabras clave thin (borde delgado), medium (borde normal) y thick (borde ancho).

La medida más habitual para indicar la anchura de los bordes es el píxel, ya que permite un control preciso del grosor. Las palabras clave apenas se utilizan, ya que impiden mostrar bordes iguales en diferentes navegadores. El motivo es que el estándar CSS no indica explícitamente el grosor al que equivale cada palabra clave. Así por ejemplo, el grosor medium equivale a 4px en Internet Explorer y 3px en el resto de navegadores.

Si se quiere establecer la misma anchura a todos los bordes, CSS permite la utilización de un atajo mediante una propiedad de tipo "shorthand", que permiten indicar varias propiedades de forma resumida:

border-width: Anchura del borde
Valores: ( <medida> | thin | medium | thick ) {1, 4} | inherit
Se aplica a: Todos los elementos
Valor inicial: Medium

Descripción: Establece la anchura de todos los bordes del elemento

La propiedad border-width permite indicar entre uno y cuatro valores. El significado de cada caso es el habitual de las propiedades "shorthand":

p { border-width: thin }                                                       /* thin thin thin thin */
p { border-width: thin thick }                                              /* thin thick thin thick */
p { border-width: thin thick medium }                               /* thin thick medium thick */
p { border-width: thin thick medium thin }                        /* thin thick medium thin */

Si se indica un solo valor, se aplica a los cuatro bordes. Si se indican dos valores, el primero se aplica al borde superior e inferior y el segundo valor se aplica al borde izquierdo y derecho.

Si se indican tres valores, el primero se aplica al borde superior, el segundo se aplica al borde izquierdo y derecho y el tercer valor se aplica al borde inferior. Si se indican los cuatro valores, el orden de aplicación es superior, derecho, inferior e izquierdo.

Relleno

CSS define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un elemento.

El código HTML y CSS del ejemplo se muestra a continuación:

.margen {
margin-top: 2em; margin-right: 2em; margin-bottom: 2em; margin-left: 2em;
}
.relleno {
padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em;
}
<p class="margen">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi.</p>

<p class="relleno">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vitae dolor eu enim dignissim lacinia. Maecenas blandit. Morbi mi.</p>

Como sucede con la propiedad margin, CSS también define una propiedad de tipo "shorthand" para establecer los cuatro rellenos de un elemento de forma directa. La propiedad que permite definir de forma simultanea los cuatro márgenes se denomina padding.