CSS  »  Articoli  »  CSS Sprite e Image Replacement 

Nello scorso appuntamento abbiamo parlato della MIR (Malarkey Image Replacement) una semplice tecnica per rimpiazzare titoli testuali con grafica personalizzata, citando en passant uno dei problemi di cui soffrono (quasi) tutte le tecniche di image replacement, ovvero la stampa.

Le immagini di sfondo, infatti, non vengono stampate di default dai diversi browser, ma solo dopo che l'utente ha settato la relativa opzione (cosa credo piuttosto rara). Si rende quindi necessario dare la possibilità di lettura dei titoli rimpiazzati anche in fase di stampa: tipicamente si procede quindi a rimuovere l'immagine di sfondo e ripristinare il titolo testuale per il media di stampa.

Una delle tecniche più recenti, presentata da Andreas Bovens in Printing CSS background images, ovvia a questo problema affrontando l'image replacement con un approccio molto differente rispetto alle precedenti e numerose soluzioni.

L'idea di base è semplice quanto innovativa. I list-item, ovvero gli elementi di lista, offrono la possibilità di specificare l'immagine per il marcatore grafico, che viene in effetti stampato di default dai browser al contrario delle immagini di background.

Intervenendo quindi sulla proprietà display di un elemento e specificando un marcatore grafico siamo quindi in grado di ottenere titoli grafici sia per lo schermo che per la stampa. Per brevità mi riferirò alla tecnica come List-item Image Replacement (LIR), come qualcuno ha definito la tecnica. Ma non indugiamo oltre e passiamo all'esempio.

Esempio 1: rimpiazzare un titolo

Eccoci quindi al primo esempio, in abbiamo un semplice h1 testuale con id="header". Ecco il codice HTML:

Vedremo ora come grazie ai fogli di stile e alla List-item Image Replacement in grado di sostituire il titolo grafico con l'immagine che potete vedere nell'esempio. Partiamo dal CSS di base:

In sostanza si agisce sulla proprietà display per attribuire al titolo il comportamento di list-item e quindi poter assegnare un marcatore che verrà reso all'interno grazie alla proprietà list-style-position. Infine, specificando un letter-spacing molto negativo, come nella MIR, si è in grado di far sparire il testo, così da mostrare solo il marcatore. Da notare che, a differenza di tutte le altre tecniche di Image Replacement, questa in generale non necessita di specificare dimensioni, dato che non si usano immagini di sfondo.

Con la regola appena vista si riscontrano alcuni problemi in Opera e nelle versioni 5 e 5.x di Internet Explorer: saranno necessari quindi un workaround e un hack per sistemare le cose.

Cominciamo con Opera: come riscontrato nella MIR, il letter-spacing negativo non ha effetto. La soluzione di Bovens in questo caso è stata quella di assegnare un font-size molto piccolo e il colore del testo uguale al colore di sfondo. Il testo, disposto sulla sinistra dell'immagine, non sarà più visibile in Opera. La regola risulta quindi:

Da notare che il colore del testo dovrà essere cambiato in modo da accordarsi con quello della pagina (bianco nel caso dell'esempio).

Sistemato Opera, non ci rimane che pensare a Internet Explorer 5.x: sulle versioni precedenti alla 6 del browser di casa Microsoft non c'è modo di far funzionare la tecnica. In questo si ricorrerà all'escape hack: si inserirà un backslash (carattere di escape, ovvero \) all'interno del selettore, così che IE5.x non riconosca l'intera regola. Per tutti gli altri browsers e il validatore l'escape verrà ignorato. Siamo così arrivati alla regola dell'esempio, che è la seguente:

Due parole sul carattere di escape: questo andrà sistemato all'interno del selettore (escludendo quindi la prima e l'ultima lettera) ma non può essere messo davanti a lettere dalla A alla F (maiuscole o minuscole) né davanti ai numeri: verrà altrimenti interpretato come una sequenza esadecimale. Nel caso dell'esempio, l'unica scelta possibile era quindi davanti alla lettera "r". Con questa aggiunta abbiamo sistemato (parzialmente) anche IE5.x: i titoli sono ora nuovamente visibili... ma testuali. Volendo si potrebbe sistemare utilizzando un'altra tecnica di image replacement, servita magari attraverso un commento condizionale: ma a parer mio questi due browser detengono una percentuale di utenza così bassa che rende accettabile la soluzione dell'escape.

Il nostro esempio è così ultimato: rivediamolo.

Altri articoli

Altre guide

Altre newsletter