Il supporto di IE8 per il generated content offrirà molte nuove
possibilità agli sviluppatori. In questo articolo vedremo una delle sue possibili
applicazioni pratiche per realizzare una semplice tecnica di image replacement.
Ci sono moltissime tecniche di Image Replacement e ho descritto le mie favorite
in Image Replacement: le tre tecniche migliori.
Si tratta di tecniche robuste con un ottimo supporto cross-browser. La tecnica che presenterò
qui è invece per molti versi sperimentale, dato il suo supporto limitato a IE8, Opera, Firefox
e Safari; degrada comunque in versione testuale sugli altri browser e sfrutta quindi il principio
del progressive enanchment di cui abbiamo parlato in questo articolo.
Il lettore a questo punto si chiederà: se disponiamo di tecniche robuste e collaudate
per ottenere risultati con miglior supporto, che bisogno c'è di presentare una nuova tecnica?
I motivi principalmente sono due. Il primo è che si tratta di una valida introduzione pratica
a una caratteristica poco conosciuta; il secondo è che la creatività nel campo del web design
va sempre alimentata.
La GCIR (Generated Content Image Replacement) che presenterò qui potrà forse essere usata
con una certa sicurezza tra due o tre anni, quando la diffusione di IE8 sarà ampia: l'articolo
prevede comunque una versione alternativa che estende il concetto così da coprire un ventaglio
di browser più ampio ed essere utilizzata da subito, con le stesse caratteristiche delle tre
tecniche migliori che ho citato pocanzi.
GCIR - Image Replacement con il Generated Content
Presentiamo subito il primo esempio che accompagna l'articolo.
Se guardate la pagina con IE8, Opera, Firefox o Safari, il titolo dovrebbe apparire così:
Mentre su IE fino alla versione 7 inclusa, e più in generale sui browser obsoleti,
il risultato è questo:
L'esempio utilizza un semplice titolo testuale nel markup:
<h2 id="products">I nostri prodotti</h2>
Come si potrà notare non vi sono elementi aggiuntivi nel codice, ma solo un semplice
titolo h2 con un attributo di id. L'idea è piuttosto semplice: attraverso il generated content
viene fornito un aggancio grafico che contiene l'immagine per il rimpiazzamento grafico;
questa verrà poi traslata verso l'alto così da coprire il titolo testuale. Ecco il codice
CSS:
h2#products{height: 40px;line-height: 40px;overflow: hidden;
font-size:35px;color:#5A66B5}
h2#products:after{content:url(titolo.png);display: block;
margin-top: -40px}
La prima regola dell'esempio stabilisce altezza e altezza di
linea per il titolo pari all'altezza dell'immagine oltre ad impostare overflow,
font-size e colore del testo.
Attraverso la seconda regola viene generato un elemento fittizio che contiene l'immagine
per il replacement attraverso la proprietà content e che verrà inserito subito
dopo il titolo testuale grazie alla pseudo-classe :after.
L'elemento così generato viene poi reso block-level
e traslato dell' altezza dell'immagine grazie a un margine superiore negativo.
Da notare infine come la seconda regola non dichiari dimensioni per l'elemento
generato: essendo block-level infatti sarà largo quanto il titolo e alto
quanto basta a contenere l'immagine.
La tecnica appena vista, al pari della cover-up span
con cui ha diverse similutiduni, ha due difetti intrinsechi: richiede che venga stabilita
un'altezza al titolo e non consente immagini semi-trasparenti per il replacement.
L'idea di far seguire il titolo da un elemento che verrà traslato verso l'alto in modo
da coprire il titolo testuale può essere spunto per una variante che, sebbene richieda markup
aggiuntivo, ovvia ai limiti del supporto parziale del generated content. Vediamola.
Una variante più robusta
Nel secondo esempio per estendere la compatibilità cross-browser è stato necessario
l'utilizzo di uno span aggiuntivo che assume il ruolo del generated content del primo
esempio:
<h2 id="products">I nostri prodotti <span></span>< /h2>
Vediamo il codice CSS dell'esempio per intero:
h2#products{height: 40px;line-height: 40px;
font-size: 35px;color: #5A66B5;margin-bottom: 10px}
h2#products span{display: block;width: 400px;height: 40px;
background: url(titolo.png);position: relative;top: -40px}
Al titolo h2 vengono assegnate altezza e altezza di linea, insieme ad alcune proprietà
sul testo. Lo span viene reso block-level e di dimensioni pari a quelle dell'immagine
di sfondo, per poi essere traslato della sua altezza verso l'alto grazie al
posizionamenti relativi,
a differenza dei margini relativi usati nel primo esempio: ho riscontrato infatti
una migliore resa cross-browser in questo caso.
Il supporto della tecnica vista nel secondo esempio è esteso alle versioni di IE dalla
5 alla 8, oltre che a Firex, Opera e Safari, ed è quindi piuttosto ampio.
I due esempi completi di codice e immagine sono disponibili per il download. Alla prossima.
