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.

Categoria: CSS | Commenta

Commenti per CSS Image Replacement: 2 nuove tecniche

scusate: il vantaggio rispetto a quelle già  note?
Grazie!

# - Postato da luca 16 aprile 2012 alle 15:10

Principalmente:

brevità 
no text-indent negativo
no markup superfluo
no hacks

# - Postato da Marco Pontili 16 aprile 2012 alle 15:49

che io sappia color:transparent non ha una buona retrocompatibilità , per il resto, ok ma di nuovo non mi pare di vedere nulla :)

# - Postato da Michele 22 aprile 2012 alle 09:10

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 alle 14:52

@andrea puoi creare un piccolo test su http://jsbin.com/ e condividerlo qui nei commenti?

# - Postato da Marco Pontili 19 novembre 2012 alle 12:01

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>