L'Image Replacement è il processo in cui, attraverso i CSS, è possibile
rimpiazzare sezioni testuali (tipicamente titoli e header grafici)
con immagini, in modo da svincolare la grafica dal contenuto effettivo
e dare un alto livello di personalizzazione.
Ho presentato tempo fa alcune delle tecniche di image replacement
più note nell'articolo Le tecniche
di Image Replacement e, più recentemente, in
Image Replacement multiplo sul nostro blog.
C'è però una tecnica che manca all'appello, ovvero la MIR, e sarà argomento di questo articolo.
MIR (Malarkey Image Replacement)
Andy Clarke ha presentato già nel marzo 2005 la Malarkey Image
Replacement, una tecnica molto semplice e robusta. L'idea di base è l'uso della proprietà letter-spacing
(che consente di specificare la spaziatura delle lettere) con un valore molto negativo,così da far "sparire" il testo.
Basta poi assegnare l'immagine di sfondo e le sue dimensioni all'elemento da rimpiazzare per
ottenere il nostro titolo grafico.
Vediamo subito l'esempio, in cui si è
applicata la MIR sul titolo h1 e su due titoli h2. Il codice
HTML è molto semplice, ecco la marcatura relativa ai titoli:
<h1 class="mir" id="header">Image Replacement</h1>
<h2 class="mir" id="other">Altro Titolo</h2>
<h2 class="mir" id="simple">Semplice, vero?</h2>
In sostanza si tratta di attribuire una classe "mir" e un id (univoco, mi
raccomando!) agli elementi da sostituire graficamente, così da poterli individuare.
Ora il
CSS, che è piuttosto semplice. La classe "mir" raggruppa le
dichiarazioni comuni ai titoli da rimpiazzare, e viene specificata attraverso due
regole che non necessitano modifiche:
.mir {letter-spacing: -1000em}
/* Per Opera 7 e IE/MAC: */
/**/html>body .mir{letter-spacing: normal;
text-indent: -999em;overflow: hidden}
La prima regola specifica un letter-spacing negativo. La seconda
è stata pensata per le versioni 7.x di Opera, e viene nascosta invece a IE per
Mac. Una piccola nota: a parer mio questi due browser detengono una percentuale
di utilizzo così bassa di utilizzo che l'uso di un hack (o filtro che dir si
voglia) è quasi superfluo.
A questo punto basterà dichiarare le regole specifiche per ciascun elemento
da rimpiazzare graficamente: è qui che si fa neccessario l'uso dell'id nel markup.
Per ciascun titolo specificheremo quindi dimensioni e immagine di sfondo:
h1#header{width: 500px;height: 40px;
background:url(header1.png) no-repeat}
h2#other{width: 230px;height: 40px;
background: url(header2.png) no-repeat}
h2#simple{width: 330px;height: 45px;
background: url(simple.png) no-repeat}
Il nostro esempio è così ultimato. Ora è tempo di
conclusioni.
Note finali e conclusioni
In questo articolo abbiamo visto brevemente la MIR, una semplice tecnica per
aggiungere un po' di brio alle nostre pagine grazie all'image replacement. Rimando all'
articolo dell'autore
e alla relativa pagina di esempio
per approfondimenti. La compatibilità della tecnica è decisamente
buona: è stata testata infatti su IE5.x, IE6, la beta 2 di IE7, Opera 7.x e 8.x, Safari
e Firefox.
La tecnica è accessibile a screen reader e browser testuali, purtroppo non vengono
mostrati i titoli (né testuali, né grafici) nel caso in cui l'utente abbia i CSS abilitati, ma
le immagini disabilitate: uno scenario piuttosto raro, ma possibile. C'è da tener presente che l'unica
tecnica che consente la consultazione dei titoli con immagini disabilitate è la cover-up span,
di cui ho ripreso il concetto nell'Image Replacement multiplo.
L'esempio, che contiene il CSS incorporato per facilità di consultazione, insieme alle
immagini è disponibile per il download.
Ricordo infine che le immagini di sfondo non vengono stampate di default, e sarà quindi
necessario ripristinare i titoli testuali nel CSS per la stampa, o ancor meglio usare un CSS
specifico per questo media. A tal proposito, c'è una tecnica che ovvia a questo
problema, e sarà argomento del prossimo articolo.
