6
Nov 2012

Sprites con
CSS

En la publicación anterior mencionamos que una forma de ahorrar ancho de banda y reducir las peticiones a nuestro servidor desde los navegadores, es la utilización de sprites. Es una forma de optimizar una página para que el contenido cargue de manera más rápida. Pero se quedó sin mayor explicación; ahora trataremos un poco este concepto y el modo de emplearlo, verán que es de mucha utilidad y que se pueden hacer cosas interesantes con ello.

Primero hay que entender el concepto de sprite. Si están familiarizados con el mundo de los videojuegos quizás ya tengan noción del concepto, pues es de los propios videojuegos donde se ha toma esta idea. En los videojuegos antiguos los personajes eran representados por una sucesión de imágenes para simular movimiento, dentro de los datos del juego existía un mapa de bits con cada uno de los posibles posiciones del personaje.

Una sola imagen con todos los movimientos de un personaje.

Dependiendo de la acción a realizar, se tomaba una sección de esa imagen y se insertaba en la pantalla, y de esa forma daba la sensación de que el objeto se movía. Basándose en este concepto, CSS permite realizar este mismo efecto. Si en nuestra página existe una gran cantidad de iconos, logos, etc., que se hacen presentes en cada una de las diferentes secciones, el navegador estaría solicitando cada una de estas imágenes cada vez que se accediera a una parte diferente del sitio o al recargar la página.

Quizás en una computadora esto  no tenga mucha importancia, pero al estar navegando en un dispositivo móvil, podría reflejarse en una carga lenta de la página. Ya que la manera en que se cargan las imágenes es en orden de petición, las primeras imágenes dentro de la cola de descarga se muestran primero y así hasta tener todas. Esto le da una sensación de lentitud a nuestro sitio, aparte de que no es una buena práctica hacer esperar a nuestros visitantes.

Para agilizar esto, podemos reunir todos nuestros elementos en una sola imagen y posteriormente con CSS nos encargaremos de posicionarlos en donde sea necesario. Supongamos que queremos hacer un menú de navegación con imágenes, el cual contiene 5 elementos, si lo hiciéramos remplazando imagen por imagen, en total tendríamos 10 imágenes que estarían cambiando constantemente. Pero, como queremos optimizar nuestra navegación usaremos la siguiente imagen:

Como podemos apreciar, en la imagen están contenidos los elementos que servirán para los 5 botones de navegación del menú, cada par corresponde al estado activo e inactivo de los elementos del menú. ¿Por qué es importante? Si tenemos configurado nuestro sitio para que almacene en el caché del navegador las imágenes, una vez que la imagen este en los archivos temporales de la computadora, cada vez que se visite el sitio, ya no se realizará la petición y además solo se cargará una sola imagen haciendo más rápido el sitio.

Ahora pasemos a la aplicación de sprites, primero creemos una lista en HTML:

<ul id="nav">
    <li><a id="item1"></a>Diseño</li>
    <li><a id="item2"></a>Script</li>
    <li><a id="item3"></a>Citas</li>
    <li><a id="item4"></a>HTML</li>
    <li><a id="item5"></a>¿Listo?</li>
</ul>

Se verá como sigue:

Es necesario colocar identificadores en cada etiqueta porque necesitamos identificarlas para aplicarles el estilo para realizar el efecto de cambio. Algo importante, necesitamos saber el tamaño que delimitará cada segmento del sprite pues será la dimensión de cada elemento <li>. En este caso, cada bloque es de 115px por 66px.

Ahora debemos definir el estilo en un archivo CSS que ira como el siguiente:

#nav li {display: inline;}

#nav li a{display:block;width: 115px;height: 66px;

text-indent: -9999px;background: url(../images/1.jpg);float: left;}

#nav li a#item1 {background-position: 0px 0px }

#nav li a#item1:hover {background-position: 0px -66px }

#nav li a#item2 {background-position: -115px 0px }

#nav li a#item2:hover {background-position: -115px -66px }

#nav li a#item3 {background-position: -230px 0px }

#nav li a#item3:hover {background-position: -230px -66px }

#nav li a#item4 {background-position: -345px 0px }

#nav li a#item4:hover {background-position: -345px -66px }

#nav li a#item5 {background-position: -460px 0px }

#nav li a#item5:hover {background-position: -460px -66px }

Vamos a conocer la estructura de lo anterior. Primero indicamos que la lista de mostrará de  manera horizontal y no vertical, como se muestran las listas por default. La segunda línea contiene lo principal, indicamos que cada link que se encuentre dentro de la lista tendrá un ancho de 115px y una altura de 66px, así es, las medidas de cada parte del sprite; también indicamos que el texto estará a -9999px de su origen, esto con el fin de que desaparezca de la pantalla y finalmente indicamos que la imagen de fondo del link será nuestra imagen con los sprites en la posición 0,0.

Background-position es el atributo que nos permite realizar el efecto de sprite. En las siguientes líneas referenciamos cada uno de los elementos de la lista con su id (item1, item2, etc.). Para cambiar la posición de la imagen incrementamos la posición pero con números negativos. La primera posición representa el eje de X y la segunda el eje Y. Como si nos moviéramos en un plano cartesiano en el cuadrante 4.

La regla #nav li a#item(x) indica la posición default del sprite, mientras que #nav li a/item(x):hover indica que cuando el mouse se pase sobre el elemento, se aplicará el estilo, de ese modo cuando pasemos el mouse por cada elemento de manera rápida se cambia la posición de la imagen a mostrar simulando una transición. Para ver el resultado, vayan a este link.

Al pasar el mouse sobre una imagen automáticamente cambia a otra, esta es la manera más sencilla de trabajar con sprites, pero si agregamos efectos más recientes de CSS3, como animaciones y transiciones podemos tener resultados más interesantes. ¿Qué les parece? Ya conocían esta técnica, ¿qué otras aplicaciones para ella se les ocurre?

Por cierto, si mezclamos esta técnica con algo de JavaScript, podemos tener un resultado como el de este ejemplo. Y con un poco más de trabajo, en realidad mucho, se podría realizar algo más complejo, como este otro ejemplo donde llevan al máximo el uso de sprites y animación con CSS3: “Sorpresa”.

Por: Arturo Tadeo / Diseño web

Comments are closed.

DOTTO