Un nuovo approccio per l’image replacement

Rimpiazzare il contenuto testuale definito nel markup HTML con un’immagine tramite CSS: questo, in sintesi, lo scopo delle varie tecniche di image replacement elaborate nel corso degli anni e implementate su migliaia di siti.

Come sapete, al momento di adottare una qualunque di tali tecniche, è necessario sempre verificare, per non sacrificare la fruizione dei contenuti, la resa in vari scenari; CSS disabilitati, immagini disabilitate, etc. Nell’articolo Image Replacement: le 3 tecniche migliori Alessandro Fulciniti aveva fornito un’utile sintesi, presentando i tre metodi che superano anche gli scenari meno probabili ma possibili, come quello che vede sul browser dell’utente l’abilitazione dei CSS e la disabilitazione delle immagini.

Una tecnica alternativa, con un approccio a dire il vero nuovo (almeno per quello che mi riguarda), è quella presentata da Paul Young in questo articolo apparso su SitePoint.

Basata su un piccolo Javascript ampiamente commentato nell’articolo, la tecnica si fonda su un presupposto di fondo: le regole di image replacement definite nei CSS andrebbero applicate solo dopo aver verificato che le immagini siano abilitate. Meglio: nel CSS vanno definite due regole distinte, una per lo scenario ‘immagini disabilitate’, una per lo scenario ‘immagini abilitate’:

h1 {
 width: 100px;
 height: 50px;
}
@media screen {
 .images-on h1 {
   text-indent: -10000px;
   background-image: url(image.png [8]);
   overflow: hidden;
 }
}

La classe .images-on è quella da utilizzare nel CSS per specificare a quali elementi applicare l’image replacement.

Per ulteriori dettagli rimando all’articolo, ricordandovi che per una prova su strada dello script è necessario, in mancanza di una demo online, scaricare il pacchetto zip contenente lo script.