Acessibilidade

CSS3 – Módulo Template Layout

Entenda como você não fará mais estruturas com a propriedade float.

Por Diego Eis

• 31 comentários
• Tweet

Talvez você me chame de louco, mas para mim a parte mais fácil de desenvolver um site com CSS é o planejamento e diagramação do layout. Coincidentemente é a parte que mais os desenvolvedores tem problemas crossbrowser ou por falta de recursos mais avançados. Mas se você parar para pensar, apenas uma propriedade cuida dessa parte, que é a propriedade float. De longe, para mim, o float é a propriedade mais importante que há no CSS. Se o IE não soubesse o que é float, até hoje nós não estaríamos fazendo sites com CSS. O float cuida de toda a diagramação do site, desde os elementos que definirão as áreas mestres do site até os pequenos detalhes de imagens e ícones.

A propriedade float é muito simples de se entender. O problema não é o funcionamento, mas os efeitos que a propriedade float causa nos elementos próximos. Se você pede para duas colunas ficarem flutuando à esquerda e outra coluna à direita, o rodapé sobe. Ou se você coloca um elemento envolvendo outros elementos com float, esse elemento perde a altura. Estes são problemas corriqueiros que já tem soluções inteligentes e que não apresentam chateações mais graves.

Infelizmente o float não é o ideal para a diagramação e organização dos elementos do layout. Ele resolve muitos problemas, mas deixa a desejar em diversos sentidos. O float está completamente ligado a ordem dos elementos no HTML. Existem técnicas que você consegue fazer quase que qualquer oganização visual sem encostar no código HTML. Mas há outras necessidades que invariavelmente você precisará modificar a ordem dos elementos no meio do HTML para que a diagramação do site saia conforme o esperado. Essa organização do HTML pode alterar desde programação server-side e até resultados de SEO e acessibilidade. Por isso é interessante que o HTML fique organizado de forma que ele supre as necessidades dessas bases. Sua organização visual deve ser independente desta organização.

Tendo em vista estes e outros problemas o W3C criou um novo módulo. Na verdade ele não é o único, e nem pode ser para que tenhamos diversas formas de trabalhar. O módulo em questão é chamado de Template Layout. Esse módulo consiste em uma forma de criarmos e organizarmos os elementos e informações do layout de forma menos espartana e mais flexível.

Podemos dividir a construção do layout em duas grandes partes: 1) Definição dos elementos mestres e grid a ser seguido. 2) Formatação de font, cores, background, bordas etc.

As propriedades nesta especificação trabalham associando uma política de layout de um elemento. Essa política é chamada de template-based positioning (não tem nada a ver com a propriedade position, pelo contrário é uma alternativa) que dá ao elemento uma grid invisível para alinhar seus elementos descendentes.
Porque o layout deve se adaptar em diferentes janelas e tamanhos de papéis, as colunas e linhas do grid deve ser fixas ou flexiveis dependendo do tamanho.

O W3C mostra alguns casos comuns:

• Páginas complexas com múltiplas barras de navegação em áreas com posições fixas como publicidade, submenus e etc.
• Formulários complexos, onde o alinhamento de labels e campos pode
  m ser facilmente definidos com as propriedades deste módulo com a ajuda das propriedades de margin, padding e tables.
• GUIs, onde botões, toolbars, labels,
  ícones etc, tem alinhamentos complexos e precisam estar sempre alinhados caso o tamanho ou a resolução da tela mudam.
• Medias que são paginadas, como medias de impressão onde cada página são divididos em áreas fixas para conteúdos de gêneros diferentes.

Template-based positioning são uma alternativa para a propriedade position com o valor absolute. Antigamente lembro-me que quase todos os desenvolvedores tentavam organizar e diagramar layouts utilizando position. Não que seja errado, mas definitivamente não é a melhor forma. Costumo dizer em meus cursos e palestras que position é para detalhes. Nada muito grande, mas para pequenos detalhes. Usamos position para posicionarmos elementos que não tem relação direta com sua posição no código HTML. Ou seja, não importa onde o elemento esteja, o position:absolute; irá posicionar o elemento nas coordenadas que você quiser.

Sintaxe e funcionamento

O módulo Template Layout basicamente define slots de layout para que você encaixe e posicione seus elementos. O mapeamento dos slots é feito com duas propriedades que já conhecemos que este módulo adiciona mais alguns valores e funcionalidades, são as propriedades position e display.

A propriedade display define como será o Grid, ou seja, quantos espaços úteis terá o layout.
A propriedade position irá posicionar seus elementos nestes slots.

Veja o código HTML abaixo:

Agora iremos definir a posição destes elementos. O código CSS seria assim:

O funcionamento da propriedade display

A propriedade display define a organização dos slots. Um slot é o local onde os elementos serão colocados.
Aqui o elemento display trabalha como um table, onde seu conteúdo será colocando em colunas e linhas. A única diferença é que o número de linhas e colunas não dependem do conteúdo. A outra principal diferença é que a ordem dos descendentes no código não importa. Ou seja, não importa a estrutura dos elementos no HTML, você pode colocá-los em qualquer lugar do layout.

Cada letra diferente é um slot de conteúdo diferente. O @ define um sinal para um slot padrão. E o “.” (ponto) define um espaço em branco.

Quando repetimos as letras como no exemplo anterior, tanto na horizontal quanto na vertical, é formado um slot único que se expande para o tamanho da quantidade de slots. Lembra do colspan ou rowspan utilizados na tabela? Pois é, funciona igualzinho.

Não é possível fazer um slot que não seja retangular ou vários slots com a mesma letra. Um template sem letra nenhuma também não é possível. Um template com mais de um @ também é proibido. Se houverem esses erros a declaração é ignorada pelo browser.

Pra definir a altura da linha (row-height) podemos utilizar o valor padrão “auto”, que define altura que a altura da linha é feito de acordo com a quantidade de conteúdo no slot. Você pode definir um valor fixo para a altura. Não é possível definir um valor negativo. Quando definimos um * (asterísco) para a altura, isso quer dizer que todas as alturas de linha serão iguais.

A largura da coluna (col-width) é definida com valores fixos, como o row-height. Podemos definir também o valor de * que funciona exatamente igual ao altura de linha, mas aplicados a largura da coluna. Há dois valores chamados max-content e min-content que fazem com que a largura seja determinada de acordo com o conteúdo. Outro valor é o minmax(p,q) que funciona assim: a largura das colunas são fixadas para ser maiores ou iguais a p e menores ou iguais a q. Pode haver um espaço branco (white space) em volta de p e q. Se q > p, então q é ignorado e o minmax(p,q) é tratado como minmax(p,p). O valor fit-content é o equivalente a minmax(min-content, max-content).

Definindo a largura e altura dos slots

Para definir a altura dos slots, utilizamos uma sintaxe diretamente na propriedade display. Veja abaixo um exemplo de como podemos fazer isso:

Formatando de uma maneira que você enteda, fica assim:

Ou seja, a primeira coluna do grid terá 100px de largura, a segunda 400px e a terceira 100px.
As medidas que coloquei ao lado, iniciando com uma / (barra) definem a altura das linhas. Logo a primeira linha terá 150px e a terceira linha também. A linha do meio, como não tem altura definida terá a altura de acordo com a quantidade de conteúdo.

O espaço entre as colunas são definidos com “.” (pontos). Veja o exemplo abaixo:

No exemplo acima fiz duas colunas no código compostos por pontos em vez de fazer com letras. Isso quer dizer que entre as colunas do grid haverá um espaço em branco de 50px de altura. Veja a imagem abaixo para entender melhor o código:

O funcionamento da propriedade position

O valor da propriedade position especifica qual linha e coluna o elemento será colocado no template. Você escreve apenas uma letra por elemento. Vários elementos podem ser colocados em um mesmo slot. Logo estes elementos terão o mesmo valor de position.

Abaixo veja uma imagem que pegamos diretamente do exemplo do W3C. O layout é muito simples:

Este layout é representado pelo código abaixo. Primeiro o HTML:

Agora veja o CSS com toda a mágica:

Lembre-se que não importa a posição dos elementos no código. E essa é a mágica. Podemos organizar o código HTML de acordo com nossas necessidades e levando em consideração SEO, Acessibilidade e processo de manutenção. O HTML fica totalmente intacto separado de qualquer formatação. Muito, mas muito interessante.

Pseudo-elemento ::slot()

Você pode formatar um slot especifico simplesmente declarando-o no CSS. Suponha que você queira que um determinado slot tenha um fundo diferente, alinhamento e etc… Essa formatação será aplicada diretamente no slot e não no elemento que você colocou lá. Fica mais simples de se formatar porque você não atrela um estilo ao elemento e sim ao slot. Se você precisar posicionar aquele elemento em outro lugar, você consegue facilmente.

As propriedades aplicadas no pseudo elemento slot() seguem abaixo:

• Todos as propriedades background.
• vertical-align
• overflow
• box-shadow, block-flow e direction ainda estão sendo estudados pelo W3C se elas entrarão ou não.

Mas e o float?

É senhores… Eu acho que o float tem seus dias contados para a criação de estruturas de layouts. Quando utilizamos o float para estruturar o layout, nós dependemos profundamente da organização e posição dos elementos no código HTML. Não estou dizendo que o float ficará obsoleto, você ainda vai utilizá-lo e muito. Você vai pará-lo de utilizar para criar a base estrutural do site. Ou seja, a estrutura básica de divisão de conteúdo será feita pelo Template Layout, mas muitos dos detalhes internos e organização dos elementos contidos nos elementos mestres serão feitos com float.

Com o Template Layout a estrutura do layout não depende da posição dos elementos do HTML no código, você poderá otimizar o código ao máximo para os leitores de tela e sistemas de busca, já que estes meios de acesso prezam pela estrutura do seu conteúdo.

Já funciona?

Sim, já funciona, mas não nativamente nos browser. Esta especificação ainda é um rascunho do W3C e por isso os browsers ainda não a suportam. Mesmo assim um desenvolvedor criou um script em Javascript que entende o CSS desta especificação e simula os resultados. Você pode baixar o script aqui.

Veja um exemplo funcionando aqui.

• 31 comentários

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de Diego Eis