Combinar atributos no CSS para reduzir o seu tamanho

Ontem escrevi sobre reduzir o tamanho dos ficheiros CSS, Javascript e HTML, mas ainda existem mais dicas que vou partilhar convosco para reduzir ainda mais o tamanho dos ficheiros CSS.

E é algo tão simples como combinar vários atributos num só utilizando os shorthands.

Código CSS

No post anterior já expliquei os benefícios de reduzir o tamanho de um ficheiro CSS, portanto vou directo ao assunto.

Margin e Padding
Porquê indicar o atributo margin e padding para cada um dos lados se podemos usar apenas um atributo para tudo? Fica aqui um exemplo para verificarem qual acham que é mais eficaz.

1
.class {margin-top:1px; margin-right:1px; margin-bottom:1px; margin-left:1px}

O exemplo em cima é comum em muitos sites e temas para gestores de conteúdos. Aquela linha de código ocupa 77 bytes. No seguinte exemplo usamos o shorthand, temos o mesmo efeito visual e usamos apenas 19 bytes. Aliás, bastam dois atributos de margin ou padding para compensar usar o shorthand, se for apenas um atributo não vale a pena usar o shorthand.

1
.class {margin:1px}

Parece que já vos estou a ouvir perguntar “Então e se quiser um valor diferente para cada lado?”. Vamos supor que queremos dar um padding de 10px no topo, 20px no fundo e 5px para cada lado.

1
.class {padding:10px 5px 20px 5px}

Simples, não? Os valores são indicados seguindo o movimento dos ponteiros do relógio, cima, direita, baixo, esquerda. Para aqueles que não se dão bem com ponteiros podem pensar na palavra TRouBLe e associar as consoantes aos respectivos valores. Top, Right, Bottom e Left.

Outra dica, se quisermos indicar um valor nulo não é necessário escrever 0px. Certo que em CSS temos sempre que indicar as unidades, mas 0 é 0, seja px, pt, em ou percentagem.

 

Border
O border também funciona tal como o margin e o padding se todos os lados tiverem a mesma dimensão. O shorthand indica primeiro as dimensões, o estilo e a cor.

1
.class {border:1px solid #000}

A diferença para o margin e o padding é que se quisermos por exemplo o border apenas no topo e no fundo temos que indicar explicitamente esses lados, como no exemplo que se segue.

1
.class {border:1px solid #000; border-left:0; border-right:0}

É verdade que neste último exemplo apenas reduzimos o tamanho do código em 3 bytes, mas cada byte conta para um site mais rápido.

 

Cores
Os códigos hexadecimais das cores também podem ser reduzidos para ocupar menos espaço. Aliás, já devem ter reparado que nos exemplos acima apenas usei o código #000 para indicar preto.

Vamos então ver um exemplo de um border a branco e a cor de texto laranja.

1
.class {border:1px solid #ffffff; color:#ff9900}

Podemos reduzir este código facilmente, uma vez que os valores para cada canal do RGB são iguais. Por exemplo, na cor #575757 não podemos usar um valor hexadecimal mais curto, já na cor #557700 podemos usar o código #570.

Assim o código de cima poderia ser optimizado da seguinte forma.

1
.class {border:1px solid #fff; color:#f90}

A cor vai ser exactamente igual, mas cada código hexadecimal vai usar metade do espaço.

 

Fontes
Indicar a fonte que um site usa ocupa bastante espaço num ficheiro CSS. Mas podemos combinar todos os elementos (ou apenas alguns) num só atributo: font. Segue o exemplo.

1
.class {font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:14px; font-family:Verdana, Arial, Helvetica, sans-serif}

Usando o shorthand podemos reduzir o código de 155 bytes para 85 bytes.

1
.class {font:italic small-caps bold 12px/48px Verdana, Arial, Helvetica, sans-serif}

Os vários atributos devem ser indicados por ordem, como no primeiro exemplo. Começamos com font-style e seguimos para font-variant, font-weight, font-size, line-height e finalmente font-family. Reparem que, para indicar o line-height é obrigatório indicar o font-size e estes valores devem ser separados por uma barra (/) entre eles. Tal como no exemplo, 12px/48px indica um tamanho de texto de 12px e um tamanho de linha de 48px.

Não é no entanto obrigatório indicar todos os valores. Vamos supor que queremos apenas o tamanho do texto a 12px com o tipo de letra Verdana.

1
.class {font:12px Verdana, Arial, Helvetica, sans-serif}

Os restantes valores serão usados por defeito ou serão aplicados valores de classes superiores.

 

Background
Tal como no font, o shorthand background permite poupar bastante espaço no ficheiro CSS. Vamos observar o seguinte exemplo:

1
.class {background-color:#fff; background-image:url(imagem.png); background-repeat:no-repeat; background-position:top; background-attachment:scroll}

Usando o shorthand podemos reduzir o código de 148 bytes para apenas 61 bytes.

1
.class {background:#fff url(imagem.png) no-repeat top scroll}

Tal como nas fontes, os vários atributos devem ser indicados por ordem. Primeiro o background-color e depois background-image, background-repeat background-position e background-attachment.

 

Espero que estes exemplos vos possam ser úteis e que os possam aplicar nos vossos projectos para reduzir o tamanho dos ficheiros CSS. Usar os shorthands no desenvolvimento de um projecto são uma boa prática para reduzir o tamanho do código CSS e tornar o seu carregamento mais rápido.

 
Copyright © 1985 - 2017 Eduardo Maio. Alguns direitos reservados.
eduardomaio.net - Às vezes mais valia ser Agricultor do que Programador
Ao navegar no blog eduardomaio.net está a concordar com os termos legais e de privacidade.