Eu acho Bruce Lee muito foda e inspirador, então viajei geral nesse post. Hoje vamos aprender o que as CSS Regions têm a ver com Bruce Lee. Isso mesmo! Esvazie sua mente, seja disforme, seja como a água.

Com as CSS Regions poderemos modificar o layout e o modo como o conteúdo flui em páginas web. Um ótimo caso de uso são os jornais e revistas, que geralmente utilizam layouts multi colunas com imagens, citações e por ai vai.

Construir um layout multi coluna apenas com o box model seria moleza. Algumas divs, alguns floats e pronto. Não é?

Não seja tosco

O problema não é construir o layout, o problema é fazer o conteúdo (texto e imagens) fluir corretamente por entre esses elementos de forma automática — caso contrário, se “cortarmos” o conteúdo em várias partes diferentes e separá-lo devidamente, ainda enfrentaremos uma série de problemas, pois, 1: os navegadores renderizam fontes de formas diferentes, então seu layout indubitavelmente quebrará em alguns navegadores; e 2: a manutenibilidade do seu código arderá no fogo do inferno, visto que, se algumas propriedades de aparência do texto mudarem (como tamanho de fonte, espaçamento de linha ou letra, etc.), você terá que fazer tudo novamente. Tosco.

Teste aqui

Para visualizar os experimento abaixo corretamente, você deve estar utilizando o navegador Google Chrome e é preciso habilitar uma flag dele primeiro. Na versão estável (atualmente 29) basta digitar chrome://flags na barra de endereços, e habilitar a opção Experimental WebKit features, como na imagem acima. Depois reinicie o navegador.

Agora, tente modificar o conteúdo do textarea abaixo e veja o que acontece ao conteúdo do jornal.

Definindo regiões

Em um jornal ou revista, é muito comum a utilização de um layout com várias colunas, como por exemplo o jornal do experimento acima.

Com uma rápida olhada, já podemos facilmente identificar várias áreas de conteúdo e entender qual o seu fluxo, ou seja, por onde você começa e termina sua leitura. Agora vamos considerar que o HTML da estrutura seja organizado da seguinte maneira:

<header>
    <h1 class="title">...</h1>
</header>

<section id="area-left">
    <div class="content">...</div>
</section>

<section id="area-center">
    <h2 class="subtitle">...</h2>
    <div class="content">...</div>
    <picture class="image">...</picture>
    <div class="content">...</div>
</section>

<section id="area-right">
    <time class="date">...</time>
    <div class="content">...</div>
</section>

Até agora temos apenas elementos estruturais que representam nossas áreas de conteúdo através da classe .content. Nada de novo por enquanto.

Be water, my friend

Como diria Bruce Lee:

Esvazie sua mente
Seja disforme
Sem contornos
Como água
Quando você coloca água em um copo, ela se torna o copo.
Você coloca água em uma garrafa, ela se torna a garrafa.
Você a coloca em uma chaleira, ela se torna a chaleira.
Seja água, meu amigo!

Se ligue bem nesse conceito, pois veremos que é exatamente sobre isso que se tratam as CSS Regions.

Named flows: a técnica do dragão

Um named flow é basicamente um identificador que definimos para se referir a um determinado conteúdo. Ele serve apenas para manipular este conteúdo. Para facilitar, pense como se ele fosse apenas uma variável que armazena todo este conteúdo numa grande string. Simples. Dessa maneira, podemos definir qualquer named flow para qualquer conteúdo que desejarmos.

Be formless, shapeless. Like water.

Hora de aplicar a técnica do mestre, que consiste em apenas 2 passos simples: Seja disforme e depois adeque-se ao que desejar.

flow-into (seja disforme)

Vamos começar transformando nosso conteúdo em algo disforme — como água. Para isso, ele não pode estar espalhado em diversos lugares, primeiramente precisamos juntar todo o fluxo de conteúdo em um só lugar, como por exemplo, em article.all-content:

<article class="all-content">Todos os lorem ipsum...</article>

Agora, podemos criar nosso named flow para o conteúdo de .all-content. Basta utilizarmos a propriedade flow-into:

.all-content {
    flow-into: bruce-lee-fodao;
}

Beleza, acabamos de mandar todo nosso conteúdo para um lugar imaginário chamado de bruce-lee-fodao.

flow-from (adeque-se)

Tão simples como criar o named flow, é usá-lo. Nosso objetivo agora é fazer com que o conteúdo flua por todos elementos da classe .content.

When you put water in a bottle, it becomes the bottle.

Ou seja, agora vamos fazer nossa “água” virar o “copo”, a “garrafa”, ou qualquer outra coisa através da propriedade flow-from:

.content {
    flow-from: bruce-lee-fodao;
}

Agora o conteúdo de bruce-lee-fodao fluirá automaticamente através de todos os elementos .content da página. Fácil demais, hein?

E não é só isso…

A (futura) especificação das CSS Regions também compreende outras propriedades como break-before, break-after e break-inside, que tratam basicamente do comportamento da quebra do conteúdo quando acontecer as transições entre regiões. Para mais detalhes, leia o rascunho.

Como é de se esperar, o suporte é inversamente proporcional ao grau de felicidade proporcionada pela tecnologia. Espero que tenham gostado!