Santo grial (diseño web)
El santo grial es un diseño de página web que tiene múltiples columnas de igual altura que se definen con hojas de estilo. Es comúnmente deseado e implementado, pero durante muchos años, las diversas formas en las que podría implementarse con las tecnologías disponibles tuvieron todos sus inconvenientes. [1] Debido a esto, encontrar una implementación óptima se comparó con la búsqueda del escurridizo Santo Grial .
Las limitaciones de CSS y HTML, la conveniencia de páginas semánticamente significativas que se clasifiquen bien en los motores de búsqueda y las deficiencias de varios navegadores se combinaron históricamente para crear una situación en la que no había forma de crear este tipo de diseño que se consideraría totalmente correcto. . Como las tecnologías subyacentes no proporcionaron una solución adecuada, los diseñadores web encontraron varias formas de sortear las limitaciones. Las soluciones provisionales incluían cambios en la estructura de la página, la adición de gráficos, secuencias de comandos y el uso creativo de CSS. Estos métodos eran imperfectos, inconvenientes y algunos los consideraban un abuso de los estándares web y su intención.
Los estándares web más recientes han proporcionado soluciones mucho más completas y sólidas para implementar este diseño. En particular, los módulos CSS Flexible Box Layout y CSS Grid Layout han proporcionado soluciones completas. [2] [3]
Muchas páginas web requieren un diseño con varias columnas (a menudo tres), con el contenido de la página principal en una columna (a menudo en el centro) y contenido complementario, como menús y anuncios, en las otras columnas (barras laterales). Estas columnas comúnmente requieren fondos separados, con bordes entre ellos, y deben parecer tener la misma altura sin importar qué columna tenga el contenido más alto. Un requisito común es que las barras laterales tengan un ancho fijo, con la columna central ajustando su tamaño para llenar la ventana (disposición fluida o líquida). Otro requisito común es que, cuando una página no tiene suficiente contenido para llenar la pantalla, el pie de página debe caer al final de la ventana del navegador en lugar de dejar un espacio en blanco debajo.
Antes de la implementación generalizada de CSS, los diseñadores solían usar tablas para diseñar páginas. A veces lograron el diseño deseado colocando varias mesas una dentro de la otra. Aunque colocar las columnas dentro de las celdas de la tabla logra fácilmente la apariencia visual deseada, usar una tabla es semánticamente incorrecto, aunque el atributo HTML WAI-ARIA "rol" se puede establecer en "presentación" para recuperar el contexto semántico. Tampoco hay forma de controlar el orden de las columnas en la fuente de la página.
Es posible hacer que las columnas tengan la misma altura usando la displaypropiedad CSS . [5] Esto requiere divisiones de contenedor anidadas que se establecen en display: tabley display: table-row, y columnas que se establecen en display: table-cell. Esto es semánticamente correcto, ya que solo se ve afectada la pantalla. Sin embargo, este método carece de la capacidad de controlar el orden del código fuente. Tampoco funcionará con algunos navegadores antiguos no compatibles, como Internet Explorer 7.
