Di tutte le parti della specifica CSS3 che i browser stanno implementando, ce n'è una
già abbastanza diffusa e di grande potenziale che potrebbe valere la pena di
approfondire.
Mi riferisco alla pseudoclasse :target.
L'oggeto in questione è pensato per individuare gli elementi di una pagina
che sono il bersaglio di un link con identificatore di frammento (ovvero le
ancore interne, cioè quegli URI che terminano con #id-elemento).
Il concetto è più o meno lo stesso della ben più famosa (e utilizzata)
pseudoclasse :hover, l'unica differenza sta solo nell'oggetto puntato.
Al momento in cui scrivo, :target è già supportato da Safari, Firefox e
Opera 9.5. Purtroppo non è ancora implementato in Internet Explorer
(confidiamo nella prossima versione 8) ma in compenso i browser con cui
possiamo sfruttarne le potenzialità occupano tra tutti, per il momento, una
percentuale di mercato pari a circa il 25% e questo valore è sufficente da
giustificarne l'uso in determinati contesti come progressive enanchement (un
miglioramento completamente degradabile quando non supportato).
Come funziona :target: un esempio base
Per capire come funziona, sviluppiamo un esempio base che sia familiare a
tutti: creeremo alcuni div posizionati in modo assoluto, in modo da emulare
il comportamento delle finestre del nostro desktop:
<div id="f1" class="finestra"></div>
<div id="f2" class="finestra"></div>
<div id="f3" class="finestra"></div>
Diamo uno stile:
div.finestra {
background: #ececec;
color: #333;
position: absolute;
margin: 0px;
padding: 0px;
z-index: 1;
}
div#f1 { }
div#f2 { }
div#f3 { }
Aggiungiamo un piccolo menu su lista:
<ul>
<li><a href="#f1">Finestra 1</a>
<li><a href="#f2">Finestra 2</a>
<li><a href="#f3">Finestra 3</a>
</ul>
Quello che vogliamo ottenere è una modifica dello z-index dell'elemento
puntato dal menu, in modo tale che risulti in primo piano.
Per ottenere questo, basta semplicemente definire la seguente regola:
div.finestra:target { z-index: 5; }
Che, in italiano corrente si legge: "Imposta lo z-index a 5 a tutte le div
di classe .finestra che sono il bersaglio di un' ancora interna".
Se avete un browser che supporta :target, potete osservare l'esempio all'opera.
Migliorare la navigabilità interna delle pagine
Se ci troviamo a gestire una singola pagina, divisa in sezioni di
contenuto differente, raggiungibili da link interni, allora :target può
venirci incontro per migliorarne notevolmente l'usabilità.
<!-- Il nostro elenco puntato -->
<ul>
<li><a href="#sez1">Sezione 1</a>
<li><a href="#sez2">Sezione 2</a>
<li><a href="#sez3">Sezione 3</a>
<li><a href="#sez4">Sezione 4</a>
<li><a href="#sez5">Sezione 5</a>
</ul>
<!-- Il corpo della pagina diviso in sezioni -->
<h2 id="sez1">Sezione 1</h2>
<p> ..... </p>
<hr />
<h2 id="sez2">Sezione 2</h2>
<p> ..... </p>
<hr />
<h2 id="sez3">Sezione 3</h2>
<p> ..... </p>
<hr />
<h2 id="sez4">Sezione 4</h2>
<p> ..... </p>
<hr />
Definendo una semplice regola di target possiamo evidenziare il titolo
della sezione puntata dai link:
h2:target { background: #ffff00; }
Oppure, ancora, combinare l'uso di altri selettori per selezionare
porzioni ancora diverse. Come i paragrafi successivi della sezione:
h2:target + p { background: #ff3333; }
Oppure, di nuovo, per selezionare tutte le parole marcate da
<strong> dentro ai paragrafi:
h2:target + p > strong { background: #000000; color:
#ffffff; }
O ancora, selezionare solo la prima linea dei paragrafi della sezione:
h2:target + p:first-line { background: #ff0000; }
Insomma: le possibilità sono molteplici, l'unico limite in questo senso è
l'implementazione nei browser dei vari selettori e delle pseudo-classi che
si intendono usare.
Anche se l'esempio presentato può sembrare di scarsa utilità pratica, vi
invito a riflettere come possa essere applicato con successo in situazioni
più comuni: ad esempio per gestire la trovabilità delle informazioni negli
archivi di un blog, permettendo di evidenziare con un click tutti i post
presenti in una determinata categoria e nascondere i restanti; oppure ancora
per incrementare l'usabilità dei menu a tendina, che sono caratterizzati da
un alto livello di annidamento di link. Una volta imparato ad utilizzare lo
strumento, le idee su come applicarlo con successo verrano da sole.
Sviluppare un menu a tab con :target
Un menu a tab è costituito da alcuni pannelli che vengono visualizzati uno
alla volta, in mutua esclusione.
Attualmente per implementarne uno che funzioni su tutti i browser occorre
ricorrere a Javascript per gestirne la visualizzazione. Il metodo che stiamo
per vedere fa uso di :target e la sua realizzazione non richiede altro che
puro CSS. Purtroppo però, come gia accennato nell'introduzione, questa
soluzione non è cross-browser (si spera però che lo sarà in futuro!) e quindi
prendetela come un esercizio di stile.
Vediamo per prima cosa il markup:
<!-- Le Tab -->
<a href="pannello1">Pannello 1</a> <a
href="pannello2">Pannello 2</a>
<!-- I pannelli -->
<p id="pannello1"> .... </p>
<p id="pannello2"> .... </p>
Per praticità l'esempio è ridotto all'essenziale (due link e due
paragrafi), il suo scopo è solo quello di apprenderne il funzionamento. Tutti
gli abbellimenti del caso sono lasciati alla vostra fantasia.
Adesso, tramite soltanto due linee di CSS faremo funzionare
il tutto:
p { display:none; }
p:target { display: block; }
La prima regola nasconde tutti i paragrafi (che sarebbero, idealmente, i
nostri pannelli).
La seconda regola si occupa di far tornare visibile il relativo pannello
puntato da uno dei link (i tabs).
Ecco una prova su strada di quanto visto.
Conclusioni
Come visto dai pochi esempi proposti il potenziale di :target è notevole.
Anche se è ancora presto per poterlo utilizzare efficacemente per soluzioni
complesse, vi invito comunque a farne uso come progressive enanchement:
grazie ai browser di nuova generazione i CSS3 sono sempre più vicini, e non
c'è motivo per non cominciare a familiarizzare con ciò che viene
implementato.
Per concludere eccovi alcuni link di approfondimento sull'argomento:
- Improving Usability of whitin-page links, è un articolo apparso su Dev Opera. Si Approfondisce l'uso di :target per migliorare l'usabilità dei lin interni delle pagine
- Fun with Target, è il primo esempio trattato nell'articolo, quello delle finestre, molto più sviluppato.
- Stay on :target, articolo apparso su Vitamin in cui si mostrano alcune applicazioni di :target.
