Colunas CSS3

Introdução

Pessoas têm problemas lendo textos se as linhas são longas; se as linhas são longas para os olhos moverem-se do fim para o começo de outra linha, elas perdem a linha em que estão. Por essa razão, faça o máximo para usar uma tela grande, os autores deveriam ter larguras limitadas de colunas para os textos colocados lado a lado, somente os jornais fazem isso. Infelizmente isso é impossível de fazer com o CSS e o HTML sem forçar a quebra de colunas numa posição fixada, ou severamente restringido a margem permitida no texto, ou usando um script heróico.

A CSS3 draft sugere algumas novidades nas propriedades do CSS para suportar essa característica. No Firefox 1.5 e posteriores nós implementamos um subconjunto dessas propriedades para comportar-se como descrito no “draft” (com uma exceção explicada abaixo).

Robert O'Callahan's blog usa o CSS colunas, verifique isto no Firefox 1.5

Usando Colunas

Contagem de coluna e largura

Duas propriedades de CSS controlam se e quantas colunas aparecerão: -moz-column-count e -moz-column-width.

-moz-column-count define o número de colunas para um número em particular. por exemplo:

<div style="-moz-column-count:2">Em preparação para a liberação do Mozilla Firefox 1.5 Beta 1, os problemas serão resolvidos esta noite em
11:59P.M Horário de Greenwich (GMT -07:00). Depois deste ponto, não serão mais aceitados checkins para Firefox
1.5 Beta 1, que é posto para liberação na quinta-feira.</div>

irá mostrar o conteúdo em duas colunas (se estiver usando Firefox 1.5 ou mais atual):

-moz-column-width define a largura minima desejada da coluna. Se -moz-column-count também não é definido, então o navegador irá automaticamente fazer tantas colunas que couberem na largura disponível.

<div style="-moz-column-width:20em;">Em preparação para a liberação do Mozilla Firefox 1.5 Beta 1, os problemas serão resolvidos esta noite em
11:59P.M Horário de Greenwich (GMT -07:00). Depois deste ponto, não serão mais aceitados checkins para Firefox
1.5 Beta 1, que é posto para liberação na quinta-feira.</div>

Irá transformar-se em:

Exatamente os mesmos detalhes são descritos em The CSS3 draft.

Num bloco de multi-colunas, o conteúdo é automaticamente transferido de uma coluna para a outra como necessário. Todo HTML, CSS e Funcionalidades de DOM são suportadas dentro das colunas, como editando e imprimindo.

Balanceamento de Altura

O rascunho do CSS3 especifica que as alturas de colunas devem ser balanceadas: isto é, o navegador define automaticamente a altura máxima da coluna, então as alturas do conteúdo em cada coluna são aproximadamente iguais. O Firefox faz isto.

Contudo, em algumas situações também é útil definir a altura máxima das colunas explicitamente, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. For example, articles at https://iht.com/ do this (using script). Therefore we extend the draft so that if the CSS height property is set on a multicolumn block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.

Lacunas em Colunas

Por padrão cada coluna é diretamente adjacente à próxima coluna. Isso normalmente não parece bom. Pode-se usar enchimento de CSS dentro das colunas para melhorar a situação, mas normalmente é mais fácil usar a propriedade de -moz-column-gap ao bloco multi-colunas:

<div style="-moz-column-width:20em; -moz-column-gap:2em;">Em preparação para a liberação do Mozilla Firefox 1.5 Beta 1, os problemas serão resolvidos esta noite em
11:59P.M Horário de Greenwich (GMT -07:00). Depois deste ponto, não serão mais aceitados checkins para Firefox
1.5 Beta 1, que é posto para liberação na quinta-feira.</div>

Tornando-se assim:

Graciosa Degradação

A propriedade "-moz-columm" somente será ignorada pelos navegadores que não tenham suporte a colunas. Por essa razão é relativamente fácil para criar um layout que aparecerá numa simples coluna naqueles navegadores e usará multiplas colunas no Firefox 1.5

Conclusão

CSS3 colunas é um novo layout primitivo que ajudará desenvolvedores da Web a fazer um melhor uso do real tamanho da tela do computador. Desenvolvedores poderão encontrar muitos usos para ele, especialmente com a caracteristica de altura automática.

Referências adicionais

Gecko 1.8 para Web Developers: Colunas