comparte el articulo 

Optimización de los archivos CSS – Primera parte

Actualizado el 04/10/2013 < > 2 Cometarios

Resumen: Cómo optimizar los archivos CSS para que pesen menos y no retarden la carga de la página.

El avance en el diseño de páginas web ha hecho que se deban realizar cada vez archivos CSS de mayor tamaño. Esto ha sumado una dificultad, y es que los archivos CSS pueden aumentar la carga de una página, sobre todo si tenemos en cuenta que algunos archivos pueden contar con varios miles de líneas. En un template de Joomla o WordPress, los archivos CSS pueden ser varios, y algunos de ellos pueden llegar a tener un tamaño de más de 30k, y el conjunto de los archivos CSS de un tema sencillo, puede llegar a superar fácilmente los 50k, la mitad de lo que se recomienda como peso total de la página, a lo que posteriormente debemos sumar el peso del resto de los archivos y las imágenes.

Por esta razón, es imprescindible que se tomen medidas para optimizar el tamaño de los archivos CSS, lo que resulta posible mediante la utilización de la abreviación del código, tema en el que nos adentraremos a continuación.

Utilización del código CSS abreviado

Lo primero que debemos saber es que existen dentro del estándar de la W3C, la posibilidad de utilizar formas abreviadas del código CSS, que son aceptadas por todos los navegadores. Esto significa que podemos utilizarlas sin temor a que tengamos problemas con los navegadores o con la validación del CSS.

Código abreviado para fondos

Para establecer las características del fondo de un elemento, se emplean varias propiedades que determinan cada una de estas características. Por ejemplo, la propiedad “background-image” se emplea para determinar cual será la imagen que el elemento tendrá como fondo. En algunas ocasiones, se puede llegar a tener que completar un código similar al siguiente para determinar todas las características del fondo:

#capa {
  background-color: #666666;
  background-image: url(imagenes/fondo.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 25px 50px;
  }

Sin embargo, todas estas propiedades pueden resumirse en una única propiedad, llamada “background”, y en la que se puede determinar varias propiedades a la vez. Téngase en cuenta a la hora de hacer el código, que el orden que se establece en el código anterior es el mismo que se debe seguir para incluirse en la propiedad resumida; algunas de estas propiedades pueden modificar su posición y el navegador lo entenderá de todas formas, pero la forma semánticamente correcta de escribir el código es la que describimos. De esta forma, para resumir el código anterior, podremos hacerlo en una única línea, que se verá de la siguiente forma:

#capa {
  background:#666 url(imagenes/fondo.jpg) no-repeat fixed 25px 50px;
  }

Como puede verse, se encuentran todos los valores de las propiedades utilizadas en el primer código, y que se encuentran separadas entre sí solo por un espacio. En caso de que no se incluya alguno de los valores, el navegador aplicará el valor por defecto de la propiedad faltante. En el ejemplo que vemos, si no introdujéramos un valor para la propiedad “background-color”, el navegador hará que la porción de fondo que no se encuentre cubierta por la imagen sea transparente, ya que es el valor por defecto de dicha propiedad.

Código abreviado para fuentes

Ahora que tenemos una idea clara de cómo funciona la abreviación de las propiedades CSS, nos limitaremos a brindar los ejemplos para cada uno de los casos en los que se puede realizar dicha abreviación. Para las fuentes, las propiedades que determinan sus características (con valores de ejemplo) son las siguientes:

#capa {
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 12px;
  line-height: 1.5;
  font-family: Verdana, Arial, Helvetica;
  }

Lo que puede resumirse también en una única línea de código como puede verse a continuación:

#capa {
  font:italic small-caps bold 12px/1.5 Verdana, Arial, Helvetica;
  }

Código abreviado para listas

La propiedad “list-style” determina la forma en que se verá el estilo de las listas. Solo contiene tres propiedades subordinadas, como veremos en el siguiente código que no ha sido abreviado:

#lista {
  list-style-type: circle;
  list-style-position: inside;
  list-style-image: url(imagenes/boton.gif);
  }

Y el código abreviado resultante es:

#lista {
  list-style:circle inside url(imagenes/boton.gif);
  }

Código abreviado para márgenes y rellenos

El caso de la abreviación de los códigos CSS para márgenes y rellenos es un poco más complejo que los anteriores, por lo que junto con los bordes los hemos dejado para el final. En este apartado trataremos mágenes (margin) y rellenos (padding), ya que el tratamiento es el mismo. Daremos los ejemplos utilizando la propiedad “margin”, pero podrán utilizar el mismo principio para el relleno de los elementos.

Para comenzar, debemos tener en cuenta que se pueden determinar por separado los cuatro márgenes y rellenos de cualquier elemento, mediante la aplicación de propiedades separadas: margin-top, margin-right, margin-bottom y margin-left (en ese orden; para facilitar su identificación, puede decirse que siempre se empieza por arriba y se va en el sentido de las agujas del reloj: top, right, bottom, left).

Existe la posibilidad de utilizar cuatro formas de abreviar márgenes y rellenos, dependiendo la forma a utilizarse de las medidas repetidas que se encuentren en el código. Para que pueda comprenderse mejor, a continuación mostraremos los dos ejemplos, el primero del método extendido y el segundo empleando el método abreviado:

#capauno {
  margin-top: 0;
  margin-right: 5px;
  margin-bottom: 10px;
  margin-left: 15px;
  }
  
#capados {
  margin-top: 0;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
  }
  
#capatres {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
  }
  
#capacuatro {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  }
#capauno  {
  margin: 0 5px 10px 15px;
  }
  
#capados  {
  margin: 0 15px 10px;
  }
  
#capatres {
  margin: 10px 15px;
  }
  
#capacuatro {
  margin: 10px;
  }

En el caso de que se tengan todas las dimensiones de margen y relleno diferentes, podemos ver la forma en que se produce la abreviación siguiendo en ambos códigos lo descrito para la capa llamada “capauno”.

Puede darse el caso en que las dimensiones de márgenes o rellenos superior e inferior sean diferentes, mientras que las dimensiones de derecha e izquierda son iguales. En este caso, como puede verse, se emplea solo tres dimensiones en la forma abreviada, siendo la primera para el margen o relleno superior, la segunda para derecha e izquierda a la vez, y la tercera para margen o relleno inferior.

En el tercer caso, las dimensiones superior e inferior son iguales y lo mismo sucede con las dimensiones de la derecha e izquierda. En la forma abreviada se utilizan dos dimensiones, siendo la primera para margen o relleno superior e inferior a la vez, mientras que la segunda corresponde a la izquierda y derecha a la vez.

El cuarto caso es el más simple de todos, ya que todas las dimensiones son iguales, por lo que solo se coloca un valor, el cual el navegador interpretará que corresponderá a los cuatro márgenes o rellenos.

Continuación

En el próximo artículo, veremos un caso aún más complejo, que son los bordes, además de otras formas de abreviar los códigos CSS.

Publicado el 05/01/2011, última actualización 04/10/2013.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

2 Cometarios

  1. zeus

    me parece interesante. felicidades! por sus artuculos

    Jueves, 6 de enero 2011

  2. Karina

    Gracias, es muy útil para no tener tantas líneas en el css

    Viernes, 7 de junio 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras