Eventi in CSS – Seconda parte

La guida sugli eventi in css prosegue. In questa seconda parte vediamo come innescare un evento attraverso la pseudo-classe :target.
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

Questa pseudo-classe 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 Consulta il codice
  • Bello!! Questo mi piace.. e non poco!! peccato lo scatto magari con un JS si sistema

    • Grazie Massimo. Si forse con un js si potrebbe sistemare.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github