Gestisci al meglio le tue Sprite CSS grazie ad un Compass

Come dovresti sapere, creare delle immagini per le Sprite CSS è forse uno dei compiti più noiosi da realizzare, serve precisione e pazienza! In questo articolo non ti mostrerò soltanto come automatizzare la loro creazione ma anche come velocizzare lo sviluppo dei tuoi CSS con classi pronte all'uso.

Se ci segui da diverso tempo dovresti sapere che questa non è la prima volta che trattiamo l’argomento delle Sprite CSS, infatti già all’interno di questo blog trovi una prima introduzione e abbiamo approfondito la sua conoscenza nel corso dedicato a Sass su skillsAndMore.

Il motivo è molto semplice, sfruttare queste tecniche permette di velocizzare incredibilmente il download del proprio sito perché al posto di creare una chiamata HTTP per ogni immagine abbiamo l’opportunità di farlo tutto all’interno di una singola chiamata, risparmiando i “ritardi” che si hanno nell’effettuare ogni richiesta HTTP.

In fin dei conti questa è un’informazione che avresti dovuto già avere, ma un piccolo ripasso non fa mai male, anzi questo è il motivo dei link aggiunti precedentemente ;) Però quello che troverai all’interno di questo articolo non sarà un semplice ripasso, piuttosto ti permetterà di scoprire come velocizzare questa tecnica e come semplificare lo sviluppo dei tuoi fogli di stile grazie a Sass, o per meglio dire grazie a Compass.

Praticamente, seguendo questo articolo sarai in grado di dimezzare come minimo il tuo lavoro e sopratutto non dovrai disturbare il tuo designer chiedendogli nuove immagini da testare! Sembra bello vero? Eppure è anche meglio ma non potrai scoprirlo se non continui a leggere.

Se proprio non te lo ricordi e non hai voglia di andare a leggere l’articolo che ti ho collegato precedentemente, lasciati ricordare che un’immagine realizzata per essere una Sprite CSS non è altro la rappresentazione di tutte le nostre icone o immagini, del quale è composto il nostro template, salvate all’interno di una singola immagine.

È stato dimostrato che seguendo questa pratica è possibile ridurre il numero di chiamate HTML (che presentano diversi tempi di attesa) e che generalmente il peso dell’immagine risultante è nettamente inferiore alla somma dei pesi delle singole immagini, insomma è una vittoria su tutta la linea!

L'immagine Sprite delle applicazioni Google

Come puoi vedere dalla stessa immagine, anche grandi servizi come quelli offerti da Google sfruttano questa tecnologia e se lo fanno loro possiamo tranquillamente assumere che, con il traffico che possono ricevere i suoi siti, questa tecnologia è stata testata minuziosamente e ha dimostrato la sua utilità.

Se ti stai chiedendo perché l’immagine sprite che ho appena inserito non presenta il nuovo logo di Google il motivo è presto detto. Per prima cosa è successo una settimana fa e non mi aspettavo che proprio in questo periodo arrivasse Google con le sue nuove linee guida ma in secondo luogo ho scelto lo stesso di inserire questa immagine perché al momento è l’unica sviluppata rettangolarmente. Non mi credi? Continua a leggere…

Se sei un tipetto curioso ti comunico che con altri test ho scoperto che Google ad oggi utilizza una Sprite CSS sviluppata soltanto verticalmente. Ovviamente queste sono scelte e sei anche fortunato perché in questo articolo andremo anche a scoprire come automatizzare la realizzazione di queste immagini perché dover chiedere al nostro designer una riorganizzazione delle immagini potrebbe costarci la sua amicizia su Facebook ;)

Dove voglio andare a parare?

Ho iniziato a scrivere le prime frasi di questo articolo con la decisione di descriverti tutte le soluzioni che hai a disposizione nella creazione delle tue immagini Sprite e questo desiderio non mi ha assolutamente abbandonato.

Soltanto che durante la sua stesura ho sentito il bisogno di farti capire quanto sarà anche utile apprendere questa tecnica per collaborare spalla a spalla con il tuo collega designer; scoprire come realizzare le Sprite CSS con Compass aiuterà entrambi a velocizzare il proprio lavoro.

Se non ti era mai capitato di conoscere questa tecnica e l’utilità che porta all’interno delle prestazioni del sito, adesso sai quanto è interessante; non resta altro che scoprire quanto sia semplice da realizzare!

Infatti ho deciso di dividere questo articolo in tre sezioni principali. Nella prima ti presenterò come creare una Sprite CSS con il metodo più semplice che conosco, nella seconda andremo a vedere la creazione più completa e avanzata mentre alla fine andremo a scoprire alcune curiosità che ti permetteranno di utilizzare al massimo questa tecnologia.

Crea facilmente una Sprite CSS con Compass

Come spesso accade, sopratutto in campo informatico, essere in grado di realizzare qualcosa semplicemente molto spesso significa rinunciare al grado di personalizzazione che possiamo raggiungere. Quello che vedremo assieme in questa sezione è la creazione di una Sprite CSS nel modo più semplice che conosco, ma purtroppo ci obbliga a dover rispettare degli standard che non ci offrono una grande personalizzazione.

Prima di poter scoprire quale sia la funzione Compass che ci permette di creare una singola immagine, dobbiamo sapere come distribuire le singole icone necessarie alla realizzazione della Sprite , perché altrimenti Compass non sarà in grado di compiere la sua magia…

Praticamente quello che devi fare è prendere tutte le icone che il designer ha salvato una ad una e inserirle all’interno della stessa cartella, prendendo in esame le icone Google che ti ho presentato precedentemente si potrebbe dire che la struttura del progetto dovrebbe essere più o meno simile a quella che segue:

Praticamente questa è la struttura del progetto che creeremo quest’oggi insieme e se ti interessa conoscere il codice che abbiamo utilizzato puoi tranquillamente scaricare il file .zip oppure potresti clonare il repository su GitHub.

D’ora in avanti parlerò di Sass e Compass senza neanche spiegare come sia possibile precompilare questi file per generare i nostri fogli di stile. Se senti che hai bisogno di un ripasso puoi consultare il mini-corso presente su questo sito e se vuoi approfondire e scoprire altre utilità ti consiglio di consultare il corso all’interno di skillsAndMore.

Il file index.html rappresenta ovviamente la struttura del nostro sito web mentre style.css non sarà altro che il foglio di stile che verrà generato compilando il file sass/style.scss, ma perché le immagini, oltre che essere salvate all’interno della cartella img/, sono anche racchiuse in servizi/?

Per come funziona la creazione delle immagini sprite in Compass, la cosa veramente importante è che tutte le immagini che condividono lo stesso utilizzo siano salvate all’interno della stessa cartella perché ne utilizzerà il nome sia per creare il .png risultante che per creare i mixin necessari all’uso della sprite stessa.

.png risultante? Mixin necessari all’uso della sprite?!? Andrea, ma cosa stai dicendo?

Pensavo di essere stato chiaro prima, ma semplifico tutto immediatamente. Compass è in grado di prendere le singole .png contenute all’interno di una cartella e creare automaticamente l’immagine sprite senza la necessità di aprire alcun programma di grafica!

Con il seguente codice stiamo dicendo a Compass di entrare nella cartella servizi e generare l’immagine sprite che prenderà il nome di servizi-sb200838edf.png.

Ebbene sì, una singola riga di codice e Compass è stato in grado di generare un’immagine sprite automaticamente, questa è comodità! Se però sei un vero skillato e leggi il codice che ti ho appena presentato dovresti aver notato che in questo piccolo blocco di codice ci sono un paio di cose che non quadrano.

Inizialmente… Manca l’importazione di Compass che si può ottenere aggiungendo prima dell’importazione delle immagini quella di questa stessa libreria. Troverai tutto il codice nel repository GitHub che abbiamo appositamente creato ma questo è giusto per fare un po’ di ripasso ;)

E anche se abbiamo fatto questa operazione c’è qualcosa di strano nell’importazione delle immagini, non trovi? Non manca forse la cartella img/ dove abbiamo creato la cartella servizi/ che contiene tutte le icone?

Beh in effetti manca per davvero!

Ma questo è dovuto al fatto a come abbiamo configurato il task di Grunt all’interno del suo Gruntfile.js, vediamo un po’ come è stato configurato…

Le righe di codice che ci interessano maggiormente sono quelle comprese tra 6 e 15, ovvero le impostazioni create all’interno della voce compass: ed in particolar modo l’opzione imagesDir: che ci permette di indicare la cartella all’interno della quale Sass (o in questo caso Compass) sarà in grado di trovare le immagini. Non a caso il valore di questa opzione è img/, in questo modo non avrai più la necessità di indicare questa cartella all’interno del tuo codice tutte le volte che fai riferimento ad un’immagine :D

E adesso che ho creato la sprite?

Se ti sei posto questa domanda probabilmente non hai reagito come il sottoscritto, ovvero saltellando sulla sedia con un sorrisetto da bimbo piccino, forse perché non ti sei mai trovato a dover creare una di queste immagini in un programma di grafica, ti assicuro che non è divertente!

Comunque sia è anche probabile che tu non ti sia fermato ad esultare perché il file che ha generato la tua installazione di Compass non si chiama esattamente servizi-sb200838edf.png, ma forse è perché la seconda stringa alfanumerica è leggermente diversa…

Questo succede perché la creazione del nome dell’immagine viene arricchita da un hash, una stringa appunto, che viene personalizzata in base ad alcuni parametri presenti sulla macchin a come, ad esempio, la data e l’ora di esecuzione del comando.

Ovviamente Compass non è impazzito facendo questa cosa, l’hash viene creato perché se ci dovessero essere dei sistemi di cache attivi all’interno del tuo server, in questo modo obbliga il browser a scaricare la nuova immagine (perché presente sotto diverso nome) che contiene anche le nuove icone che hai aggiunto o quelle che hai rimosso.

Eppure, sotto sotto, io credo che tu ti sia posto questa domanda perché non sai come usare l’immagine sprite appena creata :O

In effetti è vero… Ho elencato tutta la configurazione e la generazione dell’immagine ma non ti ho ancora detto come utilizzarla. Facciamo però un passo alla volta, hai provato a dare un’occhiata al file style.css che è stato generato nella root del progetto? Hai visto che c’è una nuova regola CSS?

Praticamente hai a disposizione una nuova classe che ti permette di utilizzare come sfondo l’immagine appena creata e questo è uno dei passi per utilizzare un’immagine sprite; adesso servono delle classi specifiche. Per raggiungere questo risultato non devi fare altro che inserire la seguente riga di codice:

L’inclusione di questo mixin ci permette di dare il via ad una serie di operazioni che ci permetteranno di avere delle classi pronte da utilizzare per inserire ogni icona singolarmente. Ecco come appare il file style.css una volta che Grunt avrà fatto il suo dovere:

Come puoi notare con i tuoi occhi, la classe che prima era tutta sola adesso ospita tante classi quante le icone inserite nella sprite ma sopratutto ci fa anche trovare una serie di classi che modificano la posizione dello sfondo in modo da utilizzare l’icona desiderata al posto giusto, rispettando ovviamente le dimensioni dell’icona stessa ;)

Raggiungi la personalizzazione con il metodo avanzato

Praticamente adesso hai a disposizione le singole classi e puoi utilizzare le icone come desideri. Se segui il progetto su GitHub noterai che ho preparato per te anche la struttura della pagina HTML, qualcosa di semplice l’importante è vedere che tutto funziona correttamente!

Ma all’inizio dell’articolo ti avevo detto che il precedente sarebbe stato il modo facile e in fin dei conti lo è stato. Se metti da parte le varie spiegazioni, con due comandi hai tutto quello che ti serve! Al tempo stesso questo ci ha portato a dover accettare alcuni compromessi.

Come avrai certamente notato, tutti i nomi che vengono generati fanno riferimento alla cartella contenente le singole icone ed ecco perché è stato utile crearla.

Però più che parlare di un singolo metodo avanzato devo confessarti che sono più di uno e che potrai utilizzarli a tua scelta visto che ti permetteranno un alto grado di personalizzazione come la creazione di classi personalizzate, mappe della tua sprite e molto altro…

Crea delle classi personalizzate

Molto probabilmente trovi le classi della sprite difficile da ricordare oppure stai cercando di creare una certa ottimizzazione semantica, fatto sta che con Compass hai anche questa facoltà, tutto quello che devi fare è rimuovere @include all-servizi-sprites; e modificare il tuo codice come segue:

Praticamente continui ad importare tutte le .png all’interno di servizi/, ma adesso stai utilizzando il mixin *-sprite() (dove la * rappresenta il nome della cartella contenente le immagini) per creare in automatico le tue classi personalizzate da inserire nel codice HTML.

Controlla la direzione

Se hai utilizzato le mie stesse impostazioni molto probabilmente l’immagine sprite generata, che in questo momento porta il nome di servizi-sb200838edf.png, è stata sviluppata in verticale. Molto spesso questo non è una cosa fastidiosa, ma a seconda dell’utilizzo della sprite che facciamo all’interno della nostra struttura non sempre questa è la soluzione migliore.

Ecco perché con Compass è addirittura possibile controllare la direzione delle immagini all’interno della sprite, praticamente il processo automatico di creazione può essere sfruttato anche in altri modi!

Con il semplice inserimento di una singola riga di codice è possibile modificare la direzione delle nostre icone e aggiornare automaticamente il posizionamento delle nostre classi, mica male per questo risultato:

servizi-s08ef8bd0bc

Ecco come all’interno del mio sistema Compass è stato in grado di generare questa immagine, ovviamente è possibile generarla in modi diversi seguendo le specifiche definite all’interno di questa pagina del sito ma che per ragioni di velocità vado ad inserire anche di seguito: horizontal, vertical, diagonal e smart dove quest’ultima rappresenta un ordinamento intelligente che mira a creare delle immagini di dimensioni ridotte.

Crea una mappa con le sprite

Se le impostazioni che abbiamo visto fino ad ora non dovessero soddisfare la tua curiosità c’è un altro metodo del quale ti vorrei parlare prima ancora di concludere l’articolo e riguarda la possibilità di creare delle mappe sprite che ci forniscono addirittura un maggior controllo e non ci richiede di utilizzare il nome della cartella contenente le singole icone.

Il codice è leggermente diverso ma dovrebbe essere comunque di semplice comprensione:

Come puoi notare tu stesso, a parte i nuovi mixin utilizzati il numero delle righe di codice è praticamente identico a quelle utilizzate nel codice precedente; ma allora perché dovresti usare questa soluzione? Ebbene se provi a dare un’occhiata al codice CSS generato noterai qualcosa di diverso…

Praticamente in questo modo si evita di generare la “classe generale” che contiene l’intera immagine sprite e possiamo al tempo stesso personalizzare il nome delle classi grazie al mixin sprite() che non cambia il nome a seconda della cartella contenente le immagini.

Conclusioni

Se devo essere completamente onesto con te, le possibilità di personalizzazione delle proprie sprite non finiscono affatto qua. La documentazione di Compass dedicata a questo argomento ci permette di conoscere molte altre impostazioni che, ad esempio, ti permettono di controllare lo spazio tra le singole icone, indicare effetti hover che verranno applicati automaticamente e un sacco di altre cose interessanti.

Ti ricordo che se ti interessa approfondire le tue conoscenze di Sass abbiamo creato appositamente un corso dedicato su skillsAndMore, al suo interno sarai in grado di scoprire come sia possibile utilizzare questo linguaggio e le relative librerie che vengono rilasciate al massimo del suo potenziale!

Lascia il tuo Pensiero