Santo Graal (web design)
Folhas de estilo em cascata |
---|
Conceitos |
Filosofias |
|
Tools |
Comparisons |

O Santo Graal é um layout de página da web que possui várias colunas de altura igual definidas com folhas de estilo. É comumente desejado e implementado, mas durante muitos anos, as várias maneiras pelas quais poderia ser implementado com as tecnologias disponíveis tiveram desvantagens. [1] Por causa disso, encontrar uma implementação ideal foi comparado à busca pelo indescritível Santo Graal .
No final dos anos 1900, as limitações do CSS e do HTML, o desejo de páginas semanticamente significativas que tivessem boa classificação nos motores de busca e as deficiências de vários navegadores combinaram-se historicamente para criar uma situação em que não havia como criar esse tipo de layout que seria considerado totalmente correto. Como as tecnologias subjacentes não forneciam uma solução adequada, os web designers encontraram várias maneiras de contornar as limitações. As soluções alternativas comuns incluíam alterações na estrutura da página, adição de gráficos, scripts e uso criativo de CSS. Esses métodos eram imperfeitos, inconvenientes e considerados por alguns como um abuso dos padrões da web e de suas intenções.
Padrões web mais recentes forneceram soluções muito mais completas e robustas para implementação deste layout. Em particular, os módulos CSS Flexible Box Layout e CSS Grid Layout forneceram soluções completas. [2] [3]
O problema
Muitas páginas da web exigem um layout com múltiplas (geralmente três) colunas, com o conteúdo da página principal em uma coluna (geralmente no centro) e conteúdo complementar, como menus e anúncios, nas outras colunas (barras laterais). Essas colunas geralmente exigem planos de fundo separados, com bordas entre eles, e devem parecer ter a mesma altura, independentemente da coluna que tiver o conteúdo mais alto. Um requisito comum é que as barras laterais tenham largura fixa, com a coluna central ajustada em tamanho para preencher a janela (layout fluido ou líquido). Outro requisito comum é que, quando uma página não contém conteúdo suficiente para preencher a tela, o rodapé caia para a parte inferior da janela do navegador, em vez de deixar um espaço em branco embaixo.

Houve muitos obstáculos para conseguir isso:
- CSS , embora bastante útil para estilização, tinha capacidades limitadas para layout de página.
- A altura dos elementos de bloco (como elementos div) é normalmente determinada pelo seu conteúdo. Portanto, duas divisões, lado a lado, com quantidades diferentes de conteúdo, terão alturas diferentes, a menos que sua altura seja de alguma forma definida com um valor apropriado.
- HTML deve ser usado semanticamente ; Devem ser escolhidos elementos HTML que descrevam com precisão seu conteúdo. A aparência de uma página web renderizada por um agente de usuário deve ser determinada independentemente por regras de estilo. Muitas implementações fazem uso indevido de HTML usando tabelas para conteúdo não tabular ou aninhando vários elementos div sem finalidade semântica. O uso não semântico de HTML confunde os usuários ou agentes de usuários que estão tentando discernir a estrutura do conteúdo da página e é um problema de acessibilidade . [4]
- Como os mecanismos de pesquisa podem considerar o conteúdo no início do código-fonte de uma página da Web mais relevante e o conteúdo é lido na ordem do código-fonte quando visualizado por alguns agentes de usuário, como leitores de tela, os web designers desejam a capacidade de colocar o conteúdo no origem da página em ordem arbitrária, sem afetar a aparência da página.
- Devido à renderização incorreta do conteúdo por diferentes navegadores, um método que funciona em um navegador compatível com os padrões pode não funcionar em um que não implemente CSS corretamente.
Soluções alternativas conhecidas
Tabelas
Antes da implementação generalizada do CSS, os designers costumavam usar tabelas para organizar as páginas. Às vezes, eles alcançavam o layout desejado aninhando várias tabelas umas dentro das outras. Embora colocar as colunas dentro das células da tabela atinja facilmente a aparência visual desejada, usar uma tabela é semanticamente incorreto, embora o atributo HTML WAI-ARIA "papel " possa ser definido como "apresentação" para recuperar o contexto semântico. Também não há como controlar a ordem das colunas na origem da página.
Divisões com display:mesa
É possível fazer com que as colunas tenham altura igual usando a display
propriedade CSS. [5] Isso requer divisões de contêiner aninhadas definidas como display: table
e display: table-row
e colunas definidas como display: table-cell
. Isto é semanticamente correto, pois apenas a exibição é afetada. No entanto, este método não possui a capacidade de controlar a ordem do código-fonte. Também não funcionará com alguns navegadores mais antigos e sem suporte, como o Internet Explorer 7.
Colunas falsas
Este método usa uma imagem de fundo que fornece as cores de fundo e as bordas verticais de todas as três colunas. [6] O conteúdo de cada coluna é delimitado por uma divisão e posicionado sobre seu fundo usando técnicas como flutuadores, margens negativas e posicionamento relativo. O fundo normalmente tem apenas alguns pixels de altura e é feito para cobrir a página usando o atributo "repeat-y". Isso funciona bem para layouts de largura fixa e pode ser adaptado para páginas de largura variável com base em porcentagem, mas não pode ser usado para páginas centrais fluidas.
JavaScript
Neste método, após o carregamento da página, um script mede a altura de cada uma das colunas e define a altura de cada coluna com o valor maior. Isso não funcionará em navegadores que não suportam JavaScript ou que tenham JavaScript desativado.
Posicionamento fixo ou absoluto
Neste método, os cantos das divisões das colunas são bloqueados em um local específico da página. [7] Isto pode ser aceitável ou mesmo desejado, mas não resolve o problema do Santo Graal, pois é um layout significativamente diferente. As consequências desse método podem incluir ter conteúdo aparecendo abaixo das colunas (como um rodapé) fixado na parte inferior da tela, espaço em branco sob o conteúdo da coluna e exigir barras de rolagem para cada coluna para visualizar todo o conteúdo.
Divisões aninhadas
Uma divisão com seu plano de fundo crescerá em altura para conter seu conteúdo. Este comportamento é usado para resolver o problema criando três divisões aninhadas umas dentro das outras que fornecem os três planos de fundo. Essas divisões são colocadas em seus devidos locais por meio de técnicas de posicionamento, e as três divisões de conteúdo são colocadas dentro da divisão de fundo mais interna, posicionadas sobre seus respectivos fundos. As divisões de fundo tornam-se tão altas quanto a divisão de conteúdo mais alta. As desvantagens deste método incluem as três divisões não semânticas e a dificuldade de posicionamento dos elementos deste layout complexo. [8]
Cor da borda
Uma versão mais simples do método de divisão aninhada envolve o uso de uma única divisão de contêiner. As propriedades de fundo desta divisão fornecem o fundo da coluna central, e as bordas esquerda e direita, que têm larguras iguais às larguras das colunas laterais, fornecem as cores de fundo das barras laterais. O conteúdo de cada coluna é posicionado sobre seu plano de fundo. Este método ainda usa uma divisão não semântica e dificulta a aplicação de imagens de fundo e bordas às barras laterais. [9]
Preenchimento inferior
Ao colocar uma grande quantidade de preenchimento na parte inferior do contêiner da coluna, o plano de fundo se estenderá muito abaixo do conteúdo da coluna. Uma margem negativa correspondente trará o conteúdo abaixo das colunas de volta à sua posição correta. O posicionamento é simples neste método, pois o contêiner do conteúdo de uma coluna também contém seu plano de fundo. Um valor de preenchimento de 32767px é o maior que será reconhecido por todos os navegadores modernos. Se a diferença nas alturas das colunas for maior que isso, o plano de fundo da coluna mais curta não preencherá totalmente a coluna. [10]
Soluções atuais
Os padrões CSS3 contêm módulos que podem organizar os elementos da página de maneira adequada. Dois deles resolvem totalmente o problema do Santo Graal. [1] [11] O suporte para esses módulos está ausente ou deficiente em navegadores mais antigos. Muitos designers implementarão esses módulos enquanto fornecem estilos compatíveis para navegadores mais antigos, que serão substituídos nos navegadores modernos pela nova sintaxe. O suporte para navegadores mais antigos tornou-se menos importante em 2020, quando o suporte estendido para Windows 7 terminou e o uso do Internet Explorer tornou-se menos comum.
Layout de caixa flexível CSS (Flexbox)
O World Wide Web Consortium (W3C) abordou a questão do layout através de várias propostas. A proposta mais madura é o Módulo de Layout de Caixa Flexível (AKA Flexbox), que está no status de Recomendação Candidata em novembro de 2018. [12] Definir a propriedade de exibição de um elemento display: flex
ou display: inline-flex
faz com que o elemento se torne um novo tipo de contêiner (semelhante a um bloco ou bloco embutido, respectivamente), com novos métodos de posicionamento de objetos filhos. A proposta do W3C contém um exemplo que atinge o layout de coluna do Santo Graal usando quatro regras CSS simples e torna o layout responsivo com uma regra simples de consulta de mídia. O módulo também pode ser usado para resolver muitos outros problemas de layout.
O Módulo de layout de caixa flexível é compatível com todos os navegadores modernos, embora a implementação do Internet Explorer apresente problemas. [13]
Layout de grade CSS
Da mesma forma, o Módulo Grid Layout permite que um designer crie um contêiner para layout, que contém linhas e colunas de tamanho fixo ou variável nos quais os elementos podem ser colocados. Está no status de Recomendação Candidata em dezembro de 2020. [14] É compatível com todos os navegadores modernos, no entanto, a implementação do Internet Explorer apresenta problemas. [15] Este módulo é uma continuação de trabalhos anteriores realizados como Módulo de Posicionamento de Grade, Módulo de Layout de Modelo e Módulo de Layout Avançado. [16]
Um aspecto deste módulo é a capacidade de criar slots de grade em um contêiner semigraficamente, de uma maneira que foi descrita como " arte ASCII ", como no módulo Template Layout substituído.
Embora o módulo Caixa Flexível seja capaz de executar layout de página bidimensional, sua finalidade é posicionar elementos principalmente ao longo de um único eixo. O layout de grade é preferido para o layout de páginas complexas e páginas cujo layout varia muito em um design responsivo. [17]
História
O primeiro design de flanqueamento de três colunas que usava CSS puro foi desenvolvido por Rob Chandanais da BlueRobot [18] para o site erradowaygoback.com em 2001. Naquela época, Neale Talbot estava usando JavaScript para determinar o posicionamento da coluna da direita. Chandanais surgiu com uma solução elegante para o posicionamento usando CSS puro e logo depois apelidada de O Santo Graal por Eric Costello do Glish.com. [19]
Veja também
Referências
- ^ ab .appendTo: Resolvendo o layout do Santo Graal
- ^ "Layout do Santo Graal - Resolvido pelo Flexbox - CSS mais limpo e sem hack" . philipwalton.github.io . Recuperado em 26/03/2019 .
- ^ "O layout do Santo Graal com 5 linhas de CSS" . Truques CSS . Recuperado em 26/03/2019 .
- ^ "Padrão HTML" . html.spec.whatwg.org .
- ^ Construir Internet: quatro métodos para criar colunas de altura igual
- ^ Cederholm, Dan (9 de janeiro de 2004). "Colunas falsas". Uma lista à parte .
- ^ "COMO FAZER layout sem mesa" . www.w3.org .
- ^ "Colunas de altura igual (grade CSS, Flexbox e métodos de tabela)" . Matheus James Taylor .
- ^ Pearce, Alan (6 de agosto de 2008). "Layouts de várias colunas saem da caixa" . Uma lista à parte .
- ^ "Colunas CSS de altura igual: guia prático com exemplos de código" . www.positioniseeverything.net . 15 de dezembro de 2021.
- ^ "Layout do Santo Graal - Resolvido pelo Flexbox - CSS mais limpo e sem hack" . philipwalton.github.io .
- ^ "Módulo de layout de caixa flexível CSS nível 1" . www.w3.org .
- ^ "Posso usar... Tabelas de suporte para HTML5, CSS3, etc" . CanIUse. com . Recuperado em 27/02/2016 .
- ^ "Módulo de layout de grade CSS nível 1" . www.w3.org .
- ^ "CSS Grid Layout (nível 1) | Posso usar... Tabelas de suporte para HTML5, CSS3, etc" . caniuse. com .
- ^ Bos, Bert; Acebal, César (26 de março de 2015). "Módulo de layout de modelo CSS". www.w3.org .
- ^ "Por que Flexboxes não são bons para layout de página - preenchimento de guias" . www.xanthir. com .
- ^ "Blue Robot | Mensagens, Chat Bots e Experiências Sociais" . www.bluerobot.com . Arquivado do original em 25 de abril de 2013.
- ^ "Técnicas de layout Glish.com - 3 colunas, O Santo Graal" . Arquivado do original em 01/12/2008 . Recuperado em 15/05/2013 .