michaelmuller.net | Diseño y Desarrollo Web

Datos útiles para diseñadores y desarrolladores web.

Abreviaturas (Shorthands) en CSS

Posted on | Noviembre 8, 2006

Utilizar Hojas de Estilo (CSS) para el diseño y desarrollo de un sitio web nos trae grandes ventajas, primariamente, el poder separar el contenido del sitio con respecto de su apariencia (diseño), lo cual nos da un control prácticamente total eindividual de ambos aspectos del sitio. Otra ventaja es la reducción de peso en los archivos, porque una hoja de estilo controla los estilos de todo el sitio. Sin embargo existen maneras de optimizar el archivo CSS utilizando abreviaciones o “Shorthands” en las declaraciones y propiedades de cada estilo.

A continuación unas cuantas recomendaciones:

Font

Usar:

font: 1em/1.5em bold italic serif

…en vez de:

font-size: 1em;<br /> line-height: 1.5em;<br /> font-weight: bold;<br /> font-style: italic;<br /> font-family: serif

Esta propiedad sólo funcionará si se declara font-size y font-family, sino esta regla será completamente ignorada.

Background

Usar:

background: #fff url(image.gif) no-repeat top left

…en vez de:

background-color: #fff;<br /> background-image: url(image.gif);<br /> background-repeat: no-repeat;<br /> background-position: top left;

Si se omite cualquier comando de la propiedad del background el navegador aplicará los valores por defecto.

Lists

Usar:

list-style: disc outside url(image.gif)

…en vez de

list-style: #fff;<br /> list-style-type: disc;<br /> list-style-position: outside;<br /> list-style-image: url(image.gif)

Margin & padding

Hay algunas abreviaturas para los comandos de margin y padding, dependiendo de cuántos lados del elemento contenedor tengan los mismos valores de margin y padding.

Cuatro valores diferentes

Usar:

margin: 2px 1px 3px 4px (<em>top, right, bottom, left</em>)

…en vez de:

margin-top: 2px;<br /> margin-right: 1px;<br /> margin-bottom: 3px;<br /> margin-left: 4px

Tres valores diferentes

Usar:

margin: 5em 1em 3em (<em>top, right and left, bottom</em>)

…en vez de:

margin-top: 5em;<br /> margin-right: 1em;<br /> margin-bottom: 3em;<br /> margin-left: 1em

Dos valores diferentes

Usar:

margin: 5% 1% (<em>top and bottom, right and left</em>)

…en vez de:

margin-top: 5%;<br /> margin-right: 1%;<br /> margin-bottom: 5%;<br /> margin-left: 1%

Un valor diferente

Usar:

margin: 0 (<em>top, bottom, right and left</em>)

…en vez de:

margin-top: 0;<br /> margin-right: 0;<br /> margin-bottom: 0;<br /> margin-left: 0

Border

Usar:

border: 1px black solid

…en vez de:

border-width: 1px;<br /> border-color: black;<br /> border-style: solid

Usar:

border-right: 1px black solid

…en vez de:

border-right-width: 1px;<br /> border-right-color: black;<br /> border-right-style: solid

Artículo original de: Trenton Moss

Filed Under General |

Comments

Leave a Reply