Webtips

En CSS, shorthand (literalmente, taquigrafía) es la forma de agrupar varias propiedades de un estilo dentro de una sola propiedad, lo que hará que nuestro fichero de estilos sea más ligero.

Background

La propiedad background tiene 5 variaciones distintas: background-color, background-image, background-repeat, background-attachment y background-position. Todas ellas pueden agruparse en una sola de la siguiente manera:

background: color image repeat attachment position;

Ejemplo:

background: red url(test.jpg) repeat-x scroll center;

Si no ponemos uno de los valores, se tomarán los valores por defecto. Para la propiedad background, los valores por defecto son:

• background-color: transparent
• background-image: none
• background-repeat: no-repeat
• background-attachment: scroll
• background-position: top left

Font

La propiedad font tiene 6 variaciones: font-style, font-variant, font-weight, font-size, line-height y font-family. La forma abreviada o shorthand es:

font: style variant weight size/height family;

Ejemplo:

font: italic small-caps bold 12px/16px Arial, Verdana;

Se pueden omitir todos los valores excepto font-size y font-family. Si omitimos uno de los valores se tomarán los valores por defecto que son los siguientes:

• font-style: normal
• font-variant: normal
• font-weight: normal
• line-height: normal

Hay que tener especial cuidado a la hora de estilar con shorthands elementos que lleven ciertos estilos por defecto. Por ejemplo, si usamos el shorthand de font para estilar un elemento strong o h1, hay que tener en cuenta de que, por defecto, van en negrita. Veamos el siguiente ejemplo:

strong {
   font: 16px Arial;
}

Al no llevar el valor de la propiedad font-weight, tomará el valor por defecto (normal), y nuestra etiqueta strong dejará de estar en negrita.

Margin

La propiedad margin tiene 4 variaciones: margin-top, margin-right, margin-bottom y margin-left. La forma shorthand es:

margin: top right bottom left;

Ejemplo:

margin:10px 20px 30px 40px;

En caso de que algunos valores se repitan, podemos incluso acortar más el estilo:

margin:10px; /* top/right/bottom/left=10px */
margin:10px 20px; /* top/bottom=10px, right/left=20px */
margin:10px 20px 30px; /* top=10px, right/left=20px, bottom=30px */

Padding

Al igual que margin, la propiedad padding tiene 4 variaciones: padding-top, padding-right, padding-bottom y padding-left, y su forma shorthand es:

padding: top right bottom left;

Ejemplo:

padding:10px 20px 30px 40px;

La propiedad padding se parece mucho a margin, y también tiene otras 3 formas de escribirse en shorthand:

padding:10px; /* top/right/bottom/left=10px */
padding:10px 20px; /* top/bottom=10px, right/left=20px */
padding:10px 20px 30px; /* top=10px, right/left=20px, bottom=30px */

Border

La propiedad border tiene 3 variaciones: border-width, border-style y border-color. Además, cada una de estas variaciones pueden usarse para cada uno de los 4 bordes (border-top, border-right, border-bottom y border-left), con lo que tendríamos un total de 12 variaciones distintas (border-top-width, border-top-style, border-top-color, etc…). El shorthand general es:

border: width style color;

Ejemplo:

border:2px dotted blue;

Para un borde en particular podemos escribir:

border:2px dotted blue;
border-top: 5px dashed green;

Si queremos definir una de las variaciones de border (border-width, border-style o border-color) para cada uno de los 4 bordes individualmente, podemos hacerlo siguiendo la misma sintaxis que usamos en margin o padding (top, right, bottom, left). Por ejemplo:

border:2px dotted blue;
border-color: red green black pink;

En resumen, si queremos estilar los 4 bordes o uno en particular, usaremos los shorthands:

border: width style color;
border-top: width style color;
border-right: width style color;
border-bottom: width style color;
border-left: width style color;

Pero si queremos estilar una de las propiedades de border individualmente, usaremos los shorthands:

border-width: top right bottom left;
border-style: top right bottom left;
border-color: top right bottom left;

Esta combinación de valores (top, right, bottom, left) funciona igual que en margin y padding. Es decir, si en vez de 4, escribimos 1 valor, todos los bordes tomarán ese valor. Si escribimos 2 valores, top y bottom tomarán el primer valor, left y right tomarán el segundo valor. Y si escribimos 3 valores, top tomará el primer valor, left y right tomarán el segundo valor y bottom tomará el tercer valor.

Ejemplo:

border-style:solid;
border-width:2px 5px;
border-color: red green blue;

Fácil, ¿no? Pues otra cosa más, Recuerda que si no escribimos uno de los valores, como siempre se tomarán los valores por defecto, que son:

• border-width: medium
• border-style: none
• border-color: el valor de la propiedad color

Ejemplo:

color:red;
border:dotted;

Outline

La propiedad outline tiene 3 variaciones: outline-width, outline-style y outline-color. Su shorthand se escribe de la siguiente manera:

outline: width style color;

Ejemplo:

outline: 2px dashed red;

Outline se parece a border (ver más arriba), pero no existen las propiedades outline-top, outline-right, outline-bottom ni outline-left.

List-style

La propiedad list-style tiene 3 variaciones: list-style-type, list-style-position y list-style-image. Su shorthand es:

list-style: type position image;

Ejemplo:

list-style: disc inside url(test.jpg);

Para eliminar cualquier estilo de las listas podemos usar un shorthand especial:

list-style: none;

Los valores por defecto son:

• list-style-type: disc
• list-style-position: outside
• list-style-image: none

W3C recomienda utilizar la propiedad list-style en los elementos <ul> y <ol> ya que, por herencia, también se estilarán los elementos <li> hijos.