Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Un nuovo approccio per l'image replacement

Link copiato negli appunti

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 {
 ;
 ;
}
@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.

Ti consigliamo anche