Porque eu não vou me calar sobre o CSS3, desta vez eu decidi mostrar um pouco do módulo de layout de várias colunas. Este módulo permite que você layout o conteúdo de um elemento em várias colunas, como o fluxo de texto em um layout de tipo jornal..

Módulos CSS

Apenas para garantir brevemente que todos entendam o que quero dizer com "módulos", o desenvolvimento do CSS3 foi dividido em diferentes módulos. Por exemplo, existe uma Módulo de seletores, um Módulo Valores e Unidades, um Módulo de Fundos e Fronteiras, etc.

Alguns desses módulos estão em um estágio de desenvolvimento mais avançado e mais próximos de serem finais do que outros. Você pode dar uma olhada no Tabela de trabalho atual aqui.

Suporte do navegador

Vamos fazer isso direto imediatamente: apenas Safari e Firefox estão atualmente a suportar (alguns) recursos deste módulo, nomeadamente as propriedades column-count, column-width, column-gap e column-rule. Outros navegadores renderizam o conteúdo como se não houvesse colunas.

Há mais propriedades nas especificações (e o Safari suporta mais alguns), mas só vou mencionar estes neste artigo, para que possamos obter uma amostra do que está acontecendo.

Além disso, escolhi este módulo específico, porque é um dos poucos que é realmente no status "Last Call", então está mais perto de estar acabado do que outros.

A markup

Para este exemplo, peguei um texto do excelente Blind Text Generator e criou uma página básica com alguns divs e parágrafos.

Aqui está um exemplo de um dos divs:

O CSS

Eu apenas vou mostrar rapidamente o que cada uma das propriedades faz. Para usá-los, teremos que aplicar propriedades vendor-specific: para o Safari, as propriedades serão prefixadas com -webkit- e para o Firefox com -moz-. Irritante, mas nada que não estamos acostumados, certo?

Siga os exemplos abaixo nesta página.

column-width

O CSS para o nosso primeiro div será o seguinte:

Isso criará 200px column wide até a largura da página ser preenchida, no gap entre as colunas.

Cada coluna dentro do elemento é chamada de column box. Uma caixa de coluna não tem suas próprias propriedades, como fundo, preenchimento ou margens (pelo menos não por enquanto, mas isso pode mudar para futuras especificações). Além disso, todas as colunas dentro de uma linha têm a mesma largura e a mesma altura.

A column-width propriedade é não definitivo - na verdade, é o tamanho ideal queremos que as colunas tenham, mas isso pode variar se o contêiner for mais amplo ou mais estreito do que seria necessário para ajustar essas medidas.

column-gap e column-rule

Agora vamos adicionar algum espaço entre as colunas e uma boa regra, devemos?

Neste exemplo, estamos definindo uma lacuna entre cada coluna de 20px e também adicionando uma regra entre cada uma delas.

A column-rule propriedade segue a sintaxe do border propriedade. Além disso, as regras da coluna não ocupam nenhum espaço - se forem maiores do que a diferença da coluna, elas (ou deveriam) se sobrepõem ao conteúdo.

As lacunas das colunas e as regras das colunas são iguais em uma linha.

Ignore os blocos coloridos neste exemplo por enquanto, eu explico aqueles abaixo.

column-count

Em nosso terceiro exemplo, especificaremos quantas colunas realmente queremos que o elemento tenha:

Se ambos column-width e column-count são especificados (como neste exemplo), o column-count valor será considerado como o número máximo de colunas. Então, se apenas 3 colunas caberem no elemento, mas você configurou para ter 4, apenas 3 serão criados.

Se você não especificar a largura das colunas, o column-width será calculado automaticamente de acordo com o número de colunas que você especificou.

Imagens, etc.

Você pode ter elementos, como imagens, ao longo do texto, e até mesmo flutuar ou fazer uma porcentagem de largura. Essa porcentagem será calculada de acordo com a largura da caixa de coluna em que estão.

Para testar essa teoria, adicionei 3 cores divs para o segundo exemplo (#test2), com alguma codificação inline (oh, o horror!). O primeiro, vermelho, div é flutuado, mas tem uma largura de 140%; o segundo, verde, div não é flutuado e também possui 140% de largura; e o terceiro, amarelo, div é flutuado, mas tem 100% de largura .

De acordo com a especificação W3C, isso é o que deveria acontecer:

O conteúdo no fluxo normal que se estende em espaços de coluna (por exemplo, palavras longas) é cortado no meio do espaço da coluna.

Os flutuadores que são mais largos do que a caixa da coluna invadem as colunas vizinhas.

Corrija-me se eu estiver errado, mas pelo que vejo nesses exemplos, o Firefox está transbordando ambos 140% divs, mesmo que o segundo seja não flutuou. Safari não faz melhor: está transbordando nem deles.

Coisas mais transbordadas

Como último exemplo, estou criando uma div com uma largura menor e uma altura definida. Estou fazendo o estouro visível, e vejo o que acontece ...

De acordo com as especificações, isso é o que deveria acontecer:

Um elemento de várias colunas pode ter mais colunas do que tem espaço devido a:

• Altura de coluna restrita. […]

Em mídia contínua, as colunas que não se encaixam no elemento multicol são adicionadas na direção em linha.

Na linguagem humana, isso significa que se o conteúdo deve ser superado, então deve ser para os lados. Nesse caso, o Safari parece estar correto, enquanto o Firefox transborda o conteúdo verticalmente se a altura estiver definida através do max-height propriedade, mas corretamente, se através do normal height propriedade. Dê uma olhada no último bloco no página de exemplo (com a borda vermelha).

Palavras finais

E é isso! Eu só queria lembrar-te de este maravilhoso recurso CSS3 que pode tornar nossas vidas muito mais fáceis - e isso se degrada muito bem para navegadores que não o suportam.

Eu continuo procurando por exemplos do layout de várias colunas na natureza, mas não acho que muitas pessoas estejam usando agora. Para o que vale a pena, estou usando isso no meu site pessoal, yaili.com, e também está em uso no tweetCC website.

Você conhece mais sites usando?