CSS Image Replacement: 2 nuove tecniche

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.