Rimpiazzare immagini con la LIR

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.

Secondo esempio: rendere le cose più semplici

Ho pensato di presentare una piccola variante alla soluzione, che si rivela
molto pratica se i titoli da rimpiazzare in una pagina fossero più di uno, come
nel secondo esempio. L'approccio è quello utilizzato
nella MIR dello scorso appuntamento: si attribuirà agli elementi da rimpiazzare una
classe comune e un id univoco, così da aver più facilità di stesura del CSS. Ma vediamo
prima l'HTML dell'esempio:

Ed ecco il CSS per intero:

La classe "lir" racchiude tutte le dichiarazioni comuni e non necessita di modifiche,
mentre per ogni singolo titolo viene quindi specificata l'immagine attraverso la proprietà
list-style-image. Questo approccio si rivela molto pratico e veloce.

Conclusioni

In questo articolo abbiamo visto la List-item Image Replacement, una tecnica semplice
per ottenere titoli grafici sia a schermo che a stampa. La compatibilità della tecnica
è piuttosto buona: è stata testata con successo in IE6, IE7, Opera, Firefox e Safari;
mente su IE5.0 e IE5.x la tecnica non ha alcun effetto, mostrando quindi i titoli testuali.

In fase di stampa la tecnica si comporta bene, anche se ha due piccoli difetti: in alcune
versioni di Mozilla/Firefox l'immagine si presenta più piccola di quanto è in realtà, mentre
in Opera il titolo testuale è visibile, anche se molto piccolo, al fianco dell'immagine.
Gli esempi e le immagini dell'articolo sono disponibili per il download. Alla prossima!