CSS  »  Articoli  »  CSS 3 

Il modulo dedicato ai selettori e alle pseudo-classi è sicuramente uno dei più importanti dei CSS3, anche se le feature introdotte godono a torto di una minore popolarità rispetto alle nuove scenografiche proprietà di altri moduli, per esempio quelle che consentono tra le altre cose di ottenere box con angoli arrotondati, ombreggiature, trasformazioni 2D, etc.

In questo articolo esploreremo a fondo alcune modalità di utilizzo della pseudo-classe CSS3 :target, e scopriremo che tramite i selettori introdotti nella nuova versione dei fogli di stile è possibile realizzare interessanti effetti per interfacce web, come accordion, slideshow e gallerie di immagini o menu con navigazione a tab. E senza ricorrere all'utilizzo di Javascript, almeno per quanto riguarda i browser più moderni.

La pseudo-classe :target serve a identificare una risorsa all'interno di un documento HTML che può essere l'àncora di destinazione di un collegamento interno: a ogni àncora corrisponde un url (o meglio un URI), costituito nella sua parte terminale dal simbolo cancelletto # seguito da una stringa (identificatore di frammento), che funge da collegamento ad un certo elemento all'interno del documento, il cui valore dell'attributo id corrisponde esattamente all'identificatore di frammento specificato.

Il selettore :target può essere allora utilizzato per formattare l'elemento corrente di destinazione, attribuendo degli stili nella regola CSS, proprio come ci è abituale fare con altri tipi di pseudo-classi (ad esempio :hover e :focus). L'analisi di un esempio elementare può facilitare la comprensione del meccanismo delle àncore e dare un'idea delle modalità d'uso di questa pseudo-classe:

// CSS 
p.highlight:target { background:#dddddd; font-weight:bold; }

// HTML
<a href="#first">Primo paragrafo</a>
<p id="first" class="highlight">Lorem ipsum dolor sit amet...</p>

// ESEMPIO DI URI CORRELATO ALLA RISORSA
http://domain.com/base.html#first

Il supporto di :target nei browser

La pseudo-classe :target è supportata da Internet Explorer 9, dal browser Opera (a partire dalla versione 9.5), da Safari (versione 3.0 e successive) e da tutte le versioni di Firefox e Chrome; per estenderne il supporto alle vecchie versioni di Internet Explorer (6, 7 ed 8), qualche riga di codice Javascript è purtroppo necessaria: l'ideale è includere con un commento condizionale lo script IE9.js del mitico Dean Edwards, che ci consentirà di utilizzare in questi browser anche la maggior parte degli altri nuovi selettori CSS3.

Allo stesso scopo, è possibile utilizzare in alternativa Selectivzr, che però per funzionare richiede anche l'inclusione di uno dei più diffusi framework Javascript o di un selector engine.

Le pagine di esempio sono state realizzate con alcuni dei nuovi tag semantici HTML5, e sempre in riferimento alla compatibilità con i vecchi browser Microsoft, è necessario utilizzare lo script html5shim di Remy Sharp, o in alternativa, il più completo Modernizr.

Possiamo finalmente analizzare i file principali che è necessario includere nell'head del codice HTML per il funzionamento di tutte le demo di questo articolo:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<link href="css/html5reset-1.6.1.css" rel="stylesheet" type="text/css">
<link href="css/default.css" rel="stylesheet" type="text/css">

Oltre al foglio di stile default.css, contenente le regole base per la presentazione del layout strutturale e degli elementi testuali, è stato incorporato anche un comodo CSS di reset disponibile su HTML5 Doctor.

Altri articoli

Altre guide

Altre newsletter