Uno de los primeros proyectos a los que me enfrenté, luego de tomar Less CSS como parte de mis herramientas de trabajo, requería el uso de sprites css, por lo que [extrañamente] pensé que sería divertido pensar en una forma de hacerlo mejor utilizando less.
Un sprite css es una colección de imágenes, iconos en este caso, unidos en una única imagen para luego crear clases CSS que muestren únicamente el estilo que necesitamos. El objetivo de los sprites css consiste en reducir la cantidad de imágenes a cargar, porque al reducir peticiones al servidor se acelera la velocidad de carga.
Es mejor una imagen de 100kb que 10 imágenes de 10kb.
Crear la imagen
El primer paso es crear una imagen con los iconos a utilizar, en este caso la imagen es de 300x120px y cada icono ocupa 60x60px, es decir que tendremos 10 iconos en la imagen. Utilizaré los iconos de IconSweet2 y marcaré los espacios de cada icono en Photoshop usando la extensión GuideGuide (recomendada).
Definir el namespace y mixins para los iconos en less
Lo que sigue a continuación es definir los estilos base para los iconos, por ejemplo la imagen que usará, las medidas de los iconos con variables y para facilitar el uso de los iconos más adelante agregaré un mixin (elegir) que permitirá elegir que icono usar unicamente por la posición que ocupa.
Se agregan dos clases más para posicionar los iconos
y por último el mixin que se encargará de «elegir» el icono dentro de la imagen. A este mixin de le enviará como parametro qué icono se usará, por ejemplo elegir(2, 0) usará el icono 2 de la fila 0.
Utilizar el sprite
Con los estilos anteriores hemos definido un namespace para cargar los iconos de la imagen, ahora para usarlo simplemente agregaremos las clases en el HTML y luego en la hoja de estilos base (style.less).
HTML
El HTML básicamente es un conjunto de parrafos <p> con clase tiempo1, tiempo2, etc. con un elemento span dentro de clase icono, este elemento será el encargado de contener la imagen.
style.less
En los estilos definimos que cada icono dentro clase tiempo1, tiempo2, etc. cargué un icono diferente. Además le indicamos la alineación que debe tener usando las clases que ya definimos
Y listo, al tener estos estilos definidos podremos usar los iconos dentro de nuestra página web. Para el ejemplo monté los estilos sobre una plantilla de Foundation y se ve así:
Puedes descargar ver los archivos del ejemplo en Github: uptoeleven-lesscss.
Actualización: También puedes ver un ejemplo de sprites CSS en Less usando un mixin para los iconos: icons.less (Gist).
—
Aunque no parezca sencillo realmente lo es, y de hecho es un gran avance dentro del manejo de estilos.
1 comentario
Comments are closed.
Muy instructivo tu blog.
Sin embargo, hay un ejemplo que das que es demasiado evidente, y que sería mejor tener información un poco más exacta.
Dices «Es mejor una imagen de 100kb que 10 imágenes de 10kb.» que es algo intuitivo. Pero yo como lector y aprendiz quisiera saber la equivalencia exacta (aproximada) de cargas:
Cierto: 1x100kB<10x10kB
Cierto?: 1x100kB<7x10kB
mi ping a google es de una media de 67ms. Dado que mi descarga de datos máxima con ADSL es de 420KB/s, procedo al cálculo de lo que tardaría en descargar 100kB: ping + t= 67 +100/420= 2448ms; evidentemente, el tiempo para descargar 10kB es ping + 10/420: 305ms; por tanto, la relación de rendimiento sería: 2448/305= 8.02 , es decir que el sprite es un 20% más rápido.
Así me respondo a mi mismo, y confirmo que es tan rápido bajar 100kB como 8 x 10kB 😉
Imaginemos ahora que tenemos 50 iconos o imágenes pequeñas, de 50kB y un sprite, por tanto, de 2500kB. Entonces, tras los cálculos obtengo que: 1x 2500kB = 32 x 50 kB , o sea que el sprite sería un 36% más rápido.
Estos datos van mucho más a favor del sprite en cuanto aumenta el ping. Con un ping 0 el sprite es absurdo, y cuanto mayor es, tanto más efectivo. Por otro lado, para que el sprite sea realmente efectivo debe usar todas las partes de las que se compone.