Un nuovo approccio per l’image replacement
Mercoledì 11 Febbraio 2009 - 08:34
di Cesare Lamanna
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.
Commenti
1
Un pò OT, ma credo che la mancanza di una demo online per cose come queste sia abbastanza anacronistica…
2
Sicuramente l’approccio è nuovo ed il risultato finale è buono, ma ho qualche dubbio proprio perchè si basa su JavaScript. Personalmente non utilizzerei la tecnica proprio per questo motivo.
3
Ci mancava solo di andare a pescare JS per l’image replacement.
4
Non posso che accordare il mio parere ai commenti già presenti.
L’idea di fondo è buona in termini di usabilità dell’interfaccia: l’image replacement sempre abilitato può risultare controproducente nel caso (poco probabile) in cui CSS sia attivo mentre le immagini no.
Di fatto però è molto più probabile che la “nicchia problematica” dei browsers che rendono le nostre pagine riguardi proprio js!
La tecnica della “doppia scatola” che va ad utilizzare uno SPAN vuoto è, secondo me, la soluzione “meno problematica”:
HTML:
<h1>Titolo testuale<span></span></h1>CSS:
h1, h1 span {
position:relative;
display:block;
width:200px;
height:50px;
scroll:auto;
}
h1 span {
position:absolute;
top:0;
left:0;
background:url(replace.jpg);
}In questo modo, anche ad immagini disabilitate, tutto il contenuto testuale è visibile.
La definizione di “scroll” permette di rendere visibile tutto il contenuto testuale anche in caso di box molto piccoli… scuramente brutto da vedere in ogni caso!# - postato da Marco Pegoraro - 11 Febbraio 2009 - 14:18
5
In pratica bisognerebbe valutare quale dei due gruppi è più trascurabile statisticamente: quello che naviga a “immagini disabilitate” o quello che naviga a “javascript disabilitato”. Ma in rete esistono statistiche attendibili per decidere?