CSS Image Replacement: 2 nuove tecniche
Venerdì 13 Aprile 2012 - 14:56
di Marco Pontili
Negli ultimi giorni, sono state pubblicate 2 nuove tecniche di CSS image replacement (rimpiazzare via CSS il testo di un elemento con un immagine) molto interessanti.
La prima, pubblicata da Jeffrey Zeldmann sul suo blog, non fa uso di text-indent negativo (avete presente ‘text-indent: -9999px’?) e usa anche le proprietà white-space e overflow per assicurare l’invisibilità di possibili testo e spazio in eccesso.
Ecco il codice completo:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
La seconda tecnica invece, pubblicata da Nicolas Gallagher nel suo blog e inserita all’interno di HTML5 Boilerplate prevede un hack che azzera font-size e line-height e fa uso di un super shorthand per dichiarare una sola lettera come font-family. text-shadow: none e color: transparent fanno il resto.
Da notare che su HTML5 Boilerplate, la tecnica viene presentata dichiarando anche background-color: transparent e border: 0.
Ecco il codice completo:
.ir {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
Sono entrambi valide e molto molto semplici da utilizzare. A voi i test (vi consiglio di provare bene la 2° su IE7) per capire se e quale implementare in produzione o no.
Commenti
1
scusate: il vantaggio rispetto a quelle già note?
Grazie!
2
Principalmente:
brevità
no text-indent negativo
no markup superfluo
no hacks# - postato da Marco Pontili - 16 Aprile 2012 - 15:49
3
che io sappia color:transparent non ha una buona retrocompatibilità, per il resto, ok ma di nuovo non mi pare di vedere nulla :)
4
Salve a tutti, ho provato ad utilizzare la classe .hide-text ma noto con mio stupore che questa tecnica non funziona con Google Chrome (ver. 23) riesco a nascondere il testo soltanto utilizzando un text-indent negativo…
Qualcuno di voi ha riscontrato gli stessi problemi?
# - postato da Andrea Barghigiani - 12 Novembre 2012 - 14:52
5
@andrea puoi creare un piccolo test su http://jsbin.com/ e condividerlo qui nei commenti?
# - postato da Marco Pontili - 19 Novembre 2012 - 12:01