Construir layouts complexos e flexíveis nunca foi fácil, mas o CSS3 certamente tirou muitas dores de cabeça.
Recursos CSS3 como Flexbox e Colunas tornaram alguns layouts complexos uma possibilidade real e agora estão sendo unidos por uma das mais recentes adições à caixa de ferramentas do web designer: Regiões CSS.
As regiões CSS permitem que você transmita conteúdo para uma série de contêineres em uma única página. É o equivalente de vincular caixas de texto em um aplicativo como o InDesign. Isso possibilita alguns layouts que antes só eram possíveis ao desfocar a linha entre dados e estilos.
Como sempre, o suporte ao navegador está longe de ser perfeito.
Regiões CSS ainda é um rascunho, o que significa que é experimental. Inicialmente, o único navegador para realmente suportá-lo era o Internet Explorer 10 (não, não estou brincando); embora o IE10 use um iframe como fonte de conteúdo.
O Safari afirma oferecer suporte com um prefixo.
No Chrome, você pode testar o recurso abrindo o navegador, digitando 'about: flags' e ativando 'enable-experimental-webkit-features' e, em seguida, reiniciando o navegador.
Felizmente, há também um Polyfill de JavaScript criado pela Adobe que traz a funcionalidade de regiões CSS para navegadores que atualmente não suportam, você pode encontrar isso github.
Como o propósito das Regiões CSS é permitir que o texto flua em diferentes contêineres, a primeira coisa que você precisa é de algum texto:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus imperdiet purus ac eleifend. Vivamus posuere pellentesque nibh vel laoreet. Donec et sem odio. Donec sit amet lorem hendrerit, faucibus libero et, mattis lacus. Suspendisse dapibus rutrum felis quis interdum. Integer tincidunt, orci at condimentum placerat, est nulla sollicitudin velit, vitae gravida nisi odio ac ligula. Sed hendrerit ac massa vel ultricies. Vestibulum commodo, orci et tincidunt laoreet, enim tellus aliquet orci, quis dapibus sapien tellus eu felis. Etiam non arcu at eros luctus consectetur vitae eget nunc. In felis ipsum, vehicula ac mauris vel, porttitor gravida neque.Quisque orci turpis, aliquam vel tortor convallis, ullamcorper molestie nisl. Sed aliquet dignissim lorem non fringilla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue erat ac hendrerit ullamcorper. Morbi facilisis urna nunc, eget pretium lectus congue vitae.E então alguns contêineres:
Agora temos o conteúdo básico configurado, podemos vincular os contêineres usando flow-in e flow-from, você notará no exemplo que eu adicionei o prefixo -webkit- .
.text {-webkit-flow-into: text-flow;padding: 0;margin: 0;color: #F2F2F2;font-family: helvetica, arial;font-size: 16px;line-height: 22px;}.containers{-webkit-flow-from: text-flow;background: #333333;padding: 5px;margin-top: 100px;width: 200px;height: 300px;float: left;margin-right: 20px;}Se você verificar isso em um navegador, verá que o texto simplesmente fluirá de uma caixa para outra. Se você posicionar esses contêineres, o texto continuará a fluir corretamente.
-webkit-flow-into: text-flow;Esta propriedade aceita um identificador como o valor. Quando você passa um valor para essa propriedade, ele se torna parte de um fluxo nomeado e parará de renderizar como parte do fluxo da página. Você pode cancelar isso definindo a propriedade como none.
O nome do fluxo que você usa é arbitrário, apenas certifique-se de que você é consistente. Também podemos ter vários elementos com o mesmo fluxo nomeado, como no nosso exemplo acima.
Isso não se limita ao texto, também podemos fluir imagens, listas e muitos outros tipos de conteúdo HTML.
-webkit-flow-from: text-flow;Usamos essa propriedade para especificar quais elementos devem receber o fluxo especificado.
O valor é o nome do fluxo que especificamos para a propriedade de fluxo .
Lembre-se de que todos os estilos de conteúdo que você aplicar ao texto original serão mantidos em todo o fluxo. Portanto, se você colorir o texto em azul, ele permanecerá azul em todos os contêineres.
Para ver um exemplo de regiões CSS em ação, dê uma olhada esta caneta Eu criei.
O suporte do navegador para Regiões CSS está fraco atualmente, e ainda há um longo caminho a ser percorrido antes que possamos confiar nele diariamente. Mas, a flexibilidade que ela oferece é fantástica, e uma vez que o suporte completo esteja em vigor, acho que as Regiões CSS serão a técnica a ser usada nos próximos anos.
Você está animado por regiões CSS? Em quanto tempo você acha que poderemos usá-los? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem da cachoeira via cuatrok77.