Image Replacement: le 3 tecniche migliori

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:

1. La maggior parte delle tecniche di image replacement è di difficile comprensione o implementazione, dato che usano hack e workaround per garantire una buona compatibilità
2. Le tre tecniche che vedremo sono semplici, logiche, non usano hack e hanno un’ottima compatibilità
3. La “Top 3” presenta le uniche tecniche che funzionano in uno scenario raro, ma possibile: CSS abilitati e immagini disabilitate
4. 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:

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:

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:

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:

body{position:relative;z-index: 1}

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 è così ultimato. Anche in 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:

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:

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.