Approfondimento su :target

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:

Diamo uno stile:

Aggiungiamo un piccolo menu su lista:

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:

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à.

Definendo una semplice regola di target possiamo evidenziare il titolo della sezione puntata dai link:

Oppure, ancora, combinare l’uso di altri selettori per selezionare porzioni ancora diverse. Come i paragrafi successivi della sezione:

Oppure, di nuovo, per selezionare tutte le parole marcate da <strong> dentro ai paragrafi:

O ancora, selezionare solo la prima linea dei paragrafi della sezione:

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:

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:

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.