Ejemplo

El concepto

En esta página vamos a utilizar, sin demasiados alardes, algunos de los elementos del modelo de formato visual:

Metrópolis
Metrópolis

La toma de decisiones

Ahora es el momento de pensar en qué navegadores vamos a aplicar el modelo visual "avanzado". Y lamentándolo enormemente (sarcasmo), las míticas versiones 4 de Internet Explorer y Netscape Navigator se quedan fuera. Se va a utilizar el DOM para hacer ciertos arreglos, y ninguno de los dos lo entiende, sino que cuentan con modelos propietarios con los cuales no nos vamos a pelear. Nos centraremos en los navegadores basados en el núcleo "Gecko" (Mozilla, Netscape 6, k-Meleon...), las versiones 5 (o superiores) de Opera e Internet Explorer, en Konqueror, o en cualquier otro navegador con características similares. Esta elección nos va a liberar de muchos sufrimientos. Pero aún quedarán algunos problemas:

Aunque no es necesario, crearemos un conjunto de reglas básicas, que se aplicarán a todos los navegadores compatibles con CSS, y un conjunto intermedio de reglas para establecer tamaños relativos para las fuentes. Como Netscape Navigator no se lleva nada bien con las unidades relativas, evitaremos que lea este segundo conjunto utilizando el truco de la regla @import.

El desarrollo

Hoja de estilo A (tw002a.css)

@import url("tw002b.css");
html { margin:0; border:0; padding:0; }
body { margin:1em; border:0; padding:0; background-color:#EEF; color:#003; font-family:arial,helvetica,sans-serif; }
h1, h2, h3 { margin:1em 1em 0; color:#008; }
p { margin:0.5em 1em; }
p, ul { text-align:justify; }
ul { margin:0 1em 0.5em; padding-left:32px; }
li { margin-bottom:0.25em; }
code, samp { color:#040; }
.Imagen, #Fija { display:none; }

Lo único reseñable de este primer archivo es la primera regla, que se encarga de importar un segundo archivo, pero que es ignorada, entre otros ilustres, por Netscape Navigator. Si hubiéramos querido impedir su funcionamiento en la versión 4 de Internet Explorer también, sólo tendríamos que haber omitido la función url. La última regla ocultará elementos que sólo tienen sentido en la presentación avanzada.

Hoja de estilo B (tw002b.css)

body { background:#EEF url('logo7.jpg') no-repeat; }
h1 { font-size:1.4em; }
h2 { font-size:1.1em; }
h3 { font-size:1em; }
p, ul { font-size:0.8em; }

Este segundo archivo sólo añade la imagen de fondo (el logo de la esquina superior izquierda) y los tamaños relativos para las fuentes. Ambas características darían problemas en los navegadores que no van a leer este archivo.

Hoja de estilo C (tw002c.css)

body { margin:0; }
#Padre { position:absolute; left:84px; right:16px; margin:0 0 1em; padding:0 0 1em; min-width:516px; }
#Fija { display:block; position:fixed; top:0px; left:48px; }
.Imagen { display:block; float:right; border:16px solid #008; margin:4px; overflow:hidden; }
#CajaNormal { margin-left:16px; width:120px; height:190px; }
#CajaTrucada { margin-right:8px; width:152px; height:222px; }
html>body #CajaTrucada { margin-right:16px; width:120px; height:190px; }
#BloqueDesplazamiento { clear:left; margin:0.5em; border:1px inset #008; overflow:auto; }

Este es el archivo con las características "avanzadas" de la representación visual: el posicionamiento absoluto y la anchura mínima del elemento Padre o la posición fija de Fija.

La imagen incluida en las cajas CajaNormal y #CajaTrucada mide 120×190. El borde y el relleno interior de un elemento no entran en el cómputo de su medida, por lo cual bastaría con especificar las mismas medidas para ajustar la caja a la imagen. Sin embargo, las versiones para PC de Internet Explorer sí incluyen el borde y el relleno en la medida, por lo que la primera imagen queda cortada. Para arreglarlo en la segunda caja se especifican las dimensiones de forma incorrecta (incrementando 32 píxeles para tener en cuenta el borde), pero después se corrige para el resto de navegadores utilizando el truco de html>body.También se utiliza esto para reducir el margen de la caja flotante, debido a que Internet Explorer lo dobla.

Pese a que se especifica overflow:auto; para la caja BloqueDesplazamiento, esto no tiene efecto por el momento, debido a que no se incluye ninguna medida.

Por último, reseñar que la regla que ocultaba algunos elementos en el primer archivo queda anulada con las declaraciones display:block;.

El código HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title> Creando parches - hoja de ejemplo </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="StyleSheet" href="estilos/tw002-1/tw002a.css" media="screen" type="text/css" />
<script type="text/javascript" src="tw002a.js"></script>
</head>
<body onload="Inicio();">
<div id="Padre">
 <h1>tallerWeb: Creando parches (hoja de ejemplo)</h1>
 <h2>El concepto</h2>
 <p>En esta página ... </p>
 <div class="Imagen" id="CajaTrucada">
  <img src="imagen/smp0021.jpg" width="120" height="190" alt="Metr&oacute;polis" />
 </div>
 <div class="Imagen" id="CajaNormal">
  <img src="imagen/smp0021.jpg" width="120" height="190" alt="Metr&oacute;polis" />
 </div>
 <ul><li>Un bloque padre... </li></ul>
 <div id="BloqueDesplazamiento">
  <h2>La toma de decisiones</h2><p>Ahora es el momento... </p>
 </div>
 <h2>El desarrollo</h2>...
 <h2>Despedida y cierre</h2>...
</div>
<div id="Fija">
 <img src="imagen/webcrawler.png" width="64" height="150" alt="mascota de webcrawler.com" />
</div>
</body>
</html>

El contenido del documento se ha abreviado para no complicar la legibilidad. Lo más importante es el enlace al primer archivo de hoja de estilo y, acto seguido, la inclusión de un script que realizará el resto del trabajo, y que se documenta en último lugar. El atributo onload del elemento body llama a una función situada en ese archivo de scripts.

Script (tw002a.js)

var DOM = (document.getElementById);
var Gecko = (navigator.userAgent.toLowerCase().indexOf('gecko')!=-1);
var IE5 = (DOM && (navigator.userAgent.toLowerCase().indexOf('msie')!=-1) && !(window.opera));
if (DOM) {
  document.write('<link rel="StyleSheet" href="estilos/tw002-1/tw002c.css" media="screen" type="text/css" />');
  if (Gecko || IE5) {
    var Hoja = document.styleSheets[0];
    if (Gecko) Hoja.insertRule('#BloqueDesplazamiento { height:200px; }',Hoja.cssRules.length);
    else Hoja.addRule('#BloqueDesplazamiento', 'height:200px');
  }
  if (IE5) window.onresize=Dimensionar;
}
 
function Inicio () {
if (IE5) {
  Dimensionar();
  document.getElementById('Fija').style.position = 'absolute';
  setInterval('Posicionar()', 250);
}
}
 
function Posicionar () {
document.getElementById('Fija').style.top = document.body.scrollTop+'px';
}
 
function Dimensionar () {
document.getElementById('Padre').style.width = (document.body.clientWidth < 616) ? '516px': (document.body.clientWidth-100)+'px';
}

El archivo de script comienza con la declaración de tres variables globales booleanas, DOM, Gecko e IE5, que especifican, respectivamente, si el navegador es mínimamente compatible con el DOM estándar, si está basado en el núcleo "Gecko", y si es una versión medianamente decente de Internet Explorer.

En primer lugar se carga el tercer archivo de hoja de estilo si el navegador satisface la variable DOM, escribiendo la línea HTML correspondiente. Acto seguido se añade una nueva regla a la hoja de estilos para especificar la altura del elemento BloqueDesplazamiento, pero sólo para los navegadores basados en "Gecko" y en Internet Explorer, que son los que van a representar correctamente la declaración overflow:auto; especificada anteriormente. En el primer caso se utiliza el método estándar y en el segundo el método propietario de microsoft. La última declaración global maneja el evento resize con una función si el navegador es Internet Explorer. A partir de aquí todo el script está encaminado a corregir defectos de este navegador, para que luego digan que no nos preocupamos...

Inicio se ejecuta cuando se ha cargado el documento. Amén de llamar a la función Dimensionar, explicada después, especifica un posicionamiento absoluto para Fija, debido a que ignora la declaración position:fixed, que será emulada mediante un método recursivo que se ejecutará cada 250 milisegundos. La función Posicionar se va a ocupar de calcular y establecer la posición de la caja Fija en función de la propiedad scrollTop, que es propietaria de Internet Explorer. Con esto conseguimos una burda imitación del posicionamiento fijo estándar.

La función Dimensionar resuelve dos problemas de representación, calculando el ancho disponible y estableciendo el ancho del elemento Padre en consecuencia. Con esto pasamos por encima de las carencias del navegador, que le impiden calcular el ancho de la caja a partir de sus valores left y right, o permitir un valor mínimo.

Despedida y cierre

Alguno podrá pensar que nos hemos tomado demasiadas molestias con Internet Explorer, pero es puramente circunstancial. Teniendo en cuenta un conjunto de 40 características importantes de CSS, los navegadores "Gecko" tienen al menos 5 errores de implementación, Opera 11 errores, Konqueror 17 errores, la versión Mac de Internet Explorer 19 errores, y la versión PC de Internet Explorer 24 errores. En todo caso, siempre podemos añadir un icono donde diga: 'Pesimizado para IE' (es broma).

Volver a: Creando parches.

Mascota de webcrawler.com

Estás en: tierra de nómadas > tallerWeb > creando parches > Ejemplo