Formazione continua

Impaginare con i CSS3: la pseudo-classe :target

marzo 27, 2012 by Giuseppe Maldarizzi | 0 Commenti

Rieccoci al secondo appuntamento con i CSS3 e le proprietà principali per impaginare una pagina web, meglio se HTML5, funzionale ed interattiva grazie alle nuove funzionalità introdotte.

Tutorial precedenti

- La proprietà Border Radius

La pseudo-classe :target

Sicuramente avrai già utilizzato altre pseudo classi con i CSS2, come ad esempio :hover e :active. I CSS3 ne introducono una nuova - :target - che ti permetterà di applicare a runtime lo stile in base al target passato come parametro dell'url.

Il target è infatti un suffisso preceduto dal simbolo # - cancelletto - (es. www.miosito.it/pagina#mytarget) che indica un "ancora" all'interno del tuo codice html. Visto che è più facile a farsi che a dirsi, cerco di spiegarti questa funzionalità come un semplice esempio.

Esempio pratico

Supponiamo che tu voglia creare una pagina con un indice al quale sono linkati sotto, nella stessa pagina quindi, i suoi contenuti, tipo questa:

<h1>FactoryLab by Debugger</h1>
	
<nav>  
	<ul>  
		<li><a href="#html5mobile">HTML5 applicato al mobile</a></li>  
		<li><a href="#map">Realizzare un percorso su mappa con HTML5</a></li>  
		<li><a href="#css3">La proprietà border radius dei CSS3</a></li> 
	</ul>  
</nav>  
		
<article id="html5mobile">  
	<h2>HTML5 applicato al mobile</h2>  
	<p>Vorrei mostrarti come è semplice determinare l'orientamento di un dispositivo mobile e la sua posizione nello spazio.</p>  	
</article>  

<article id="map">  
	<h2>Realizzare un percorso su mappa con HTML5</h2>  
	<p>Lo scopo finale di questo tutorial sarà quello di creare in poche righe di codice javascript una semplice pagina web dove l'utente potrà visualizzare sulla Google Map il percorso per raggiungere un indirizzo da noi predefinito senza digitare la sua posizione di partenza, con il dettaglio testuale del percorso da effettuare.</p>  
</article>  

<article id="css3">  
	<h2>La proprietà border radius dei CSS3</h2>  
	<p>Con questo post inauguro una serie di articoli sulle proprietà del CSS3 presentandoti gradualmente alcune caratteristiche fondamentali per impaginare testi ed immagini nei tuoi siti web.</p> 
</article>

Come puoi vedere ho creato un semplice listato di articoli ed utilizzato come id di ognuno un target. Quest'ultimo è quindi linkato all'indice in alto attraverso la proprietà href del link e preceduto dal simbolo #.

Adesso puoi integrare il tuo CSS ed in particolare la pseudo-classe :target che avrà questo scopo: quando clicchi sul link dell'indice l'articolo corrispondente verrà evidenziato tramite uno sfondo colorato aggiungendo un bordo arrotondato e cambiando il colore del testo:

article:target
{
   color: #333;
   background-color: #87ceeb;
   border: 2px solid #ff8c00;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
}

Il risultato sarà una pagina web leggera ed interattiva senza utilizzare javascript.

Ecco la demo di quanto realizzato.

Dato che il target viene passato come parametro dell'url, puoi accedere direttamente alla pagina passandogli l'url corrispondente - ad esempio http://factorylab.debugger.it/Demo/CSS3-target-class.html#css3 - e selezionare da subito il relativo articolo.