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#firstIl 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.
Un accordion con i soli CSS
Il tutorial originale da cui prende spunto questa prima demo è Accordion using only CSS di Paul Hayes. Il codice HTML necessario non è affatto complicato:
<div class="accordion">
<div id="item-one" class="section">
<h3><a href="#item-one">Intestazione nr. 1</a></h3>
<div>
<p>Lorem ipsum dolor sit amet....</p>
</div>
</div>
<div id="item-two">
<h3><a href="#item-two">Intestazione nr. 2</a></h3>
<div>
<p>Sed ut perspiciatis...t</p>
</div>
</div>
</div>Ogni sezione dell'accordion è composta da un div contenitore con id univoco. Al suo interno un titolo h3 con un'àncora cliccabile (con il fragment identifier riferito al suo genitore) per l'apertura dell'elemento successivo in ordine di codice, un div con i contenuti testuali, nascosto di default tramite CSS.
Le regole fondamentali che consentono il funzionamento dell'accordion sono due:
.accordion h3 + div {
height:0;
overflow:hidden;
.accordion > div:target h3 + div {
height:150px;
}Oltre alla pseudo-classe CSS3 :target, da osservare anche l'utilizzo del selettore CSS2.1 h3 + div che consente di applicare degli stili personalizzati a ogni elemento div preceduto da un tag h3, se entrambi figli di un elemento genitore identificato da un URI (div:target). In questo caso specifico, attraverso la proprietà height si ottiene l'apertura della sezione dell'accordion e la visualizzazione dei contenuti nascosti. Sfruttando lo pseudo-elemento :before e la proprietà content per il contenuto generato è possibile migliorare l'usabilità e l'aspetto di questo esempio inserendo delle comode freccette (con una sequenza unicode) a segnalare l'apertura di ogni voce:
.accordion > div h3 a:before {
content:"2192";
}
.accordion > div:target h3 a:before {
content:"2193";
}Le transizioni: apertura con effetto smooth!
Chi di voi utilizza una delle ultime versioni di Opera o di un browser Webkit, o la beta di Firefox 4, avrà potuto notare con piacevole sorpresa che l'apertura delle varie sezioni dell'accordion avviene con una transizione graduale. Questo effetto non richiede, come si potrebbe pensare, l'utilizzo di una libreria Javascript di animazione ma è ottenuto con la nuovissima proprietà del modulo CSS3 Transitions. Si tratta di una proprietà sperimentale che alcuni browser hanno implementato tramite dei prefissi proprietari: per le modalità di utilizzo rimando a questo articolo di Simone D'Amico.
.accordion h3 + div {
height:0;
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height .5s ease-in-out;
-o-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
}Uno slideshow di immagini senza Javascript
Questo ultimo esempio prende spunto da un case study di Raphael Goetter. Il markup HTML necessario prevede l'utilizzo di una lista non ordinata con i collegamenti per lo spostamento tra le immagini della galleria che sono contenute nelle voci di un secondo elenco ul. I vari elementi sono posizionati in maniera assoluta, e in particolare i bottoni di navigazione hanno un valore z-index che li pone sempre in primo piano sopra l'immagine visualizzata.
<div id="slideshow">
<ul id="nav">
<li><a href="#slide1">1</a></li>
<li><a href="#slide2">2</a></li>
<li><a href="#slide3">3</a></li>
</ul>
<ul id="slides">
<li id="slide1"><img alt="img1" src="images/img1.jpg" /></li>
<li id="slide2"><img alt="img2" src="images/img2.jpg" /></li>
<li id="slide3"><img alt="img3" src="images/img3.jpg" /></li>
</ul>
</div>Ecco riassunta una parte degli stili CSS necessari alla presentazione della struttura della galleria:
#slideshow {
position:relative;
width:450px;
height:300px;
background:#eeeeee;
}
#slides li {
position:absolute;
top:0;
left:0;
z-index:1;
}
#nav {
position: absolute;
bottom:10px; l
eft:5px;
z-index:10;
}
#nav li {
display:inline;
}Anche in questo caso la pseudo-classe :target viene utilizzata per impostare una proprietà che regola la visibilità dell'elemento individuato. Per sfruttare le transizioni nei browser che le supportano, il codice dell'esempio agisce sul valore della proprietà opacity (altrimenti sarebbe stato sufficiente "giocare" sui valori none e block della proprietà display). Per estendere il supporto a Internet Explorer 8 e versioni inferiori è richiesto l'utilizzo del filto proprietario alpha opacity.
#slides li img {
opacity:0;
filter:alpha(opacity=0);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
#slides li:target {
z-index:5;
}
#slides li:target img {
opacity:1;
filter:alpha(opacity=100);
}Conclusioni
Le due tecniche presentate in questo articolo rappresentano degli interessanti esperimenti CSS3 che per il buon supporto cross-browser fornito possono essere usati con tranquillità anche in ambiente di produzione. Tuttavia è bene sottolineare che questo tipo di approccio non è esente da alcune problematiche e limiti. In particolare, l'utilizzo delle àncore può causare una anomalia in seguito al "click" del navigatore, uno scorrimento fastidioso (ma in realtà del tutto giustificato) della finestra del browser quando la galleria e l'accordion non rientrano completamente nell'area visibile del viewport del browser.
Il codice CSS e gli esempi dell'articolo sono disponibili per il download.
