As definições de classes para a quantidade de colunas que um elemento pode ocupar são as regras de largura que os seus elementos devem seguir. Neste exemplo, não podemos ter uma barra lateral que ocupe200pxou espaçar seções adjacentes em mais do que20px. Tais padrões de tamanho e espaçamento podem economizar muito trabalho na definição dos layouts e na escrita do seu CSS.
Antes de abraçar o uso de grids como uma solução perfeita para os seus proble- mas, não deixe se atentar a pontos importantes ao colocar a mão na massa: o seu grid que deve se adequar ao seu conteúdo, e não o contrário. E é muito fácil de se complicar definindo um número maior de colunas do que o necessário - um grid de 3 ou 5 colunas pode ser o suficiente para a maioria dos seus projetos.
6.8
Posicionando elementos com CSS 3
Existem diversas técnicas diferentes que podemos utilizar para diagramar e posi- cionar os elementos nos nossos projetos, mas nem todos os cenários e problemas possuem soluções simples e elegantes - é comum encontrar ajustes e correções feitas via JavaScript para problemas que deveriam ser solucionados com CSS.
Algumas adições do CSS3 permitem que problemas antigos sejam solucionados com códigos novos, o que é razão de festa para qualquer desenvolvedor.
Mas atenção, pois os módulos do CSS3 relacionados a posição e controle de conteúdo não estão tão maduros quanto as de propriedades comobox-shadowou
border-image, então é importante conferir a situação do suporte dos navegadores a essas novidades.
Distribuição de conteúdo em colunas
Distribuir um bloco de conteúdo - textos, links ou imagens - em diversas colunas ficou muito fácil. Em vez de dividir o conteúdo manualmente em elementos separa- dos e se preocupar com a largura e espaçamento entre eles você pode simplesmente deixar esta tarefa para o navegador, com a propriedadecolumn-count, onde você define a quantidade de colunas que o seu elemento terá, e fica a cargo do navegador distribuir o conteúdo e dimensionar cada uma, independente do tamanho do seu elemento.
Além disso, existem propriedades adicionais para definir novos detalhes do comportamento das suas colunas, comocolumn-gap(espaçamento entre colunas),
simples é dividir um pedaço de conteúdo entre colunas. <p>
Firefly é uma série de ficção científica criada pelo escritor/diretor Joss Whedon, criador de Buffy: A Caça Vampiros, Angel e Dollhouse, com sua companhia de produção Mutant Enemy Productions. Seu ambiente futurista naturalista, modelado a partir de temas dos filmes de Western tradicionais, apresenta um cenário de ficção científica atípico para a narrativa. Whedon também trabalhou como produtor executivo,
junto com Tim Minear.
</p>
E o CSS que utiliza as novas regras para colunas: p { column-count: 3; column-gap: 10px; column-rule: 1px solid #666; font-size: 0.9em; width: 500px; }
Figura 6.21: A divisão automática do conteúdo em colunas com CSS 3.
Elementos flexíveis
Um módulo bastante interessante do CSS3 é o CSS Flexible Box Layout Module, que introduz diversas propriedades novas para definir regras de posicionamento e alinhamento relativas, onde os elementos presentes em um containerflexserão or- ganizados automaticamente pelo navegador, de acordo com as definições feitas, sem a necessidade de se fixar tamanhos ou forçar alinhamentos comfloatouposition.
6.8. Posicionando elementos com CSS 3 Casa do Código
Tudo se baseia no novo valor da propriedadedisplay: flex. Com ele, a gama de propriedades doflexboxestarão disponíveis para os elementos contidos dentro deste container. Como, por exemplo, forçar uma orientação vertical ou horizontal, sem a necessidade de aplicar a propriedadefloatnos elementos. Ou, então, distri- buir a largura do elemento entre seus filhos, alterar a ordem de exibição ou forçar um espaçamento igual para todos.
Mas como nem tudo são flores, a especificação deste módulo sofreu uma rees- crita pesada e ainda está em constante atualização. A versão antiga da especificação foi implementada em diversos navegadores, mas o novo formato ainda não está ma- duro o suficiente para se utilizar em seus projetos. Mas eu sugiro que você fique de olho nas novidades relacionadas aoflexbox, já que logo mais ele poderá ser adotado em seus projetos.
Vamos dar uma olhada de perto no que é possível fazer com oflexbox: primeiro, vamos precisar de um container com 3 elementos, onde eles irão preencher toda a largura disponível igualmente:
<div class='flexbox'>
<span class='one box'>1</span> <span class='two box'>2</span> <span class='three box'>3</span> </div>
Esse container terá300pxde largura, então cada um dos elementos irá ocupar
100px.
.flexbox {
/*
De acordo com a nova especificação, o valor "flexbox" deverá ser substituído por apenas "flex".
*/ display: flexbox; height: 60px; width: 300px; } .box { color: #FFF; display: block; flex: auto; font-weight: bold;
line-height: 30px;
text-align: center; }
Para identificar melhor cada um dos elementos, vamos definir cores de fundo diferentes para cada um deles.
.one { background-color: #8820DD; } .two { background-color: #2BB15A; } .three { background-color: #755322; }
Figura 6.22: Três elementos flexíveis, distribuídos por 300px de largura.
Neste exemplo temos duas novidades: o valorflexbox(que será substituído por
flexno futuro), que marca o container como um elemento flexível, e a propriedade
flex, onde você pode definir diversos comportamentos diferentes para o elemento. Neste caso, o valorautodefine que ele irá ocupar o máximo de espaço possível, distribuindo os300pxentre cada um deles. Mas isto pode ser alcançado utilizando porcentagens na propriedadewidthe flutuando os elementos, certo?
É aqui que mora a diferença entre estes métodos. Como não estamos definindo larguras fixas para os elementos flexíveis, podemos adicionar mais conteúdo com a classe.boxque a largura dos elementos será ajustada pelo navegador - você não precisa pular no CSS e recalcular as larguras dos elementos.
<div class='flexbox'>
<span class='one box'>1</span> <span class='two box'>2</span> <span class='three box'>3</span> <span class='four box'>4</span> <span class='five box'>5</span> </div>
Não vamos deixar de lado as cores do quarto e quinto elemento:
.four { background-color: #02A3A3; } .five { background-color: #C6363D; }
6.8. Posicionando elementos com CSS 3 Casa do Código
Figura 6.23: Os cinco elementos ocupando os 300px do container.
Não ter que ajustar as larguras ou definir novas classes é grande vantagem - os elementos flexíveis podem ser criados dinamicamente, variando de 3 a 10, e a res- ponsabilidade de organizá-los e definir os seus tamanhos fica a cargo do navegador.
Melhorando os seus formulários
Formulários são um dos pontos mais críticos da maioria dos sites: além de serem a porta de entrada para seus usuários e clientes se comunicarem ou proverem in- formações para você, sempre estão relacionados a processos importantes para o seu negócio, seja finalizando a compra em um e-commerce, criando artigos para um por- tal ou enviando novas fotos para uma rede social. Por isso, devemos criar formulá- rios que não fiquem no caminho para atrapalhar nossos usuários em suas tarefas nos projetos que criamos.
7.1
O que temos no HTML 5
Uma das adições mais interessantes do HTML5 são os diversos campos novos para formulários e novos comportamentos para enriquecer a experiência disponível para os formulários. Novos tipos de campos, comoemail,searcherange e atributos comoplaceholder,patternerequireddizem mais sobre que tipo de informações nossos formulários precisam e reduz a necessidade de usarmos plugins em JavaScript para auxiliar a formatação dos elementos.