Image Replacement, nuove tecniche.

Facciamo un ripassino Se hai poca esperienza in merito clicca qui per avere una panoramica completa sull’argomento. Ho letto su […]
Image Replacement, nuove tecniche.

Facciamo un ripassino

Se hai poca esperienza in merito clicca qui per avere una panoramica completa sull’argomento. Ho letto su HTML.it un articolo pubblicato ieri, che illustra 2 nuove tecniche di Image Replacement.

Le due nuove tecniche

Nell’articolo in questione vengono illustrate le due tecniche con le relative porzioni di codice. L’articolo si conclude chiedendo ai lettori di testare sui vari browser il loro corretto funzionamento. Reputo l’image replacement una tecnica che sta alla base della costruzione e del montaggio dei template. Scopiamo insieme se queste due nuove tecniche sono all’altezza anche dei browser più obsoleti come IE6 e IE7.

Jeffrey Zeldman

La tecnica in questione, illustrata sul suo blog ufficiale, viene presentata come una nuova ed elegante tecnica che va a migliorare l’attuale e diffusissima P.I.R. – Phark Image Replacement che utilizza il text-indent negativo per nascondere il testo. (text-indent:-99999px;).

La nuova tecnica invece abbandona il text-indent negativo che a quanto pare creava non pochi problemi in termini di performance a causa del grande riquadro che veniva creato, a favore di uno positivo che spinge il testo quanto basta per fuoriuscire dal nostro elemento, il white-space impostato su nowrap impedisce al testo di cadere a capo e infine l’overflow hidden, nasconde tutto ciò che si trova al di fuori del nostro elemento, per l’appunto la parte testuale.

.hide-text {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

Nicolas Gallagher

Una shorthand porta a zero i valori di line-height e di font-size, mentre la lettera “a”, ci spiega Gallagher, funge da font-family. Il validatore CSS non riteneva valido l’uso di 0/0 come unico valore nella proprietà font, e dato che tutti i browser lo accettano, questo sembrerebbe essere solo un errore nel validatore. Utilizzando invece la sintassi “font: 0px / 0 a” la validazione c’è ma nel codice viene riportata questa “a”. Con Il text shadow impostato su none siamo certi che qualsiasi valore ereditato venga eliminato dal testo. Infine il color transparent è necessario per tutti i browser che non riescono a renderizzre il font-size a zero.

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Risultati dei test

Abbiamo condotto dei test su 3 tipi di elementi e per ognuno abbiamo testato entrambe le tecniche su Internet Explorer dalla versione 6 alla 9.

  • Elemento di Tipo Blocco -> Titolo H2
  • Elemento di tipo blocco trasformato in inline-block -> Paragrafo

I test che abbiamo condotto con la tecnica illustrata da Zeldman hanno portato ad un esito positivo per gli elementi in questione su Internet Explorer 8 e 9. Con le versioni 6 e 7, la tecnica illustrata da Zeldman su questi tipi di elementi non riscontra difetti se non uno strano comportamento, nel caso ci sia una background-image, che porta la stessa a fuoriuscire dal contenitore e a scomparire nel caso venga impostato il background-position su center oppure right!!!

Per quanto riguarda invece il metodo di Gallagher, il testo sulle versioni 6 e 7 ha dei problemi. Viene visualizzata una piccolissima riga di testo su IE6 in entrambi gli elementi mentre su IE7, nel caso in cui venga aggiunto un paddding, il testo anche se piccolissimo viene anche in questo caso mostrato su entrambi gli elementi.

Lascio a voi gli altri esperimenti, miraccomando! Alcuni bug ci sono sopratutto con le vecchie versioni di Internet Explorer. Fammi sapere cosa ne pensi ma soprattutto se intenderai utilizzare una di queste nuove tecniche nei tuoi progetti!

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github