Sobre css

[Jose San Leandro <jsanleandro@xxxxxxxx>]

Hola,

Como muchos conoceréis CSS mejor que yo, quería
consultaros algunas dudas relacionadas con esta
tecnología.

Las vistas html de las aplicaciones que vengo
desarrollando tratan de ser lo más estrictas posible
en cuanto a la separación de estructura, estilo y
contenido. Por un lado, la estructura se elije
dinámicamente usando Tiles, como ya he comentado en
algún otro mail. En ejemplo de fragmento de página
puede ser algo como lo siguiente:

<div class="left-zone" id="navigation-zone">
  <div class="menu" id="navigation-menu">
    <div class"=menu-item" id="home-menu-item">
      <!-- Palabra "Home" internacionalizada -->
    </div>
  </div>
</div>
<div class="right-zone" id="content-zone">
  <!-- Contenido también internacionalizado -->
</div>

Este fragmento se genera usando un "layout.jsp"
concreto. Si por ejemplo se utiliza otro, como
"mirrorlayout.jsp", en el cual se definiera una
estructura "espejo" de la anterior,

<div class="left-zone" id="content-zone">
  <!-- Contenido internacionalizado -->
</div>
<div class="right-zone" id="navigation-zone">
  <div class="menu" id="navigation-menu">
    <div class"=menu-item" id="home-menu-item">
      <!-- Palabra "Home" también internacionalizada
-->
    </div>
  </div>
</div>

dispondríamos de un método flexible para gestionar la
estructura de las páginas.

El contenido se obtiene en función del idioma, bien
predefinido por el usuario (el de su sistema operativo
o el definido en el navegador), o bien porque el
usuario ha seleccionado esa opción al hacer click en
el link correspondiente a ese idioma.

Y por otro lado, el estilo se especifica en css
independientes. He separado los estilos en función de
dos criterios: estructural y semántico. Los relativos
a la estructura se utilizan en atributos "class", y se
especifican en un fichero externo "base.css", mientras
que los semánticos se indican en atributos "id", y se
definen en "custom.css".

Así, en base.css podría haber algo como:

.left-zone {
/* Estilos de la zona de la izquierda */
}

.right-zone {
/* Estilos de la zona de la derecha */
}

y en custom.css :

#navigation-zone {
/* Estilos de la navegación */
}

#content-zone {
/* Estilos del contenido */
}

La idea es que el aspecto general lo determine
base.css, mientras que en determinados casos
particulares se puedan redefinir los estilos, gracias
a custom.css

Hasta ahora, esta metodología me ha dado buenos
resultados, ya que separa claramente los estilos de
los contenidos.
Sin embargo, he querido explotar todas las
posibilidades, y he encontrado graves dificultades.
Lo que quiero conseguir es ofrecer al usuario poder
elegir distintos aspectos visuales de la misma
información. "Aspecto visual", en este sentido, se
refiere por un lado a cambios en la estructura de la
página (como el espejo anterior), y por otro a cambios
en el estilo (por ejemplo, una apariencia de alto
contraste, o con tonos azules, etc.).
La idea era que se pudiera elegir la estructura por un
lado (llamando a layout.jsp o mirrorlayout.jsp), e
incluyendo en el html, en este orden:
"base.css", "mirrorbase.css"; y por otro los estilos,
usando: "custom.css", "customblue.css".

Idealmente, esto podría ser suficiente. Se podría
incluir, en casos particulares, estilos en
"baseblue.css", "mirrorbaseblue.css",
"mirrorcustom.css" y "mirrorcustomblue.css". La razón
es para poder hilar fino en cuanto a los estilos que
relacionan distintos elementos de la página entre sí,
como los que determinan la posición de unos respecto a
otros.

Finalmente, el problema más grave resulta ser la
imposibilidad de css de "desdefinir" estilos. Por
ejemplo, si en base.css el right-zone tiene definido
una anchura concreta, en mirrorbase.css no se puede
"resetear" ese estilo. Eso hace que los estilos
particulares para un aspecto "mirror" y "blue" sean
muy díficiles de especificar y de mantener.

Lo único que se me ocurre es gestionar los estilos
dinámicamente, y así poder omitir estilos que en casos
como el mencionado no sean aconsejables. Pero hacerlo
dinámico tiene el inconveniente de que enlentece la
carga de las páginas, ya que el navegador no reutiliza
estilos que ya ha utilizado anteriormente.

He hecho una simple búsqueda en google, y hay
parseadores css en java. Por un lado, el un par
propios de w3c, y por otro uno de apache.

Si veis algún error en las suposiciones de cómo usar
css de la forma más conveniente, por favor
comentádmelo.

Aparte de eso, es increíble lo poco que le importa
seguir el estándar a Microsoft. CSS2 es del 98, y
visualizar una página con css más elaborados que
simplemente cambiar el color de los links, en el
explorer, produce unos resultados muy deficientes.
Ignora casi todo. El vencedor en todas mis pruebas es,
sin duda, Mozilla, pero en la versión Linux.
Lamentablemente la versión en Windows no interpreta
correctamente algunos estilos.
Además, es gratificante ver que Mozilla, como entorno
de ejecución de aplicaciones (no como navegador), hace
una separación muy clara entre los mismos conceptos
(estructura, estilo y contenido). Hay una diferencia:
en Mozilla no puedes hacerlo rematadamente mal (o
igual empeñándose mucho), pero con HTML lo difícil es
hacerlo medianamente bien. Las páginas que sólo se ven
en Explorer ya es algo injustificable.

Siento que haya salido un mail tan extenso.

Un saludo.
Jose.

___________________________________________________
Yahoo! Messenger - Nueva versión GRATIS
Super Webcam, voz, caritas animadas, y más...
http://messenger.yahoo.es