Usando CSS Shorthand Parte 1

He estado leyendo el libro Speed Up Your Site, el cual, como su título implica, trata sobre
optimización de websites. Hasta ahora ha sido una lectura muy interesante, ya llevo un poco menos de la mitad y me tope con un capítulo donde tratan sobre diferentes técnicas de optimización de CSS, entre ellas el CSS Shorthand.

Hay muchas técnicas, pero unas bien sencillas de implementar son las propiedades “shorthand”
(no tengo ni idea como traducir eso), en fin, basicamente se trata de una declaración abreviada.
La cual reduce en algunos bytes tu hoja de estilos, además de lucir un poco mas interesante.

Las propiedades que soportan shorthand son:

• font
• background
• margin
• padding
• border
• list-style

Veamos la definición de cada con su ejemplo respectivo:



font

Para usar shorthand debes definir la propiedad font de la siguiente forma
{font: weight style variant size/line-height font-name inherit}

Siempre se deben especificar en cualquier orden, pero son requeridos size y font-name en ese orden, todos los atributos deben separados por espacios en blanco. Veamos un ejemplo:

h1{

font-style: italic;

font-weight: bold;

font-size: 2em;

font-family: georgia, times, serif;

}

Luego de aplicar shorthand quedaria reducido a:

h1{ font: bold italic 2em georgia, times, serif; }

background

Para usar shorthand debes definir la propiedad background de la siguiente forma
{background: color image repeat attachment position inherit}

Pueden estar en cualquier orden y todos los atributos deben separados por espacios en blanco. Veamos un ejemplo:

div.header{

background-image: url(images/oranges.gif);

background-repeat: no-repeat;

background-color: dark-orange;

background-attachment: fixed;

background-position: top left;

}

Luego de aplicar shorthand quedaría reducido a:

div.header{ background: dark-orange url(images/oranges.gif) no-repeat fixed top left;}

margin, padding

Para usar shorthand debes definir las propiedades margin como padding de la siguiente manera
{margin: top right bottom left} o {padding: top right bottom left}

En este caso el orden debe respetarse, todos los atributos deben separados por espacios en blanco. Debe especificar al menos uno de los par´metros. Veamos un ejemplo, es válido tambien para padding:

div.content{

margin-top: 5px;

margin-bottom: 10px;

margin-left: 20px;

margin-right: 15px;

}

Luego de aplicar shorthand quedaría reducido a:

div.content{ margin: 5px 15px 10px 20px;}

Mañana continuamos con las propiedades faltantes, border y list-style, y otros trucos más, no se pierdan la continuación del post.