CSS  »  Articoli  »  CSS Sprite e Image Replacement 

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

Altri articoli

Altre guide

Altre newsletter