Economizando código no CSS: Propriedade Font
Pouca gente sabe sobre a possibilidade de usar abreviação no CSS e que existe um padrão para isso. Isso pode facilitar muito o trabalho e trazer muitos ganhos com otimização de código.
Assumindo a grande importí¢ncia da economia de código na elaboração do CSS decidi fazer uma série de posts sobre o assunto e começarei falando sobre a propriedade Font.
Mãos í obra.
O primeiro passo é definir um estilo qualquer de texto:
p { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 1em; line-height: 1.3em; font-family: "Trebuchet MS"; }
Foram 6 linhas e 132 caracteres. Vamos aprender a resolver isso usando apenas uma propriedade e uma linha. Para isso precisamos saber como funciona a abreviação da propriedade font e a ordem em que os atributos devem ser preenchidos.
p { font: font-style font-variant font-weight font-size/line-height font-family; }
Veja na prática como ficaria nosso exemplo.
p { font: italic small-caps bold 1em/1.3em "Trebuchet MS"; }
Conseguimos reduzir o código para 1 linha e 54 caracteres. Você ainda pode omitir o que não deseja alterar e fazer uma linha de código mais simples ainda.
Simplificando.
p { font: bold 0.9em/1em "Trebuchet MS"; }
Ou quem sabe definir apenas font-size e font-family
p { font: 1.5em Arial; }
Gabi
Quem quiser saber mais sobre CSS tem um site excelente e todo em português: http://www.maujor.com
k00dez
Show de bola. Tem mais alguns artigos sobre economia de código?