tierra de nómadas - tallerWeb

Creando parches

Comienzo

La diversidad de plataformas, sistemas, navegadores y usuarios es una característica inherente al medio, cuyas consecuencias se pueden minimizar si se atienden, implementan y respetan los estándares. Esta labor corresponde, como es lógico, a quienes crean los navegadores y a quienes diseñan las páginas web. Normalmente, son los segundos los que sufren las consecuencias, generando problemas de accesibilidad en el lado de un usuario que, por regla general, poco puede hacer.

Durante la época caótica en la que dos navegadores sin demasiada atención a los estándares (Netscape Navigator 4 e Internet Explorer 4) eran utilizados por una gran mayoría de usuarios, se fraguó un concepto para diseñadores conocido como cross-browsing, relacionado con una técnica, el HTML dinámico, que utiliza HTML, CSS y los modelos de objetos propios de cada navegador, para crear efectos visuales. En la actualidad, la mayoría de los navegadores van implementado los estándares, con mayor o menor rigor, por lo que la salida más lógica para los diseñadores es olvidarse de esa complicada disciplina.

En este taller nos centraremos en las hojas de estilo. No está de más recordar que CSS es un mecanismo desarrollado para sugerir, no para imponer, entre otras cosas porque esa diversidad de la que hablábamos lo hace imposible (afortunadamente).

Errores y omisiones

Se podría montar una extensa 'galería de los horrores' con los detalles de la implementación de CSS en los diferentes navegadores. Y si tuviésemos que organizarla en salas podríamos optar por la siguiente distribución:

• Selectores o subclases ignoradas.
• Reglas no soportadas.
• Declaraciones no reconocidas.
• Declaraciones interpretadas incorrectamente.
• Problemas relacionados con la sintaxis.

Algunos errores tienen consecuencias más graves otros. Por ejemplo, las reglas siguientes constituyen un mecanismo sencillo para establecer el estilo de los campos de texto de un formulario, y de los encabezados de nivel 3 que van inmediatamente después de otro de nivel 2:

input[type="text"] { background-color:#DDF; color:#008; }
h2 + h3 { margin-top:0px; }

La utilización de selectores y subclases del nivel 2 de CSS ofrece, como en el ejemplo anterior, muchas ventajas. Pero son ignorados por un amplio espectro de agentes de usuario. La primera regla es soportada únicamente en Konqueror y en navegadores basados en el núcleo 'Gecko', como Netscape 6 o Mozilla. La segunda, por los anteriores y también por Opera y la versión para Mac de Internet Explorer 5. En cualquier caso, no sirven para navegadores tan extendidos como las versiones para PC de Internet Explorer. Es para pensárselo, y la conclusión suele ser, al menos por el momento, prescindir de estas técnicas.

Lo de antes es pecata minuta comparado con las interpretaciones incorrectas. El pésimo soporte para CSS de un navegador tan legendario como Netscape Navigator tiene consecuencias evidentes (por no decir terroríficas). Pero incluso las declaraciones no reconocidas pueden tener efectos desastrosos. Por ejemplo, la siguiente regla especifica unas dimensiones fijas para un bloque, que mostrará una barra de desplazamiento en caso de que el contenido desborde los límites de la caja:

#Caja { position:absolute; width:300px; height:120px; overflow:auto; }

Konqueror y Opera no reconocen la cuarta declaración, lo que provoca que el contenido sea inaccesible. Esto último es sintomático, porque normalmente no se plantea el tema de CSS en términos de accesibilidad, sino más bien de estética.

Declaración de hojas de estilo

La utilización de una única hoja de estilos sólo es recomendable cuando se han usado declaraciones sencillas, que sean comprendidas y bien interpretadas por cualquier navegador. De lo contrario será imprescindible distribuir el material en varios archivos. Por supuesto, la asignación de estilos en línea mediante el atributo style, o la utilización de hojas de estilo embebidas mediante el elemento style en la cabecera del documento son desaconsejables.

Un modelo básico de desdoblamiento es la creación de dos hojas de estilo, la primera válida para cualquier navegador, y la segunda apta sólo para los de última generación, como Mozilla, Netscape 6, Opera, Konqueror o Internet Explorer 5+. No hay un método único para conseguirlo, pero quizá el más sencillo y directo sea aprovechar la regla @import, que es ignorada por los navegadores obsoletos:

@import "hoja2.css";
body { margin:16px; background-color:#FFD; color:#040; font-family:arial,helvetica,sans-serif; }
h1, h2, h3 { color:#008; }
p { text-align:justify; }

Lo anterior podría ser el contenido de un archivo que sería invocado mediante un elemento link en la cabecera del documento. En otro archivo, llamado en este caso hoja2.css, introduciríamos las declaraciones avanzadas, que sólo serían leídas por navegadores de última generación. Las reglas @import deben ser siempre las primeras, lo cual quizás no nos convenga para nuestro método de trabajo si, por ejemplo, queremos declarar la hoja avanzada después de la básica. Otro método que sí nos lo permite consiste en ejecutar la siguiente sentencia JavaScript después de cargar la primera hoja de estilo:

if (document.getElementById) {
  document.write('<link rel="StyleSheet" href="hoja2.css" media="screen" type="text/css" />');
}

Casualmente, el conjunto de navegadores que ignora la regla @import tampoco da soporte al DOM, con lo que no satisfará la condición (document.getElementById). Obviamente, la utilización de JavaScript puede llegar a ser la única solución, por ejemplo, si queremos un chequeo más específico:

if ((navigator.userAgent.toLowerCase().indexOf('msie')!=-1) && !(window.opera)) {
  var platMac = (navigator.userAgent.toLowerCase().indexOf('mac')!=-1);
  var navVersion = parseFloat(navigator.appVersion.toLowerCase()) ;
  if ((platMac && navVersion >= 5) || (navVersion >= 6)) {
    document.write('<link rel="StyleSheet" href="hoja3.css" media="screen" type="text/css" />');
  }
}

El código anterior carga una hoja de estilo cuando el navegador utilizado sea Internet Explorer, versión 5 para Mac o 6 para PC (como mínimo). Al hilo de este ejemplo, constatar que hay que irse quitando la costumbre de utilizar document.all para comprobar si un navegador responde a la versión 4 (o superior) de Internet Explorer. Otros agentes, tan dispares como Opera 6 o alguna plataforma de televisión también dan positivo en ese test. Incluso es posible que un navegador, como es el caso de Opera, se identifique como Internet Explorer, práctica puesta en marcha, seguramente, para salvar aquellas páginas cuya visualización ha sido restringida a este último por el autor.

Arreglos puntuales

En ocasiones no merece la pena la confección de una hoja de estilos alternativa si podemos establecer la diferencia dentro de la hoja de estilos actual. Esto sólo es posible, paradójicamente, aprovechando errores de implementación.

#Caja { width:200px; }
html>body #Caja { width:208px; }

En el anterior ejemplo se establece para un elemento un ancho de 200 píxeles y acto seguido se cambia a 208 píxeles, porque el selector de hijo html>body no debe tener ningún efecto restrictivo, al seleccionar cualquier elemento dentro del body. Sin embargo, aquellos navegadores que no reconocen los selectores del nivel 2 de CSS, como las versiones para PC de Internet Explorer, no aplicarán la segunda regla. De esta manera conseguimos aplicar dos valores diferentes en función del navegador.

También es posible modificar hojas de estilo cargadas mediante JavaScript, utilizando el DOM. El siguiente código inserta una nueva regla al final de la primera hoja de estilos:

var Hoja = document.styleSheets[0];
Hoja.insertRule('#Caja { width:200px; }',Hoja.cssRules.length);

Lamentablemente, sólo los navegadores de familia 'Gecko', como Mozilla o Netscape 6, son capaces de ejecutar esto con garantías. Internet Explorer, en su línea habitual, incluye una extensión propietaria que realiza el mismo trabajo que el método estándar:

var Hoja = document.styleSheets[0];
Hoja.addRule('#Caja', 'width:208px');

Este último método tiene una clara desventaja respecto al estándar, y es que no se puede especificar el lugar que ocupará la regla insertada en la hoja de estilos. Siempre quedará colocada al final, con lo que el resultado sería el mismo que se obtendría cambiando el estilo por las bravas. En este caso:

document.getElementById('Caja').style.width='208px';

Esta opción, la de utilizar el DOM para establecer cambios en el estilo, se utiliza mayoritariamente para crear efectos dinámicos, de gran popularidad en los manuales de DHTML. Pero, como veremos en la práctica, también es útil para simular propiedades CSS no implementadas por ciertos navegadores.

Un ejemplo práctico

El modelo de formato visual es uno de los protagonistas indiscutibles del nivel 2 de CSS. Su utilización hace posible el desarrollo de presentaciones gráficas sin tocar la estructura formal del documento HTML. A partir de aquí todo sería de color de rosa, de no ser porque su implementación en los diferentes navegadores es incompleta, desigual y a menudo incorrecta.

Es, por tanto, un buen ejemplo para ensayar la declaración de hojas de estilo. En la hoja de ejemplo correspondiente a este taller se ponen en práctica las técnicas anteriores. Por si no ha quedado claro, se trata, como reza el título, de poner parches, y cada cual los pone a su manera, porque, como hemos visto, contamos con diferentes posibilidades.

Comentarios

Estás en: tierra de nómadas > tallerWeb > Creando parches.