Eventi in CSS – Seconda parte

- Pseudo-classe :target Eccoci ritrovati con gli eventi generati in css. La prima parte è stata dedicata al metodo :checkbox, ora vedremo quello con la pseudo-classe :target. Target Un altro metodo per generare un evento con i css è l’utilizzo della pseudo-classe :target. Questa permette di associare degli stili all’ elemento nel momento in cui l’URI [...]
Eventi in CSS – Seconda parte

Pseudo-classe :target

Eccoci ritrovati con gli eventi generati in css. La prima parte è stata dedicata al metodo :checkbox, ora vedremo quello con la pseudo-classe :target.

Target

Un altro metodo per generare un evento con i css è l’utilizzo della pseudo-classe :target. Questa permette di associare degli stili all’ elemento nel momento in cui l’URI di riferimento è generato da un clic. Ecco l’esempio del post con annesso codice:

<a href="#click">Clicca</a>
<p id="click">Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.</p>

#click:target{
    color:red;
}

Male per IE

Il supporto dei browser pecca solo su internet explorer. Qui puoi consultare la tabella di compatibilità:

Altri esempi

Pro e contro

I punti a favore sono in sostanza due, il primo riguarda la leggerezza del codice, non servono particolari aggiunte di html per farlo funzionare. Secondo, questo metodo è molto utile per evidenziare determinate sezioni all’interno della pagina.

Il primo aspetto negativo è innanzitutto quella situazione “scattosa” che si viene a creare al momento del click, quando si evidenza una sezione situata sotto alla piega della pagina, a mio parere è un pò fastidiosa. Secondo, funziona solo su elementi che hanno un id. La terza nota negativa è l’inserimento dell’evento click all’interno della cronologia, un casino se vuoi tornare alla pagina precedente del sito.

Siamo arrivati alla conclusione della seconda parte. Mi raccomando, non perderti il continuo :) e se il post è stato di tuo gradimento non dimenticare di condividerlo ;) A presto con la terza parte.

Provalo subito

Prova la demo Scarica il codice

2 commenti to “Eventi in CSS – Seconda parte”

Lascia un commento!