| Artículos | 01 SEP 1998

Cambios dinámicos en Hojas de estilo

Tags: Histórico
Jaime Pe¤a

Las hojas de estilo se han convertido en una parte esencial del HTML Dinámico, pues ellas mismas también pueden ser dinámicas.

Este artículo presenta cómo son las opciones de carga de hojas de estilo y definición de estilos, cómo pueden sobrecargarse estilos en cascada y qué posibilidades se abren de utilizar lenguajes de script (por el momento JScript con Explorer 4.x) para variar estilos concretos como respuesta a acciones de los usuarios. Aunque ya se comienza a hablar de la implementación de la especificación CSS2 (Cascade Style Sheets Level 2, de noviembre de 1997, que puede consultarse en www.w3.org/TR/WD-CSS2), hasta el presente, solamente se considera un estándar -y aún no totalmente implementado en los navegadores actuales- el denominado CSS1 (Cascade Style Sheets Level 1, de diciembre de 1996, que puede consultarse en www.w3.org/TR/REC-CSS1-961217). En él nos basaremos. Respecto a lo más elemental del uso y significado de las hojas de estilo, ya lo hemos tratado en un artículo anterior. Le sugerimos lo repase, si no tiene presentes esos principios, en iWorld n§ 1 de febrero de 1997, que acompañaba a PC World n§ 129. En todo caso, tenga bien presente que el navegador debe soportar hojas de estilo. Hoy en día no debería suponer ningún problema, ya que Microsoft Internet Explorer y Netscape Navigator, versiones 3.x y 4.x, las soportan y son los mayoritariamente utilizados.

Cómo utilizar hojas de estilo

Las hojas de estilo (CSS, Cascade Style Sheets) pueden definirse y cargarse en una página HTML de tres maneras diferentes: desde un archivo externo mediante la etiqueta LINK, por ejemplo <LINK REL=stylesheet TYPE="text/css" HREF="http://www.ser.com/hoja1.css">. Desde un archivo de hoja de estilo (.css) a otro archivo de hoja de estilo, mediante la directiva de referencia @import, por ejemplo @import URL(http://www.ser.com/hoja1.css); y, finalmente, declararse y definirse en el propio documento HTML (método inline) con la etiqueta STYLE. Incluso, en este último caso cabe hacerlo de dos maneras diferentes, una con una declaración global de estilo y otra declarando un estilo particular dentro de otra etiqueta del documento HTML, por ejemplo:

<P STYLE="color.red">

Texto en rojo

</P>

En el Listado 1 se recoge una definición de hoja de estilo (archivo hoja1.css). Observe que se carga con la etiqueta LINK. Si pensamos que las hojas de estilo forman parte fundamental del mantenimiento coherente de los aspectos de las páginas de un foro, este es el método más elegante y fácil de controlar. Esto es, sin más que cambiar las especificaciones del archivo .css, cambiará el aspecto de todos los documentos HTML que hagan alusión a él. Si utilizamos estilos insertados en los documentos HTML, mediante etiquetas STYLE, el mantenimiento será más problemático.

También hay que considerar que ese panorama ideal de mantener archivos .css separados puede causar problemas. Sin ir más lejos, el aspecto del documento HTML del Listado 1 variará sustancialmente si se visualiza en Microsoft Internet Explorer o en Netscape Navigator, ya que puede diferir cómo interpretan los estilos, por ejemplo las etiquetas LI. Así, Navigator sólo utiliza el estilo de LI para marcar el color de los bolos de la lista, pero no del texto correspondiente. Por tanto, pruebe en cada caso, muy detenidamente, si lo especificado en el archivo .css le lleva a los resultados deseados. Si no es así, deberá volver su vista a la alternativa de estilos mediante la etiqueta STYLE en el documento HTML, o a no utilizar para ciertas propiedades hojas de estilo. Así están las cosas a día de hoy, esperemos que en futuras versiones, que sucedan a las 4.x actuales, se unifiquen criterios y se contemplen en toda su extensión las especificaciones CSS1 o CSS2, si se concretasen estas últimas.

Estilos en cascada

La denominación hojas de estilo en cascada hace referencia a que un diseñador puede utilizar bibliotecas de hojas de estilo para usos generales y modificar, posteriormente, las propiedades de diversas etiquetas, con definiciones de estilos que complementen las iniciales o, incluso, varíen totalmente la declaración inicial. La especificación CSS indica que las definiciones de estilo deben propagarse en cascada, esto es, tendrán mayor orden de preferencia las últimas especificadas en el documento HTML.

Por ejemplo, si se declara utilizar la hoja de estilo hoja1.css al comienzo de un documento, en ese mismo documento puede referenciarse a otra hoja2.css. Esta segunda, tal vez redefina algunas de las etiquetas que están definidas en la primera. En tal caso, el estándar dice que las etiquetas redefinidas deberían prevalecer sobre las definidas con anterioridad. Pero nada más. Sin embargo, no siempre es así el comportamiento de los navegadores; en unos casos se redefinen todas las propiedades de la etiqueta, pasando a ser las predeterminadas aquellas no explícitamente redefinidas; en otros, se llega a ignorar todo el contenido de la hoja de estilo inicial.

Obviamente, se trata de comportamientos incorrectos, pero el tema de implementaciones aun está por completar y de ahí estos problemas, que pueden ser de cierta importancia. Tal vez lo único que pudiera justificar algunas alteraciones es una recomendación de que no se mezclen, en la medida de lo posible, estilos definidos por métodos distintos, por ejemplo con un archivo .css y una etiqueta STYLE (véanse más arriba las diversas posibilidades).

Si tomamos como base el Listado 1, partimos de un archivo de hoja de estilo (hoja1.css), que se carga en el documento HTML mediante <LINK REL="stylesheet" TYPE="text/css" HREF="hoja1.css">. Además hay varias definiciones de estilos en las etiquetas de la lista no ordenada (<UL>...</UL>), en la forma <LI STYLE="color:green">.

Como forma alternativa, el Listado 2 contiene un documento con definiciones de estilo inline, mediante la etiqueta <STYLE>. Además, se introdujo un color de fondo alternativo a la imagen, mediante la instrucción background: url(background.gif) RGB(192,192,192); en la etiqueta <BODY>. El resultado final es idéntico, pero de usarlo, deberíamos repetir la definición de estilos en todas y cada una de las páginas HTML, en vez de referenciar la hoja1.css; este inconveniente se reproduciría con cada cambio que deseáramos realizar. Por cierto, Netscape Navigator se comporta de forma diferente. En primer lugar, caso del Listado 1, pone de fondo de color negro, no gris o blanco, el área no cubierta por la imagen. En segundo lugar, en ambos listados, el color asignado a las etiquetas <LI> sólo afectan a los bolos, no al texto que sigue.

En el Listado 3 recogemos un nuevo modo de definir estilos en cascada. La hoja2.css utiliza @import para incluir las definiciones de estilo de la hoja1.css. Explorer hace lo que pensamos tendría que hacer, cambia el color de fondo a amarillo y no expone imagen en la banda izquierda. Por contra Netscape 4 ignora todas las definiciones de estilo de hoja1.css. Sin embargo, si se cambia el Listado 3 y se referencian las dos hojas de estilo en cascada:

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información