CSS 3 - Columns | Boas práticas de Desenvolvimento com Padrões Web

Com o controle de colunas no CSS, podemos definir colunas de texto de forma automática. Até hoje não havia maneira de fazer isso de maneira inteligente com CSS e o grupo de propriedades columns pode fazer isso de maneira livre de gambiarras.

column-count

A propriedade column-count define a quantidade de colunas terá o bloco de textos.

1
2
3

 /* Define a quantidade de colunas, a largura é definida uniformimente. */
-moz-column-count: 2;
-webkit-column-count: 2;

column-width

Com a propriedade column-width definimos a largura destas colunas.

1
2
3

/* Define qual a largura mínima para as colunas. Se as colunas forem expremidas, fazendo com que a largura delas fique menor que este valor, elas se transformam em 1 coluna automaticamente */
-moz-column-width: 400px; 
-webkit-column-width: 400px;

Fiz alguns testes aqui e há uma diferença entre o Firefox 3.5 e o Safari 4 (Public Beta).
O column-width define a largura mínima das colunas. Na documentação do W3C é a seguinte: imagine que você tenha uma área disponível para as colunas de 100px. Ou seja, você tem um div com 100px de largura (width). E você define que as larguras destas colunas (column-width) sejam de 45px. Logo, haverá 10px de sobra, e as colunas irão automaticamente ter 50px de largura, preenchendo este espaço disponível. É esse o comportamento que o Firefox adota.

Já no Safari, acontece o seguinte: se você define um column-width, as colunas obedecem esse valor e não preenchem o espaço disponível, como acontece na explicação do W3C e como acontece também no Firefox. Dessa forma faz mais sentido para mim.

Como a propriedade não está 100% aprovada ainda, há tempo para que isso seja modificado novamente. Talvez a mudança da nomenclatura da classe para column-min-width ou algo parecida venha a calhar, assim, ficamos com os dois resultados citados, que são bem úteis para nós de qualquer maneira.

column-gap

A propriedade column-gap cria um espaço entre as colunas, um gap.

1
2
3

 /* Define o espaço entre as colunas. */
-moz-column-gap: 50px;
-webkit-column-gap: 50px;

Veja um exemplo destas propriedades aqui..

Utilizamos aqui os prefixos -moz- e -webkit-, estas propriedades não funcionam oficialmente em nenhum browser. Mas já podem ser usados em browsers como Firefox e Safari. Fique à vontade para testar e comentar aqui os resultados!

15 Comentários

Kaleb Martins 13/07/2009 às 23:02

Bacana… Agora temos que nós livrar do IE6, tive 2 reuniões essa segunda e em ambas, os clientes usavam Ie6.

Ainda acho cedo utilizar tal tecnologia. Tanto para o CSS3 quanto para o HTML5.

Abraços Diego e Obrigado mais uma vez por compartilhar conhecimentos

Miguel Trindade Jr 13/07/2009 às 23:27

Show de bola Diegão…Valeuu

@Kaleb Martins
Sobre o IE6 vc tem razão. Mas, como em uma matéria que eu li, cabe a nós, desenvolvedores, instruir nossos clientes / amigos a mudarem de browser.

Eu ja faço isso constantemente. Até minha mãe usa Firefox agora. E é o 3.5 hein

Abraços

Thiago Retondar 13/07/2009 às 23:32

Muito bom! CSS3 está aí para deixar o nosso código mais lindo! Isso que eu gosto!

Parabéns ao tutorial.

Abração, Diego.

Alexandre Romero 13/07/2009 às 23:36

Rapaz, isso é sensacional. Pena que ainda é apenas experimental, mas um dia vai facilitar demais nosso trabalho.

Valmir Nascimento 14/07/2009 às 04:03

Muito bom.
Essa é uma daquelas propriedades que tem tudo pra ser top 10 na lista das mais práticas no CSS.
Com relação ao IE6, temos que massificar “camoanha” de erradicação desse navegador.

Leandro Grison 14/07/2009 às 08:38

Esta propriedade também funciona no Chrome!

Mas pelo cenário atual, realmente vamos demorar para utilizar CSS3. Mesmo o IE 8 não dá suporte a muita coisa.

Kaleb Martins 14/07/2009 às 08:53

@Miguel Trindade Jr, verdade… Estou sempre falando sobre Navegadores para meus clientes, até fiz um post no site da empresa sobre isso (http://www.boamidia.com/navegadores/), entretanto fica muito difícil quando uma pessoa está acostumada em um determinado navegador e não quer mudar de jeito nenhum. Mas vale a pena tentar, já alguns clientes me agradecem sobre tal dica e indicação sobre navegadores bons.

E só para curiosidade. Minha mãe usa o Chrome

Nil Tojal 14/07/2009 às 12:20

e eu fiz a burrada de testar no ie8, lógico que num virou nada.

Frank Sousa 15/07/2009 às 10:38

olá pessoal,

CSS é d+, amo essa tecnologia, e esse novo esquema ai vai ajudar muito.

Quero aproveitar para perguntar aos amigos se não sabem de alguma vaga ou se tem vaga onde vcs trabalham.. Estou sem emprego e preciso muito trabalhar. Que Deus os abençoe.

Acelio F 15/07/2009 às 14:15

Muito bom mesmo.
Um sonho muito antigo que irá ser finalmente implantado.

As notícias sobre estas novas implementações voltadas ao design, a gente lê faz anos, mas ver funcionando, só agora.

Uma sugestão para utilizar isso é não utilizar isto até que seja suportado por todos os motores.

Assim como a questão das fontes @font-face. Instalar uma fonte, sem saber de onde o arquivo vem, só pra ver o conteúdo do site como o desenvolvedor gostaria que ele fosse visto. Envolve também a fonte ser free ou não…

Mas há usuários e usuários. Aqueles que navegam por diversão. A estes sim. Vamos apresentar e usar tudo que é novidade, eles vão agradecer pela experiência prazerosa que iremos lhe proporcionar e às indicações de qual navegador e versão eles devem usar.