Abbiamo parlato recentemente di Image Replacement negli articoli sulla
List-Item Image Replacement
e sulla MIR, un po'
di tempo fa nella carrellata
Le tecniche di Image Replacement.
In questo articolo presento la mia selezione personale di tecniche preferite.
L'image replacement è nato per presentare sotto forma visuale un'informazione
che si presenta naturalmente testuale nel markup. La domanda più comune che chi non
conosce l'image replacement può porsi è: Ma perchè non usare un'immagine attraverso il tag <img>?
Sostanzialmente perchè rappresentare un'informazione testuale sotto forma
visiva dovrebbe essere compito della presentazione (i CSS) e non risiedere permanentemente
nel contenuto (l'HTML). L'image replacement consente molta più flessibilità nel processo
di design e redesign: potremo infatti cambiare i nostri titoli grafici,
o ripristinare i titoli testuali, solo attraverso i fogli di stile, svincolandoci dal
markup.
Ci sono moltissime tecniche di image replacement, ma prima di iniziare con
codice ed esempi vorrei spiegare perché ho scelto le tre che sto per presentare:
- La maggior parte delle tecniche di image replacement è di difficile comprensione o
implementazione, dato che usano hack e workaround per garantire una buona compatibilità - Le tre tecniche che vedremo sono semplici, logiche, non usano hack e hanno un'ottima
compatibilità - La "Top 3" presenta le uniche tecniche che funzionano in uno scenario raro, ma possibile:
CSS abilitati e immagini disabilitate - Nelle tre tecniche il risultato è già pronto anche per la stampante:
se l'utente ha le immagini di sfondo disabilitate verranno stampati gli equivalenti
testuali senza lavoro aggiuntivo
Cover-up span
Ideata da Tom Gilder e Alexander Levin intorno alla metà del 2003,
la Cover-up span (che si può trovare documentata tra l'altro in
Revised image replacement)
è la prima tecnica che presento. Vediamo subito l'esempio, in cui
ho predisposto anche un link per emulare lo scenario CSS abilitati e immagini disabilitate.
Ecco il markup:
<h2 id="soluzioni"><span></span>Soluzioni grafiche</h2>
Come si può notare, al titolo viene assegnato un id e prima del testo, al suo interno,
viene inserito un elemento span vuoto. Compito dello span è proprio quello di
coprire il titolo testuale con un'immagine, grazie ai posizionamenti assoluti. Procediamo
ora con il CSS. Per prima cosa per il titolo h2 viene definito position:relative
così da poter stabilire un contesto di posizionamento, ovvero consentire il posizionamento
assoluto al suo interno. Vengono poi definite le dimensioni, che dovranno essere quelle
dell'immagine che useremo per il replacement, e infine le proprietà sul font nel caso in cui
siano disabilitate le immagini: ho dichiarato un testo piuttosto piccolo e ho usato un colore che
richiama quello del titolo grafico.
Arriviamo quindi allo span: verrà posizionato assolutamente, con dimensioni
pari a quelle del suo contenitore (ovvero l'h2) e gli verrà attribuita l'immagine di sfondo
che andrà quindi a coprire il titolo testuale. Vediamo le due regole per intero:
h2#soluzioni{position: relative;width: 260px;height: 60px;
font: bold 12px Arial,sans-serif;color: #36A2D8}
h2#soluzioni span{position: absolute;width: 100%;height: 100%;
background:url(titolo.png)}
Due piccole annotazioni teoriche riguardo il posizionamento assoluto dello span.
Questo elemento è per sua natura inline, ma essendo posizionato assolutamente
viene promosso ad elemento block-level ed è quindi capace di avere dimensioni.
Le coordinate del posizionamento assoluto non sono specificate, dato che
implicitamente viene posizionato con l'angolo in alto a sinistra che coincide
con quello del contenitore (ovvero il titolo) a cui si riferisce.
Il nostro primo esempio è così ultimato.
Siamo così pronti a procedere con la seconda tecnica.
BIR - Bob Image Replacement
La Bob Image Replacement presentata
da Neal Venditto nel Marzo 2005 è una tecnica molto semplice, che richiede però la comprensione
di un concetto fondamentale: lo z-index.
I posizionamenti CSS permettono di esprimere coordinate sui due assi dello schermo (verticale
e orizzontale). C'è in realtà nei CSS una sorta di profondità, o terza dimensione: lo z-index,
che stabilisce la disposizione degli elementi posizionati lungo l'asse perpendicolare allo schermo.
Una trattazione esauriente dello z-index esula dagli scopi dell'articolo: basti sapere che elementi
con z-index maggiore vengono disposti sopra (o ancor meglio, davanti) ad elementi con z-index minore.
Dopo questa piccola premessa teorica, siamo pronti a presentare l'esempio.
Anche la BIR, come la tecnica appena vista, richiede uno <span> aggiuntivo: in
questo caso lo span invece di essere vuoto ha lo scopo di racchiudere il testo:
<h2 id="soluzioni"><span>Soluzioni grafiche</span></h2>
Piccola curiosità: il markup ricalca bene la prima tecnica di image replacement nella
storia dei CSS, ovvero la FIR,
ed è quindi adatta per CSS Zen Garden.
Siamo pronti a procedere con il CSS. Per prima cosa è importante stabile un contesto
di pagina per lo z-index, indispensabile perchè la tecnica funzioni anche ad immagini
disabilitate. Si renderà quindi il body con posizionamento relativo e si
dichiarerà uno z-index pari a 1. Per il titolo h2 verranno specificate
le dimensioni, un font piccolo e azzurro e l'immagine di sfondo.
Infine, la parte essenziale: lo span. Per poterlo disporre "sotto" il titolo h2
che lo contiene basterà posizionarlo relativamente e specificare uno z-index
minore di quello del body, ad esempio -1. Ecco quindi le tre regole:
h2#soluzioni{width: 260px;height: 60px;
font: bold 12px Arial,sans-serif;color: #36A2D8;
background:url(titolo.png)}
h2#soluzioni span{position: relative;z-index:-1}
Il nostro esempio
questo caso ho predisposto un link per verificare come renderebbe la tecnica
con immagini disabilitate. Siamo pronti a procedere con l'ultima tecnica.
My Latest take
La tecnica di image replacement presentata da Jon Christopher in
My latest take on
image replacement è, ad oggi, quella più recente (è stata infatti
pubblicata il 23 Ottobre 2006) e la prima tecnica che funziona a immagini disabilitate
senza richiedere markup aggiuntivo.
Vediamo subito l'esempio. Ecco il markup:
<h2 id="soluzioni">Soluzioni grafiche</h2>
Il concetto alla base è tanto semplice quanto efficace. In questo caso non si tratta
di nascondere il testo, né di coprirlo, ma solo di renderlo dello stesso colore dello sfondo
dell'immagine per il replacement.
Insieme a quest'ultima basterà specificare anche un colore di sfondo in grado di dare un
contrasto tale da rendere leggibile il testo se le immagini soni disabilitate.
Nell'esempio il concetto di base è facilmente comprensibile
se si prova a cliccare sul link per disabilitare le immagini.
Procediamo ora con il CSS dell'esempio. Per l'header vengono specificate
le dimensioni, un font di 12 pixel, uno sfondo azzurro insieme all'immagine
per il replacement e il testo bianco. Tutto qui, un'unica regola davvero
semplice:
h2#soluzioni{width: 260px;height: 60px;
font: bold 12px Arial,sans-serif;
background:#6BBAE9 url(titolo.png);color:#FFF}
Il nostro esempio è così ultimato.
La tecnica, a fronte di una semplicità assoluta, ha solo due piccoli requisiti:
il primo è che lo sfondo dell'immagine per il replacement
deve essere di colore pieno, almeno nella parte superiore, e che in questa zona
vanno lasciati 10-15px di spazio vuoto prima della grafica del testo.
Da notare come nell'esempio il testo è selezionabile, anche con il replacement
attivo.
Possibili sviluppi e suggerimenti
Le tecniche di image replacement che abbiamo visto presuppongo l'attribuzione di un id
univoco ad ogni elemento da rimpiazzare. Per snellire il CSS e il suo processo di stesura
è possibile asegnare nel markup,oltre all'id, una classe comune a tutti gli elementi che
verranno rimpiazzati. Questa classe avrà lo scopo di accorpare le dichiarazioni
comuni a tutti i titoli rimpiazzati, un po' come abbiamo fatto con la
LIR.
È anche possibile utilizzare una sola immagine per rimpiazzare comodamente più titoli grafici,
come nell'image replacement multiplo.
È infine possibile utilizzare l'image replacement anche sul logo del sito, piccole sezioni
di testo e link oltre che ai titoli. Per ciò che riguarda i link si potrebbe combinare
con una delle tre tecniche viste anche il rollover, come abbiamo fatto in diverse occasioni nella serie
Menu
grafici e semigrafici con rollover e preload via CSS.
Conclusioni
Abbiamo visto tre tecniche di image replacement robuste e semplici. La loro compatibilità
è ottima: sono state testate su Internet Explorer dalla 5 alla 7,
oltre che sulle ultime versioni di Opera, Firefox e Safari.
Unico neo delle tre tecniche viste è che il testo verrà mostrato nel frattempo che
le immagini di replacement vengono caricate. Un piccolo "difetto" che però vale la pena a
parer mio, dato che sono accessibili anche a immagini disabilitate e pronte per
la stampa senza troppe modifiche. Gli esempi sono disponibili per il download.
Alla prossima.
