Atributos de atalho no CSS

Hoje vamos falar de um conceito extremamente simples de css mas que passa batido por algumas pessoas.  Um conceito que quando começar a ser aplicado dará ao seu código uma aparência muito mais profissional. Basicamente, trata-se de uma forma de dizer mais falando menos ou, se preferir, de codificar mais escrevendo menos. Vamos a ela.

Primeiro, considere o código abaixo:

p { font-size: 12px; font-family: Arial; font-weight: bold; line-height: 1.5em; font-style: italic; font-variant: small-caps; }

Note que este mesmo código pode ser escrito encapsulando todos os atributos em um único atributo 'font':

p {font: 1em/1.5em bold italic small-caps Arial;}

Sete linhas a menos! O atributo font é uma propriedade de atalho que permite que todos aqueles atributos sejam definidos de uma só vez. Se algum deles foi omitido então é assumido o seu valor padrão.

Outros exemplo interessante:

#box { background-color: transparent; background-image: url(imagem.png); background-repeat: no-repeat; background-attachment: scroll; background-position-y: 10px; background-position-x: 15px; }

Compare com:

#box { background:transparent url(imagem.png) no-repeat scroll 10px 15px; }

Muito melhor, não é? É claro que estes são exemplos extremos mas de linha em linha seu código pode ficar consideravelmente menor no final do projeto se você se lembrar desta dica que é fácil, mas bastante poderosa.