Las abreviaturas o shorthands de CSS son formas mas cortas de programar una hoja de estilo ahorrando espacio y tiempo, dado a que se pueden agrupar 2 o mas declaraciones en solo una linea.

Por ejemplo:

Para declarar el background, podemos hacer bien así:

body {
	background-color: #fff;
	background-image: url(img/back.png);
	background-repeat: repeat-x;
	background-position: center top;
	background-attachment: fixed;
}

O bien podemos:

body {
	background: #fff url(img/back.png) repeat-x center top fixed;
}

Se entiende? Es solo agrupar las propiedades similares de una forma tal para ahorrar lineas y espacio, y que nos sirve para optimizar nuestro CSS. Además es mas fácil de mantener.

Abreviaturas CSS

OJO! esta no pretende ser una guía definitiva de todas las abreviaturas de CSS, sino mas que nada, una ayuda para optimizar el código de tu hoja de estilo y salvar un poco de tiempo en el proceso.

A tener en cuenta primero

Estas son unas buenas técnicas para programar CSS, pero no quiere decir que sean absolutas y definitivas, y que esto que explayo aquí, no es mas que otra opción.

No obstante, siempre a tener en cuenta está la cuestión “lectura”. Usar las abreviaturas y además evitar el espacio en blanco (white-space) en el código pueden hacerlo menos comprensible para aquel que lo ve desde afuera. Si tu código no pretende ser libre de interpretación por cualquiera o bien, no esta pensado para que cualquiera pueda usarlo, el tema lectura no debe preocuparte.

Formas y reglas de la abreviación

Como todo en programación, están las formas y las reglas. Las formas pueden ser libres de uso y las reglas deben respetarse. En si, todo el tema de las abreviaturas o no abreviaturas es cuestión de gusto, así que es libre. Por eso tenemos las formas explicitas y las implícitas dentro de las abreviaturas.

Vamos a explicar un poco mas esto:

Supongamos que queremos que nuestro background tenga las propiedades por default o bien nos da igual ciertas propiedades, por ejemplo:

	background: url(img/back.png);

Bien, que hice? suprimí el resto de las propiedades. Como lo interpreta el navegador:

	background: transparent url(img/back.png) repeat 0px 0px scroll;

Como ven, ciertas propiedades ya las toma el navegador como default o predeterminadas. El primer ejemplo muestra la forma implícita y el segundo la explicita.

En cuanto a las reglas, estas radican en el orden en el que se declaran las propiedades. Si bien se pueden omitir algunas, otras no pueden ser omitidas si se declara otra, y tampoco se puede alterar el orden de estas.

Tomando el ejemplo anterior, veremos que no es lo mismo:

	background: transparent url(img/back.png) repeat 0px 0px scroll;

Que:

	background: url(img/back.png) transparent  repeat 0px scroll 0px;

Simplemente no va a funcionar. El orden en el que se declaran las propiedades no se puede alterar.

Propiedades

Dependiendo de la propiedad esta la forma de abreviarla.

Background

La propiedad background puede ser un poco tramposa, pero muy efectiva en cuestiones de ahorro de espacio. Las sub-propiedades de background son estas:

• background-color: color || #hex || (rgb / % || 0-255);
• background-image:url(URI);
• background-repeat: repeat || repeat-x || repeat-y || no-repeat;
• background-position: X Y || (top||bottom||center) (left||right||center);
• background-attachment: scroll || fixed;

Crealo o no, todas esas propiedades pueden ser combinadas como vimos anteriormente.

Font

A la propiedad Font debemos prestarle un poco mas de atención, puede ser aun mas engañosa que las otras y no declarar algo o declarar de mas puede llevar a inhabilitar toda la propiedad.

Sub propiedades de Font:

• font-style: normal || italic || oblique;
• font-variant:normal || small-caps;
• font-weight: normal || bold || bolder || || lighter || (100-900);
• font-size: (numero+unidad) || (xx-small – xx-large);
• line-height: normal || (numero+unidad);
• font-family:name,”more names”;

Propiedades por default de Font:

• font-style: normal;
• font-variant:normal;
• font-weight: normal;
• font-size: inherit;
• line-height: normal;
• font-family:inherit;

Como lo abreviamos:

font: normal normal normal inhert/normal inherit;

aquí es donde debemos prestar mas atención. El echo de que font-style, font-variant y font-weight se vuelven normales al no ser declarados, pueden afectar ciertas propiedades normales de como por ejemplo h1 – h6, strong y em

Por ejemplo, modificando algunas variables de la etiqueta strong:

strong {
         font: 12px verdana;
}

Esto haría que la etiqueta strong pierda la propiedad font-weight: bold (o bien negrita) que trae por default en todos los navegadores.

Entonces, la abreviatura (explicita) quedarias asi:

	font:bold 1em/1.2em georgia,"times new roman",serif;

Nota importante!:

Vieron lo que use en el ejemplo anterior? Hablo de esto:

font:bold 1em/1.2em georgia,”times new roman”,serif;

Esto quiere decir:

1em(font-size)/1.2em(line-height)

Border

Aplican las mismas reglas, asi que vamos con las sub-propiedades:

• border-width: numero+unidad;
• border-style: (varios);
• border-color: color || #hex || (rgb / % || 0-255);

Y la abreviación:

	border: 4px groove #000;

Si no se declara border-color, este tomará como default el color negro, o bien heredará esta propiedad del elemento que la precede si este tiene declarado border-color. Por otro lado, si no se declara el border-width, este tomara a 3px como default. Es un misterio para mi el porque del arbitrario 3px al no declarar esta sub-propiedad.

Margin y Padding

Sin duda estas propiedades son las mas faciles de recordar y usar.

Sub-Propiedades

• margin-top: numero+unidad;
• margin-right: numero+unidad;
• margin-bottom: numero+unidad;
• margin-left: numero+unidad;

Abreviatura

	margin: auto auto auto auto;

Nota para despistados: Cambien la palabra margin por padding y aplica para uno o para otro las formas arriba presentadas.

Ahora bien, como se puede abreviar aun mas:

Supongamos esto:

	margin: 0px auto;

que hice?

margin: 0px (top/bottom) auto (left/right);

Agrupe las sub-propiedades opuestas entre si, dándoles el mismo valor a ambas.

El default de cada una es 0, por lo tanto si declaro:

	margin: 12px 0px 15px;

el navegador interpretara:

	margin: 12px 0px 15px 0;

Un truco para recordar las propiedades que usan la forma: top right bottom left, es imaginarte la cara de un relog:

• top (12 en punto)
• right (3 en punto)
• bottom (6 en punto)
• left (9 en punto)

Simple, no?

Outline

Bueno, dude mucho en si poner o no esta propiedad dado a que no es una propiedad soportada por todos los navegadores, pero solo para que esta guía quede medianamente completa, y para ser justo con todo el mundo, acá esta.

Sigue las mismas reglas que las demás:

Sub-Propiedades

• outline-width: numero+unidad;
• outline-style: (varios);
• outline-color: color || #hex || (rgb / % || 0-255);

Abreviatura

	outline:3px dotted gray;

List-style

Por ultimo dejamos este propiedad. Raramente usada, aunque a mi opinión muy útil en cuanto a tema de layouts.

Sub-Propiedades

• list-style-type: (varios);
• list-style-position:inside || outside;
• list-style-image:url(imagen.png);

Abreviatura

	list-style:square inside url(imagen.png);

Abreviando los colores

La forma mas común de declarar un color es por su forma hexadecimal: almohadilla (#) y 6 dígitos. Pero también tiene su abreviación:

Decir: #000000

Es lo mismo que decir: #000

Si el hexadecimal consiste en pares iguales, podemos omitir el segundo digito del par:

Si separamos los dígitos en pares: # 00 00 00, podemos agruparlos porque se repiten los dígitos, 0 0 0.

Un ejemplo mas:

Decir: #99CCFF

Es lo mismo que decir: #9CF.

Pero…

Si decimos: #EFEFEF

No podremos abreviarlo

Esto es todo amigos

Espero esta mini guía les provea una idea general sobre las shorthands o abreviaturas del CSS.

Lecturas recomendadas:

• http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/
• http://www.ericmeyeroncss.com/
• http://www.w3.org/TR/CSS21/syndata.html#color-units