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:
La seconda tecnica invece, pubblicata da Nicolas Gallagher nel suo blog
HTML5 Boilerplate
font-size
line-height
font-family
text-shadow: none
color: transparent
Da notare che su HTML5 Boilerplate
background-color: transparent
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.
