Módulo Template Layout das CSS3

Publicado em: 10/05/2009

Introdução

Esse tutorial foi escrito em 2009. O Módulo Template Layout das CSS3 foi abandonado pelo W3C que criou o Módulo Grid Template Layout das CSS3 em 9 de outubro de 2012. Mantenho o tutorial no ar por razões históricas e ele não tem valor prático

A construção de layouts com CSS tem se constituido na grande "dor de cabeça" dos desenvolvedores comprometidos com os padrões web. Você encontra na Internet uma infinidade de layouts CSS prontos ou mesmo ferramentas online geradoras de layouts personalizados. Contudo até mesmo estas ferramentas têm suas limitações, pois é impossível contemplar todas as variantes de personalização.

Assim, quando se trata de layouts intrincados e fora de determinados padrões, até mesmo os mais experientes desenvolvedores acabam por dispender tempo extra para resolver as inconsistências de renderização.

Neste tutorial vou abordar um dos módulos das CSS3 dedicados à construção de layouts e denominado CSS Template Layout Module. Contudo adianto que nenhum navegador atual oferece suporte para as propriedades previstas neste módulo.
Ops! Então este é um tutorial completamente inútil?
Não, graças a jQuery você vai poder visualizar uma página construida com uso das propriedades CSS deste módulo.

Obrigado Alexis e parabéns pelo fantástico plugin

Um geek chamado Alexis Richard Pieter Devéria, nascido na Inglaterra e residente nos EUA lançou no final de abril de 2009 um plugin jQuery denominado css-template-layout que torna possível aos navegadores suportar as diretrizes do módulo CSS3 Template Layout. Segundo o autor os seguintes navegadores foram testados com sucesso.

• Internet Explorer 7+
• Firefox 2+
• Opera 9.6+
• Safari 3.1+
• Chrome 1+

Apresentação do Módulo Template Layout

Não irei explicar com detalhes todo o módulo, pois ele é extenso e com muitas variantes. Contudo, para facilitar o entendimento do tutorial vou comentar para vocês a filosofia geral que norteia a implementação das declarações CSS contidas no módulo e mostrar alguns exemplos de declarações CSS com a finalidade de fornecer os conceitos básicos do que iremos estudar.

Mostrarei ainda como desenvolver um layout simples de três colunas e a partir daí com uma leitura da especificação no site do W3C você estará em condições de tentar desenvolvimentos mais sofisticados e usar as muitas outras propriedades constantes daquelas especificações.

Como funciona

A idéia central da construção do template com uso das propriedades CSS3 se baseia em construir um grid em cima do template que se pretende montar. A técnica de construção do grid que eu adotei foi a de construir um esboço do template, dividindo-o em áreas de conteúdos e em seguida marcar tais áreas e os eventuais espaçamentos entre elas. Explicarei esta tÉcnica na seção seguinte, quando apresentar um exemplo prático.

Estas, áreas de conteúdos e espaçamentos, são as duas entidades fundamentais para as declarações de estilo de construção do layout. A especificação do W3C prevê que se designe cada área de conteúdo com uma letra do alfabeto (a, b, c, d, etc) e os espaçamentos com um ponto (.). Uma área de conteúdo pode ser representada por uma ou mais letras repetidas, por exemplo: a ou aa ou aaa ou aaaa..., todas estas simbologias representam a área de conteúdo a. É permitido o uso de letras minúsculas ou maiúsculas, isto é a representação e insensível ao tamanho da caixa da letra.

Vamos fazer uma leitura CSS3, segundo as diretrizes do módulo, do diagrama mostrado a seguir:

  aa
  bc
  dd

Trata-se de um layout com uma área superior (aa) seguida por duas áreas uma ao lado da outra (bc) e embaixo outra área (d), ou seja um layout clássico com topo, duas colunas, sendo uma de navegação e outra para o conteúdo principal e um rodapé.
Atenção: a quantidade de letras repetidas não tem qualquer relação com a largura das áreas. Adiante veremos como definir as larguras.

No diagrama anterior, para definir um espaçamento entre as duas colunas (bc) teríamos o seguinte diagrama:

  aaa
  b.c
  ddd

Espaçamentos são representados por pontos(.). Assim inserimos um ponto entre as letras que representam as duas colunas e está feito!
Notar que inserimos mais uma letra na área do topo (aaa) e mais uma na área do rodapé (ddd). E você aprendeu mais uma sobre o diagrama: todas as linhas tem que ter o mesmo número de caracteres (letras e/ou pontos).

Você já está em condições de construir o diagrama para um layout de três colunas com topo, navegação horizontal, colunas para navegação vertical, conteúdo principal, propaganda e um rodapé.
Tente e depois confira com o exemplo que eu desenvolvi adiante.

Regras gerais

Como você pode observar, um diagrama para layout é uma representação gráfica não só do layout em si como também do posicionamento das áreas de conteúdos. Tomando como base o diagrama mostrado anteriormente é intuitivo raciocinarmos assim: o topo ocupa a posição a, a coluna de navegação a posição b, o conteúdo principal a posição c e o rodapé a posição d. E mais, existe um espaçamento entre as colunas b e c.

Boa! Vamos dizer isso em linguagem de folhas de estilo:

#topo { position: a; }
#navegacao { position: b; }
#principal { position: c; }
#rodape{ position: d; }

E, a grande notícia é: As regras CSS mostradas não são simulações. Elas são reais. É exatamente assim que se declara, escolhe-se uma letra e ela aparece nas CSS. Qualquer letra, maiúscula ou minúscula, não acentuada, é válida.
Parabéns! Você conheceu a primeira declaração CSS3 do módulo template layout.

E, agora mais uma ótima notícia. Observe as regras CSS a seguir.

body { 
  display: "aaa"
           "b.c"
           "ddd"; 
     }

Isto também não é simulação. É real e está dito o seguinte: o container do meu layout é o elmento body é ele tem a seguinte configuração: uma área superior (topo) seguida por duas áreas separadas (navegação e conteúdo) e seguidas por uma área (rodapé).

Combinando estas regras CSS com as de posicionamento mostradas anteriormente o layout está quase montado. Só falta definir dimensões. Parabéns! Você conheceu a segunda declaração CSS3 do módulo template layout.

Vamos às dimensões das colunas para você conhecer a terceira declaração CSS para módulo template layout. Observe a regra a seguir.

body { 
  display: "aaa"
           "b.c"
           "ddd"
           150px 2px 848px; 
     }

Ou, pode ser como mostrado a seguir, que não altera a sintaxe, e é melhor para visualizar:

body { 
  display:  "a      a      a"
            "b      .      c"
            "d      d      d"
           150px   2px   848px; 
     }

Você, com certeza já concluiu: o layout tem uma coluna de navegação com 150px de largura e uma coluna de conteúdo com 848px de largura separadas por 2px. Trata-se de um layout fixo com largura total de 1000px, ideal para resoluções de 1024px.

Se você quiser dar um espaçamento de 2px entre o topo e as duas colunas seguintes faça assim.

body { 
  display:  "a      a     a"
            ".      .     ." /2px
            "b      .     c"
            "d      d     d"
           150px   2px   848px; 
     }

E você aprendeu sua quarta declaração CSS para módulo template layout.

Layout elástico? Use a propriedade minmax para definir as dimensão mínima e máxima da coluna. Mostrarei esta propriedade adiante.

O pseudo-elemento ::slot()

Slot define a área total do conteúdo. Cada letra do layout é um slot.

Quando definimos a cor de fundo de duas colunas adjacentes a respectiva cor vai sendo revelada à medida que a coluna cresce dependendo assim da quantidade de conteúdo que nela se insere. Se as cores são diferentes e os conteúdos também você vai estar de frente com aquele conhecido problema de uma coluna que se estende até o rodapé estar toda colorida e a outra que parou lá em cima não ter sua cor estendida igualmente.
É o conhecido problema das "colunas falsas" que se resolve com inserção de imagem.

O pseudo-elemento ::slot() acabou com este incômodo problema. Slot contém toda a área do layout independente da quantidade de conteúdo nela. Assim:

body::slot(b) { background: #ffc; }
body::slot(c) { background: #eee; }

Resolvido! Coluna de navegação amarelo claro e principal cinza claro, até o rodapé. Mesmo que estejam vazias!!!

Mais uma ótima notícia: A propriedade CSS vertical-align funciona legal no slot.

Tem muito mais, porém vou ficando por aqui. Vamos a um exemplo funcionando.

Exemplo demonstrativo

Como dissemos no início vamos precisar do plugin JQuery e é claro, da biblioteca jQuery também. Supondo que você já fez download dos dois, inclua na seção head da página o seguinte.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script src="jquery.tpl_layout1.1.1.js" type="text/javascript"></script>
<script type="text/javascript"> 
  $(document).ready(function(){
    $.setTemplateLayout(); // função do plugin que faz a mágica.
  })
</script>

Nota: O plugin contém várias funcionalidades. Vou usar somente a função básica. Para mais informações consulte a documentação do plugin.

Nossa proposta é a de construir um layout de três colunas com topo, navegação horizontal e rodapé. Para fins didáticos acrescentamos espaçamentos do topo e rodapé para as colunas e entre colunas.
Para facilitar o entendimeto construi uma figura nela aplicando o que estudamos até aqui.

Da figura é fácil retirar o seguinte diagrama do layout.

  .aaaaa.
  . . . . . . .
  .bbbbb.
  .c.d.e.
  . . . . . . .
  .f f f f f.

Antes de continuar dê uma olhada no layout on-line.

A parte relevante da marcação HTML é mostrada a seguir.

<body>
<div id="tudo">
<div id="topo">
	<h1>Topo</h1>
</div>
	
<div id="principal">
	<h2>Conteúdo Principal</h2>
<p>Lorem ipsum ...</p>
</div>

	<ul id="nav-hor">
		<li><a href="#">Home</a></li>
		<li><a href="#">Quem somos</a></li>
		<li><a href="#">Portfólio</a></li>
		<li><a href="#">Contato</a></li>
	</ul>

<div id="navegacao">
	<h3>Navegação</h3>
	<ul>
		<li><a href="#">Link A</a></li>
		<li><a href="#">Link B</a></li>
		<li><a href="#">Link C</a></li>
		<li><a href="#">Link D</a></li>
		<li><a href="#">Link E</a></li>
		<li><a href="#">Link F</a></li>
	</ul>
</div>

<div id="auxiliar">
	<h3>Parceiros</h3>
	<p>Parceiro 1</p>
	<p>Parceiro 2</p>
	<p>Parceiro 3</p>
	<p>Parceiro 4</p>
	<p>Parceiro 5</p>
</div>

<div id="rodape">
	<p>Rodapé</p>
</div>

</div> 
</body>
</html>

As regras CSS relevantes são.

body { 
	margin: 0;
	padding: 0;
	width: 100%;
	font: 62.5%/160% sans-serif;
	        display:   ".aaaaa."
                 "......." /0.5em
                 ".bbbbb."
                 ".c.d.e."
                 "......." /0.5em
                 ".fffff." 
    * 18em .2em minmax(420px,660px) .2em 16em *; 
	background: #f1e3b9;   
	}
/* Notar: 
1-) Os espaçamentos nas extremidades foram definidos com largura asterísco (*)
isto é elásticos. Consequência: o layout é centrado na página. Não precisa margin: 0 auto; 
2-) A coluna principal é elástica e vai de mínimo 420px a máximo 660px. Propriedade minmax */

#principal { 
	position: d; 
	text-align:justify;
	padding: 0 1.5em;
	font-size: 1.2em;
	}
#nav-hor { 
	position: b; 
	background:  #4690da;
	margin: 0;
	padding: .5em;
	}
#navegacao {
	position: c; 
	padding: 0 10px;
	}
#auxiliar {
	position: e; 
	padding: 0 10px;
	}
#rodape { 
	position: f;  
	text-align: center;
	font-size: 1.1em;
	}
body::slot(c)  {  
	background: #e8f1fa; 
}
body::slot(d) {
	background: #fff; 
	}
body::slot(e) {
	background: #e8f1fa;
	}

Para mais detalhes consulte o código fonte da página demonstração on-line.

Importante: A ordem em que os elementos aparecem na marcação HTML não tem qualquer influência sobre o layout. Você pode colocar o conteúdo principal, sempre, no início da marcação.

Empolgado?

Quer montar um layout complicado usando o Módulo Template Layout das CSS3? Vá em frente pois mesmo com JavaScript desabilitado nenhum conteúdo se perde.