Spotlight con i CSS

Recentemente c'è la tendenza ad avere sezioni grafiche in evidenza,
tipicamente composte da tre o quattro elementi, principalmente sulla home page.
Tendenza di cui ho parlato in La regola del 3 e del 4
sul blog citando 3 little buckets
in cui vengono presentati alcuni siti che fanno uso di tali sezioni, che ho pensato
di denominare per brevità spotlight, ovvero "riflettori".

Lo scopo degli spotlight è molteplice:

• Evidenziare prodotti e servizi che il sito, o l'azienda che rappresenta, offre
• Rafforzare visivamente alcune sezioni del menu principale
• Costituire una sorta di menu aggiuntivo, se non il vero e proprio menu principale
• Costituire un ausilio alla navigazione introduttiva al sito

Ci sono davvero moltissime possibilità della realizzazione di spotlight con i
CSS, a partire da elementi senza grafica ma solo colori di sfondo, oppure
con testo normale e sfondi fino ad arrivare a versioni totalmente grafiche.
Ed è proprio su questo approccio implementativo che focalizzeremo l'articolo,
attraverso due esempi pratici.

Ecco quindi il primo esempio, di cui vediamo uno screenshot:

Per quanto riguarda la grafica, ho usato Inkscape
e mi sono liberamente ispirato alla home page di Quickeo,
soprattutto per quanto riguarda i colori. Possiamo ora procedere con HTML e CSS dell'esempio
di base.

Il markup

Il markup dell'esempio è piuttosto semplice, e
strutturalmente si dovrebbe rappresentare con una semplice lista non ordinata con
dei link. In realtà, per questioni di accessibilità, libertà di personalizzazione
e flessibilità, all'interno di ciascun link viene inserito uno span vuoto,
prima del testo vero e proprio.

Ciò ci consente di usare la tecnica di image replacement nota come Cover-up span
di cui ho parlato nell'articolo Image
replacement: le tre tecniche migliori. Ecco il markup:

Da notare come, oltre all' id="spotlight" attribuito alla lista, si
sia assegnato un id a ciascuno dei list-item li, così da identificarli
univocamente: sl1, sl2 e sl3. In casi reali, nomi un po' più indicativi sarebbero
da preferire. Questo è tutto per quanto riguarda il markup, siamo pronti a procedere
con il CSS.

Il CSS dell'esempio di base

Il CSS dell'esempio, seppur piuttosto breve, è abbastanza denso concettualmente.
Per prima cosa c'è da evidenziare che viene usata un'unica immagine di sfondo
che combina le tre sezioni: questo ci permette di rispiarmiare qualcosa sul
peso delle immagini, oltre che offrirci una maggiore comodità di realizzazione:

Ciascuno elemento dello spotlight è grande 240 per 170px, e l'intera immagine
misura 740 pixel in larghezza.

Per quanto riguarda l'implementazione, vengono usati i posizionamenti assoluti,
di cui abbiamo parlato non da molto nell'articolo
I posizionamenti assoluti.
Questa strategia di sviluppo si rivela un po' più pratica rispetto ai float in
questo caso, soprattutto considerando che gli elementi dello spotlight hanno dimensioni
fisse e note a priori, così come il loro contenitore, ovvero la lista.

In merito alla cover-up span, rimando alla pagina
relativa dell'articolo sulle tecniche di image replacement:
basti sapere che in sostanza lo span vuoto va proprio a coprire il link che lo contiene e il relativo testo,
sostituendo quindi il testo con l'equivalente grafico, ma garentendo al contempo
la fruibilità dei link anche a immagini disabilitate.

Prima di procedere con il codice, vediamo brevemente i passi della realizzazione
del CSS. In sostanza si tratta di:

1. Posizionare relativamente la lista, così da consentire il posizionamento
   assoluto al suo interno, e specificarne le dimensioni
2. Eliminare margini, padding e marcatore da lista e list-item
3. Definire un colore tenue per i link. Questi verranno mostrati prima del
   caricamento dell'immagine e nel caso in cui le immagini siano disabilitate
   nel browser dell'utente
4. Posizionare assolutamente i tre list-item all'interno della lista, definendone
   le dimensioni pari a quelle dei tre elementi grafici
5. Posizionare assolutamente gli span all'interno dei link. Questi si riferiranno
   in realtà al loro contenitore più prossimo che sia posizionato relativamente o assolutamente: in
   questo caso quindi ai list-item. Verranno poi attribuite le dimensioni pari a quelle dei list-item.
6. Si definirà quindi per gli span lo sfondo, il background-position, uno z-index
   tale da coprire i link.

Questi concettualmente i vari step dello sviluppo del CSS dell'esempio.
A questo punto non rimane che presentare il relativo codice:

Da notare che in alcuni casi le dichiarazioni comuni sono state accorpate in una singola
regola per brevità e ottimizzazione del codice, e che si è evitato di specificare per il primo
span il background-position, visto che si tratta di una dichiarazione superflua.
Il nostro esempio
è così ultimato, e siamo pronti a spingerlo un po' oltre, aggiungendo un bell'effetto rollover.
Sarà argomento della seconda parte dell'articolo, in cui vedremo tra l'altro come
sia stato sistemato un difetto di Internet Explorer 5 e 5.5. Non mancate!

Esempio 2: aggiungere il rollover

Nel secondo esempio, rispetto al primo,
abbiamo l'effetto rollover: passando il mouse su uno dei tre elementi dello spotlight si noterà come questo ottenga
maggior risalto visivo, quasi per accompagnare il potenziale click dell'utente.

Le modifiche per ottenere questo secondo esempio sono davvero minime. La prima,
e forse più impegnativa, è soprattutto grafica: bisogna infatti preparare un'immagine
che combina, oltre ai tre elementi in stato normale, i tre elementi in fase :hover.

Per quanto riguarda il CSS dell'esempio,
a parte l'immagine di sfondo, il CSS dell'esempio
precedente è totalmente riutilizzabile: in più, in questo caso, dovremo aggiungere
le regole per il rollover.

In sostanza, in fase :hover dei link andremo quindi a intervenire sulle coordinate
dell'immagine di sfondo degli span. A tal proposito, ricordo che per il background-position
vanno indicate nell'ordine la coordinata x e la coordinata y. Per la x, valori positivi traslano
lo sfondo verso destra, mentre valori negativi lo traslano verso sinistra; Per quanto riguarda
la coordinata y, valori positivi spostano lo sfondo verso il basso, quelli negativi verso l'alto.

Ecco quindi il CSS del secondo esempio per intero,
in cui le ultime tre regole sono proprio quelle per gestire il rollover:

Questo è tutto per ciò che riguarda il CSS dell'esempio: rivediamolo.

Sistemare le cose su Internet Explorer 5.x e 6

Entrambi gli esempi visti (primo e secondo), senza i dovuti accorgimenti per le versioni di Internet
Explorer fino alla 6 compresa, soffrirebbero di qualche piccolo difetto di resa. In IE6,
nel secondo esempio, i link permangono graficamente in stato :hover anche quando si sposta il mouse;
mentre nelle versioni 5 e 5.5 il cursore non si presenta con la tipica forma "a manina" sugli span
in entrambi gli esempi e nel secondo non si manifesta il rollover.

Per risolvere i problemi, e sistemare così la resa dei due esempi sulle versioni di IE dalla 5
alla 6 bastano due semplici regole:

La prima regola, apparentemente ininfluente, è invece in grado di attivare il rollover del
secondo esempio su IE5.x e sistemarlo su IE6, mentre la seconda attribuisce il cursore "a manina" su IE 5 e 5.5:
questo è indispensabile all'utente per riconoscere che sta passando il cursore su un link.
C'è da dire però che il valore hand per la proprietà cursor
non rientra nelle specifiche CSS, ma è una soluzione proprietaria di IE.

Per non incorrere in eventuali errori di interpretazione degli altri browser, e consentire allo stesso
tempo la validazione del foglio di stile principale, le due regole sopra sono state spostate
in un file CSS specifico per Internet Explorer che verrà servito attraverso il
commento condizionale.

Anche il foglio di stile principale dei due esempi è stato sistemato in CSS esterno, rendendo
così la sezione head della pagina leggera. Ecco il codice HTML per i due fogli di stile del secondo
esempio:

Conclusioni e download

Abbiamo visto in questo appuntamento come sia possibile realizzare con HTML minimale, una sola immagine
e poche regole CSS una sezione spotlight visivamente accattivante e funzionale. La compatibilità degli esempi è buona:
sono stati testati con successo sulle versioni di Internet Explorer dalla 5 alla 7, oltre che sulle ultime versioni
di Firefox, Opera e Safari.

Unico neo di un approccio simile è proprio nella grafica: il mio consiglio è di usare
nella realizzazione delle immagini per il replacement un font con sufficiente contrasto
e abbastanza grande... e se possibile, cercare di mantenere il peso totale dell'immagine
al minimo.

Per sezioni visivamente importanti come quelle dei due esempi, non è difficile
arrivare a 100-200 Kbyte di peso: qui ho usato il formato PNG che
ha una compressione loseless, ovvero senza perdita; ma in casi reali sarebbe
stato forse preferibile usare immagini JPG con una qualità tra 90 e il 95.
È vero, il risultato potrà non essere "pulito" come per le PNG, ma
il risparmio di Kbyte potrebbe essere notevole.

Esempi e immagini sono disponibili per il download. Alla prossima.