CSS  »  Articoli  »  CSS Sprite e Image Replacement 

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.

Altri articoli

Altre guide

Altre newsletter