CSS  »  Articoli  »  CSS Sprite e Image Replacement 

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:

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:

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:

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.

Altri articoli

Altre guide

Altre newsletter