Multi Colunas CSS3

Tradução do artigo no ALA 204 Introducing the CSS3 Multi-Column Module

Embora na maior parte dos casos os ecrãs de computador sejam mais largos do que altos, a maior parte dos websites são exactamente ao contrário: mais compridos do que largos. Na economia do espaço do ecrã, o espaço vertical é caro. Se fosse um componente de conteúdo, gostaria que fosse colocado na parte de cima do ecrã (antes da dobra), não é? por outro lado o espaço horizontal é bastante mais barato, por vezes nem sabemos o que fazer com ele.

Na resolução de ecrã agora mais comum 1024×768, a generalidade dos websites de arranjo fixo não usam a totalidade do espaço disponível à esquerda ou direita do conteúdo. Os arranjos flexíveis tiram melhor partido do espaço horizontal mas lutam para manter os comprimentos de linha utilizáveis. Os perítos em utilidade dizem-nos que há tantas palavras que devamos colocar numa linha. Entre 8 e 12 palavras parece ser o comprimento ideak para uma linha. Os media impressos, em especial os jornais não hexitam usar linhas ainda mais pequenas. Porquê? Porque podem, ao fazerem um arranjo com várias colunas de texto.

Como web designer, você pode arrumar um texto de forma a que flua para várias colunas bem equilibradas. Ou pelo menos pode tentar. Mas como sabe a web não é um meio que lhe dê controlo absoluto sobre a apresentação final da informação. A sua marcação feita cuidadosamente à mão poderá surgir muito má se os seus visitantes por exemplo, usarem um tamanho de letra diferente ou desligarem as imagens. Igualmente quando muda de páginas estáticas em HTML para conteúdo gerido por base de dados, perde algumas poucas capacidades que tinha de estruturar o seu texto. A sua marcação necessita acomudar conteúdo de tamanho desconhecido.

Claro que este problema não é novo. Muitas pessoas já pensaram sobre este problema incluindo os membros do W3C.

O módulo multi-colunas CSS3

O módulo multi-colunas CSS3 é um documento de trabalho de nível três de CSS proposto pelo W3C para amplicar o actual modelo de caixas CSS . O objectivo do módulo é permitir que o conteúdo flua para várias colunas dentro de um elemento. Dá novas propriedades CSS que permitem aos designers especificar quantas colunas um elemento pode reproduzir. O navegador trata de formatar o texto de forma a que as colunas fiquem equilibradas.

As novas propriedades propostas CSS são:

• ‘column-count’, para determinar o número de colunas para o qual o conteúdo do elemento irá fluir.
• ‘column-width’, para descrever a largura óptima de cada coluna.
• ‘column-gap’, para indicar uma separação entre as colunas.
• ‘column-rule’, para definir limites entre colunas.

Pode aprender mais sobre estas e mais algumas novas propriedades em W3C working draft.

Implementações de multi-colunas

Embora o documento de trabalho tenha sido publicado em 2001, ainda está longe de ser uma recomendação final, e claro ainda menos ter sido implementado, ou não?

Implementações no navegador

Os programadores que trabalham no Gecko 1.8 (Mozilla & Co.) anunciaram a primeira implementação nativa do módulo em Abril deste ano, e a versão Firefox 1.5 beta (basiada no Gecko 1.8) de facto suporta parte do módulo multi-colunas da CSS3 .

Esperemos que mais navegadores se sigam.

Implementações por Scripting

Outros programadores da web engenhosos silenciosamente foram contornando os limites do modelo de caixa da CSS já há algum tempo. O International Herald Tribune, por exemplo, usa um arranjo multi-colunas usando JavaScript nas suas notícias. Michael van Ouwerkerk, em 2002, escreveu um "programa" em JavaScript que reparte o conteúdo de um elemento e o rearranja em várias colunas. (não haja dúvidas que há mais exemplos similares.)

Uma pessoa pode certamente fazer coisas espantosas com JavaScript (e o modelo de objecto do documento [DOM]), e refazer marcação para alcançar um arranjo multi-colunar é uma delas.

Com isto em pensamento foque essas novas propriedades CSS3 da especificação W3C:

• Column-count: É o número de vezes que um JavaScript necessita repartir o conteúdo em elementos que flutuem para a esquerda.
• Column-width: É a largura de cada novo elemento criado.
• Column-gap: É a separação à esquerda (ou à direita) desses elementos.
• Column-rule: É o limite esquerdo (ou direito).

Visto tal JavaScript processar a página após esta ser reproduzida, cada factor, que costumava ser um problema, tamanho dos tipos, imagens ligadas ou desligadas, é levado em conta. Também se o JavaScript não estiver disponível o arranjo não será alterado, (por outras palavras a degradação será agradável).

Uma medida experimental interina

Visto poder ser feito, e que não teria escrito este artigo se não tivesse nada para mostrar eis uma implementação JavaScript, que pode ser usada em vários navegadores, do módulo multi-colunas CSS3 . (Ver exemplo.)

A implementação é uma implementação não é obstrutiva, constituída por uma peça de código separada que funciona como parser em JavaScript para esta extensão CSS3. Não necessita de nenhum conhecimento de JavaScript para a usar basta carregar o ficheiro no seu site e ligá-lo à sua página:

<script type="text/JavaScript" src="css3-multi-column.js"></script>

Pode começar a usar as propriedades CSS3 nas suas folhas de estilo tal como faz com qualquer outro CSS.

Precauções

Há algumas limitações que deve compreender. Primeiro um parser CSS baseado no navegador está concebido para ignorar propriedades que não suporte. Para previnir tal, esta implementação depende de um parser simples escrito em JavaScript. Este parser não é capaz de tratar coisas complesas, tais como regras em cascata que cruzem diferentes selectores. Mantenha as coisas simples. Por exemplo os estilos que se seguem são aceitáveis:

.article {
  column-count: 2;
  column-gap: 20px;
}

Em segundo lugar o JavaScript corta e cola conteúdo de uma coluna na outra. Há um certo número de elementos que naturalmente não podem nem devem ser divididos: imagens por exemplo e também tabelas, cabeçalhos, etc. O algoritmo tenta acomodar estes conteúdos mas pode quebrar e trazer resultados inesperados em algumas circunstâncias. São bem vindas notas sobre qualquer problema de reprodução de arranjo e tentarei melhorar à medida que formos andando.

Navegadores

O script foi testado em IE6, Firefox 1.0.4, Netscape 7.1, Safari 1.2 e 2.0, e Opera 8 (embora o Opera tenha mostrado tendência para provocar problemas).