Tableless - Desenvolvimento inteligente com Padrões Web

13/07/2009
CSS

CSS 3 Columns

O CSS3 facilitará muitas coisas, uma das possibilidades é a criação automatica de colunas em blocos de textos. Para tanto, utilizamos as propriedades de columns do CSS3.

Por

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

1
columns

pode fazer isso de maneira livre de gambiarras.

column-count

A propriedade

1
column-count

define a quantidade de colunas terá o bloco de textos.

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

column-width

Com a propriedade

1
column-width

definimos a largura destas colunas.

/* 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

1
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 (

1
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

1
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

1
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

1
column-gap

cria um espaço entre as colunas, um gap.

 /* 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!

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • Kaleb Martins

    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

    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

  • http://twitter.com/thiagoretondar Thiago Retondar

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

    Parabéns ao tutorial.

    Abração, Diego.

  • http://www.twitter.com/aleromero Alexandre Romero

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

  • http://www.vndd.net Valmir Nascimento

    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

    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

    @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 ;-)

    Abraços

  • http://niltojal.com.br Nil Tojal

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

  • Frank Sousa

    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.

  • http://floripasom.com/video/ Acelio F

    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.

  • Alexandre P Lima

    Valeu pela ótima informação!
    Fiz testes com ambos os browsers e também achei o comportamento do safari mais coerente.

  • http://www.fgsolutions.com.br Gabriel Carlini Vieira

    Com certeza o CSS3 vai ajudar muito nossa vida e a documentação mais lógica e organizada. Valeu Diego.

    Abraços

  • juli_c

    nossa, muito legal! vai facilitar a vida super.. algum dia :)

  • Pingback: Clica Aqui » Digest – Referências de CSS

  • Leonardo rente

    Pena o IE ainda nao rodar essa maravilha… =/

    IE Sucks

  • Ricardo Verhaeg

    CSS3 vai facilitar muito a vida e nos tornar menos dependentes do javascript (não que não deva ser utilizado), mas enquanto o IE e alguns browsers não suportam todas essas maravilhas, eu utilizo um pouco de javascript para resolver =P

    Aproveitando: Diego e galera, podem falar de múltiplos backgrounds em CSS3? outra ótima novidade dele!!

  • http://tioni.net Tioni Oliv

    Parece utopia essa tal felicidade. Não vejo a luz do azulzinho (ie6) se apagando tão cedo mas… continuemos com os navegadores “poderosos” que usam os -moz e os -webkit p/ renderizar o css3.

  • Pingback: Feliz 2011 | Tableless - Desenvolvimento com Padrões Web