Declarações abreviadas em CSS

Artigo criado por Cadu Carvalho    10 Comentários Tweet

No artigo passado sobre CSS, procurei não dar tanto enfoque a este tema porque, enquanto escrevia, vi que isso seria extenso demais para um capítulo, mas caberia perfeitamente num novo post. Como falamos de declarações abreviadas, tentarei abreviar a explicação também: algumas propriedades permitem que mais de um atributo seja descrito, poupando linhas de código da folha de estilo.

Margin e padding

Margin e padding são duas propriedades muito utilizadas para dimensionar e posicionar elementos. Enquanto margin permite estabelecer uma margem de um elemento para os demais, padding estende a área de um elemento. É comum ver um elemento ser descrito da seguinte maneira:

#menu {
    width: 500px;
    height: 30px;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 12px;
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

Para que fossem atribuídas todas as características que queríamos, foram necessárias 12 linhas. No entanto, há regras para abreviação de margin e padding que permitem que todos sejam descritos na mesma linha: uma delas é que cada dimensão pode ser descrita seguindo o sentido horário, começando pelo topo.

#menu {
    width: 500px;
    height: 30px;
    padding: 2px 8px 12px 8px; /* top right bottom left */
    margin: 10px 5px 10px 5px; /* top right bottom left */
}

Agora, precisamos apenas de metade das linhas que demandávamos anteriormente. Essa é a regra mais básica, mas podemos encurtar nossas declarações ainda mais. Reparem que minha divisóra (div) #menu tem paddings laterais iguais, de 8px cada; quando temos este caso, podemos utilizar a sequência top sides bottom, de cima para baixo.

Nossa divisória #menu possui margens iguais entre top/bottom e left/right. Neste caso, podemos utilizar a sequência de margens verticais (top e bottom) e horizontais (left e right).

#menu {
    width: 500px;
    height: 30px;
    padding: 2px 8px 12px; /* top sides bottom */
    margin: 10px 5px; /* vertical horizontal */
}

Uma última e mais simples regra: se os 4 lados tiverem valores, basta declarar a propriedade e um valor. A declaração margin: 4px; fará com que o elemento tenha margens de 4px nos quatro lados.

Border

A propriedade border é uma das mais requisitadas para fins estéticos, e possui também várias declarações menores. Os três atributos de uma borda são: espessura, estilo de traçado e cor. Imagine isto para os 4 lados de um elemento:

#menu {
   width: 500px;
   height: 30px;
   padding: 2px 8px 12px;
   margin: 10px 5px;
   border-top-color: #DDD;
   border-top-style: solid;
   border-top-width: 1px;
   border-left-color: #DDD;
   border-left-style: solid;
   border-left-width: 1px;
   border-right-color: #DDD;
   border-right-style: solid;
   border-right-width: 1px;
   border-bottom-color: #DBA;
   border-bottom-style: solid;
   border-top-width: 2px;
}

Agora temos 18 linhas só para a divisória #menu, contando com as que já encurtamos. Há uma regra para a propriedade border que diz que, para declararmos todas as propriedades de uma borda, basta escrever, em ordem, sua espessura (width), seu estilo e sua cor.

#menu {
    width: 500px;
    height: 30px;
    padding: 2px 8px 12px;
    margin: 10px 5px;
    border: 1px solid #DDD; /* espessura estilo cor */
}

Mas quem reparou bem, viu que a borda inferior era diferente das demais. Até o momento, as 4 bordas estão declaradas com as mesmas características, mas podemos sobrescrever as características da borda inferior:

#menu {
    width: 500px;
    height: 30px;
    padding: 2px 8px 12px;
    margin: 10px 5px;
    border: 1px solid #DDD; /* espessura estilo cor */
    border-bottom: 2px solid #DBA; /* espessura estilo cor */
}

Para estes casos, vale o aviso: caso seja necessário sobrescrever alguma propriedade, faça por último, após as declarações gerais.

Background

A propriedade background também permite encurtamentos muito úteis. Como os outros casos, vamos começar pelas declarações completas:

#menu {
    width: 500px;
    height: 30px;
    padding: 2px 8px 12px;
    margin: 10px 5px;
    border: 1px solid #DDD;
    border-bottom: 2px solid #DBA;
    background-image: url(../images/texture.gif);
    background-attachment: fixed;
    background-position: center top;
    background-repeat: repeat-x;
    background-color: #FED;
}

Há uma regra que permite a abreviação da propriedade background de cinco linhas para apenas uma; basta escrevermos cada atributo na sequência: cor, imagem, repetição, fixação, posição x e posição y.

#menu {
    width: 500px;
    height: 30px;
    padding: 2px 8px 12px;
    margin: 10px 5px;
    border: 1px solid #DDD;
    border-bottom: 2px solid #DBA;
    background: #FED url(../images/texture.gif) repeat-x fixed center top; /* cor imagem repetição fixação posição-x posição-y */
}

Um lembrete: cada atributo de background é opcional, podendo ser omitido em favor de um atributo padrão ou herdado de um elemento-pai.

Font

Saindo da nossa divisória, vamos tratar de um parágrafo de classe alerta presente na página, cujo qual queremos definir seus atributos tipográficos.

p.alerta {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    font-variant: small-caps;
    font-style: italic;
    line-height: 24px;
    color: red;
}

A sequência para encurtamento da propriedade font é: estilo (normal ou italic), variante (normal ou small-caps), peso (normal, bold, light), corpo de texto / entrelinha e nome das famílias tipográficas. A propriedade color, apesar de referir-se à cor do texto, não faz parte da abreviação.

p.alerta {
    font: italic small-caps bold 12px/24px Helvetica, Arial, sans-serif;
    color: red;
}

Lembrete: assim como no background, cada atributo é opcional, podendo ser omitido em favor de um atributo padrão ou herdado de um elemento-pai.

List-style

Fechando nossa lista de propriedades abreviáveis, temos a list-style, que define como uma lista (ordenada ou não) deve ser exibida. Vamos propôr uma lista com os últimos tweets de uma pessoa: será uma lista não-ordenada de classe tweets com um marcador que vem de uma imagem customizada. Nossa lista seria declarada assim:

ul.tweets {
    list-style-position: outside;
    list-style-image: url(../images/bullet.gif);
    list-style-type: cirle; /* para o caso da imagem não ser carregada */
}

A sequência para encurtamento da propriedade list-style é: tipo (desenho de marcador ou sistema de numeração), posição e imagem.

ul.tweets { list-style: circle outside url(../images/bullet.gif); }

One more thing…

Falamos bastante sobre como encurtar as declarações de cada propriedade, mas é importante deixar claro que o uso delas não deve ser totalmente substitutivo às declarações tradicionais. Estas serão mais efetivas para sobrescrever alguma propriedade, quando necessário, já que só mudarão o que for realmente necessário. Vamos comparar nossa folha de estilos por extenso e nossa folha de estilos resumida. Veja como fica sem abreviação:

#menu {
    width: 500px;
    height: 30px;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 12px;
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    border-top-color: #DDD;
    border-top-style: solid;
    border-top-width: 1px;
    border-left-color: #DDD;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: #DDD;
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: #DBA;
    border-bottom-style: solid;
    border-top-width: 2px;
    background-image: url(../images/texture.gif);
    background-attachment: fixed;
    background-position: center top;
    background-repeat: repeat-x;
    background-color: #FED;
}
p.alerta {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    font-variant: small-caps;
    font-style: italic;
    line-height: 24px;
    color: red;
}
ul.tweets {
    list-style-position: outside;
    list-style-image: url(../images/bullet.gif);
    list-style-type: cirle;
}

Compare com nosso CSS com declarações abreviadas:

#menu {
    width: 500px;
    height: 30px;
    padding: 2px 8px 12px;
    margin: 10px 5px;
    border: 1px solid #DDD;
    border-bottom: 2px solid #DBA;
    background: #FED url(../images/texture.gif) repeat-x fixed center top;
}
p.alerta {
    font: italic small-caps bold 12px/24px Helvetica, Arial, sans-serif;
    color: red;
}
ul.tweets { list-style: circle outside url(../images/bullet.gif); }

Como vocês podem ver, é um código mais enxuto, mas que demanda prática para entender toda a sintaxe necessária para cada abreviação, e qual será o efeito. O objetivo deste post é encurtar o caminho de um CSS mais detalhado para um CSS mais curto, mas que não deixe de ser compreendido por isso.

Fechando o post: se você tiver mais alguma dica, use nosso espaço para comentários!