Tras una lectura del nuevo libro de SitePoint titulado: Everything You Know About CSS Is Wrong!

Portada del libro Everything You Know About CSS Is Wrong!

el título bien podría ser: “Cómo hacer estructuras de páginas con display:table y similares”. El libro que va directo al grano; se basa en la dificultad que existe a la hora de estructurar, maquetar, componer páginas mediante las técnicas actuales de hojas de estilo (CSS) y que mientras esta dificultad exista no se tome muy en serio el trabajo.

En la primera parte del libro, aparte de hablar sobre la guerra de navegadores y sobre la que vuelve a haber actualmente expone los diferentes métodos para hacer estructuras: posicionamientos y elementos flotados (float) así como de sus ventajas e inconvenientes.

Basándose en la pronta salida de Internet Explorer 8 y de su, por fin, soporte de los valores display:table, display:table-cell el libro muestra ejemplos de lo sencillo que resulta realizar bloques y estructuras que son sólidas y no tienen problemas a los que nos solemos enfrentar normalmente (alturas, ajustes de color entre columnas, etc, etc).

Incluso el libro trae una especie de preguntas frecuentes. Algunas de ellas:

  • ¿se puede usar este método para estructuras flexibles? (líquidas)
  • ¿pueden anidarse?
  • ¿cómo posiciono elementos dentro de estos bloques?
  • ¿están soportados los atributos rowspan y colspan? ¿se pueden simular?
  • ¿puedo cambiar el orden del contenido?

A partir de aquí, el libro ya deja en manos del lector el qué hacer. Obviamente la pega es que todo esto no funciona en Internet Explorer 6 y 7. Propone varias soluciones más o menos radicales:

  1. Ignorar navegadores “antiguos“, es decir, en cuanto salga el 8 olvidarse del 7 y del 6.
  2. Proporcionar una estructura más simplificada haciendo uso de hojas de estilo condicionales.
  3. Usar ambos sistemas; trabajar para navegadores de última generación con display:table y demás y hacer uso de hojas de estilo condicionales para trabajar versiones para Internet Explorer 6 y 7 de una manera “tradicional“.

La primera solución es muy radical y la segunda en términos reales no es factible ya que, a dia de hoy muy pocos están dispuestos a tener versiones con diseños simplificados. La tercera opción no es mala salvo que supone doble esfuerzo, pero como dice en el libro si no se empiezan a probarse los nuevos sistemas no se hará nunca.

Como nota curiosa, un elemento con un valor display:table no puede tener un valor position:relative ya que será ignorado.

Finalmente, el libro hace un repaso a la futura versión 3 de hojas de estilo y a su sistema de estructuras y bloques.

Un libro muy, muy recomendable.