Tras una lectura del nuevo libro de SitePoint titulado: 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:
- Ignorar navegadores “antiguos“, es decir, en cuanto salga el 8 olvidarse del 7 y del 6.
- Proporcionar una estructura más simplificada haciendo uso de hojas de estilo condicionales.
- 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.
