Santo Graal (web design) - Holy grail (web design)
| Cascading Style Sheets |
|---|
| Conceitos |
| Filosofias |
| Ferramentas |
| Comparações |
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 por muitos anos, as várias maneiras pelas quais ele poderia ser implementado com as tecnologias disponíveis, todas apresentavam desvantagens. Por causa disso, encontrar uma implementação ideal foi comparado a procurar o indescritível Santo Graal .
As limitações de CSS e HTML, a conveniência de páginas semanticamente significativas que tenham uma boa classificação nos mecanismos de pesquisa e as deficiências de vários navegadores combinadas 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. Soluções alternativas comuns incluem mudanças na estrutura da página, adição de gráficos, scripts e o uso criativo de CSS. Esses métodos eram imperfeitos, inconvenientes e considerados por alguns como um abuso dos padrões da web e de sua intenção.
Os padrões da web mais recentes forneceram soluções muito mais completas e robustas para a implementação desse layout. Em particular, os módulos CSS Flexible Box Layout e CSS Grid Layout oferecem soluções completas.
O problema
Muitas páginas da web exigem um layout com várias (geralmente três) colunas, com o conteúdo da página principal em uma coluna (geralmente o centro) e conteúdo complementar, como menus e anúncios nas outras colunas (barras laterais). Essas colunas geralmente requerem fundos separados, com bordas entre eles, e devem parecer ter a mesma altura, não importa qual coluna tenha o conteúdo mais alto. Um requisito comum é que as barras laterais tenham uma largura fixa, com a coluna central ajustando o 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é deve cair 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 recursos limitados para layout de página.
- A altura dos elementos do bloco (como elementos div) é normalmente determinada por seu conteúdo. Portanto, duas divisões, lado a lado, com diferentes quantidades 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 ; Os elementos HTML devem ser escolhidos de forma a descrever com precisão seu conteúdo. A aparência de uma página da web conforme renderizada por um agente do usuário deve ser determinada independentemente por regras de estilo. Muitas implementações usam HTML incorretamente usando tabelas para dados não tabulares ou aninhando vários elementos div sem finalidade semântica. O uso não semântico de HTML confunde 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 .
- Como os mecanismos de pesquisa podem considerar o conteúdo no início do código-fonte de uma página da web como mais relevante , e o conteúdo é lido na ordem do código-fonte quando visualizado por alguns agentes do usuário, como leitores de tela, os web designers desejam a capacidade de colocar o conteúdo no fonte da página em uma ordem arbitrária, sem afetar a aparência da página.
- Por causa da renderização incorreta de conteúdo por navegadores diferentes, 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
Mesas
Antes da implementação generalizada de CSS, os designers costumavam usar tabelas para fazer o layout das 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 colunas com altura igual usando a displaypropriedade CSS . Isso requer divisões de contêiner aninhadas definidas como display: tablee display: table-row, e colunas definidas como display: table-cell. Isso é semanticamente correto, pois apenas a tela é afetada. No entanto, esse método não tem 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 faux
Este método usa uma imagem de fundo que fornece as cores de fundo e as bordas verticais de todas as três colunas. O conteúdo de cada coluna é delimitado por uma divisão e posicionado sobre seu plano de fundo usando técnicas como flutuações, 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 de centro fluido.
JavaScript
Nesse método, depois que a página é carregada, 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 o JavaScript desabilitado.
Posicionamento fixo ou absoluto
Neste método, os cantos das divisões da coluna são bloqueados em um local específico na página. Isso pode ser aceitável ou até 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é) fixo 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 aumentará em altura para conter seu conteúdo. Esse 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 locais apropriados usando 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 desse método incluem as três divisões não semânticas e a dificuldade de posicionar os elementos desse layout complexo.
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 fundo. Esse método ainda usa uma divisão não semântica e torna difícil aplicar imagens de plano de fundo e bordas às barras laterais.
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 adequada. 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 32767 px é o maior que será reconhecido por todos os navegadores modernos. Se a diferença nas alturas das colunas for maior do que isso, o fundo da coluna mais curta não preencherá totalmente a coluna.
Soluções atuais
Os padrões CSS3 contêm módulos destinados ao layout dos elementos da página. Dois deles resolvem totalmente o problema do Santo Graal. O suporte para esses módulos está ausente ou deficiente em navegadores mais antigos. Muitos designers irão implementar esses módulos ao mesmo tempo em que fornecem estilo compatível 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 o Windows 7 terminou e o uso do Internet Explorer se tornou menos comum.
Layout de caixa flexível CSS (Flexbox)
O World Wide Web Consortium (W3C) abordou a questão do layout por meio 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. Definir a propriedade de exibição de um elemento display: flexou display: inline-flexfaz com que o elemento se torne um novo tipo de contêiner (semelhante a um bloco ou embutido bloco, respectivamente), com novos métodos de posicionamento de objetos filho. O conteúdo pode fluir em qualquer direção e ser exibido em qualquer ordem. A proposta do W3C contém um exemplo que atinge o layout da 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 tenha problemas.
Layout de grade CSS
O Grid Layout Module permite que um designer crie um contêiner para layout, que contém linhas e colunas de tamanho fixo ou variável no qual os elementos podem ser colocados. Ele está com o status de recomendação de candidato em dezembro de 2020. É compatível com todos os navegadores modernos, no entanto, a implementação do Internet Explorer apresenta problemas. Este módulo é uma continuação do trabalho anterior feito como Módulo de posicionamento de grade, Módulo de layout de modelo e Módulo de layout avançado.
Um aspecto deste módulo é a capacidade de criar slots de grade em um contêiner semigráfico, de uma maneira que foi descrita como " arte ASCII ", como no módulo de Layout de modelo substituído.
Embora o módulo Caixa Flexível seja capaz de executar um layout de página bidimensional, sua finalidade é posicionar os 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.
História
O primeiro design de flanqueamento de três colunas que usava CSS puro foi desenvolvido por Rob Chandanais da BlueRobot para o site wrongwaygoback.com em 2001. Naquela época, Neale Talbot estava usando JavaScript para determinar o posicionamento da coluna à direita. Chandanais surgiu com uma solução elegante para o posicionamento usando puro CSS e logo depois apelidou de O Santo Graal por Eric Costello de Glish.com.