CSS Shorthand: La vía rápida para declarar estilos.


CSS pone a disposición una serie de métodos abreviados o Shorthand -del inglés- con los que ponemos declarar propiedades como background, border o margin en una sola línea y especificando varios parametros para diferentes situaciones. Aunque existen y son compatibles en todos los navegodores que siguen los estándar de la W3C, no se adoptan para el uso común hasta que te has peleado más de una vez con ellas. Todas son válidas y aplicables para CSS 2.1 y 3, así como compatibles con todos los navegadores, incluyendo IE5 en adelante.

Propiedad background

Esto que vemos es lo habitual, si bien no siempre las declaramos todas (o no necesitamos hacerlo):

#tu_id {
background-color: #fff; /* Color o transparent que servirá de fallback por si la imagen no se carga */
background-image: url('imagen.jpg');
background-repeat: no-repeat;
background-position: top left;
background-attachment: scroll; //o fixed o inherit.
}

Y ésta sería, de modo abrevíado el shorthand para la propiedad background.

#tu_id {
background: #fff url('imagen.jpg') no-repeat top left scroll;
}

Como veis, son las mismas propiedades declaradas seguidas, dentro de la propiedad background. Decir que aquí el color (#fff) será visible si la imagen que hemos puesto tiene transparencias o bien no se puede cargar, funcionando como fall-back.

Propiedad font

Ésta, al igual que background es una de las más útiles, y si te acostumbras, una de las que más llegarás a apreciar. Veamos que propiedades básicas podemos encontrar para la declaración de estilos y tipos de fuentes:

#your _div {
font-variant:normal;
font-weight:normal;
font-size:1em;
line-height:1.6em;
font-family:'Arial', serif;
}

Veamos ahora cómo se puede simplificar todas estas reglas usando un método abraviado (shorthand) en CSS:

#tu_id
{
font: normal normal 1em/1.6em 'Arial' serif;
}

Tanto font-variant como font-weight no se suelen declarar en las definiciones genéricas de estilo, pues son propiedades que más que heredar, se suelen dar específicamente a los hijos de «parientes» mayores, así que si las queremos obviar, podemos usar este shorthand de una manera más simple y rápida:

#tu_id
{
font: 12px/14px 'Lucida Grande', serif;
}

Como podéis observar, siempre que declaramos el tamaño y la interlínea debemos también acompañarlo con las unidades correspondientes.

Propiedad color

Aunque no tiene las mismas características que un método abreviado en toda regla, como font o background, en color podemos establecer el color en hexadecimal ahorrándonos letras o números si éstos se repiten ya que en notación hexadecimal podemos expresar una pareja de números o letras iguales mediante un sólo caracter. Por ejemplo, y partiendo de:

#tu_id
{
color:#BBBBBB; /* O #bbbbbb, no importa la «caja» */
}

Llegamos a la definición de:

#tu_id
{
color:#bbb;
}

Y para que sea menos confuso, otro ejemplo con dos estilos a continuación definen el mismo color para la homónima propiedad:

#tu_id1
{
color:#0011ff;
}

#tu_id2
{
color:#01f; /* Es lo mismo que #0011FF */
}

Propiedad border

Quizá una de las menos desconocidades y con un uso más extendido. De hecho yo creo que nunca he usado las tres propiedades para definir un borde, por separado. Veamos entonces, como sería a la manera estándar:

#tu_id
{
border-width:1px;
border-style: dashed;
border-color: #91f; /* Recordad que esto es lo mismo que #9911FF */
}

Y la propiedad shorthand, es la siguiente:

#tu_id
{
border:1px dashed #91f;
/* Simple y fácil. */
}

Propiedad margin

Las propiedas para establecer los márgenes son, a mi parecer, las más usadas en las declaraciones de hojas de estilo en cascada y son vitales para crear una buena retícula de página. Es por eso que el shorthand para esta propiedad es altamente recomendable controlarlo en todas sus variantes. De momento, veamos cómo se haría habitualmente:

#tu_id
{
margin-top:8px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}

¿Hay alguna forma de simplificar esas cuatro declaraciones? Sí, la hay, de esta manera:

#tu_id
{
/* margin:top right bottom left;
y quedaría así para el primer ejemplo: */
margin:8px 5px 10px 5px;
}

Pero aquí no acaba la cosa, dispones de tres variantes más que nos permiten abreviar aún más, siguiendo con el ejemplo primero podríamos declarar los cuatro márgenes así:

#tu_id
{
/* margin:top (right y left) bottom */
margin:8px 5px 10px;
}

En el ejemplo de arriba podriamos establecer un mismo valor para los márgenes izquierdo y derecho con un sólo valor, pero también podemos hacerlo si el margen superior e inferior también valen lo mismo, de modo que tendriamos una declaración con dos valores:

#tu_id
{
/* margin:(top y bottom) (right y left) */
margin:10px 5px;
}

En el ejemplo de arriba tendriamos el margin-top y margin-bottom con 10px de margen, y el margin-left y el margin-right con 5px de tal. Por último, tenemos la declaración que iguala los cuatro margenes con un sólo valor, en este caso 10px de margen por cada lado:

#tu_id
{
/* margin:(top, bottom, left y right) */
margin:10px;
}

No hay que olvidarse de la palabra clave auto para definir los márgenes en CSS. Es una palabra reservada que permitirá centrar en relación a los márgenes un elemento cualquiera con el estilo definido dentro de su contenedor (otro div, body, etc…).

Y hasta aquí esta pequeña y accidentada recopilación; accidentada los ratos libres que me he tomado para escribirla que han sido pocos y muy espaciados, así que, cualquier duda o errata lo hablamos en los comentarios 😉