Eventi in CSS – Prima parte

In questo post, suddiviso in 4 parti, vedremo dei piccoli hack per generare degli eventi con il css. Si tratta ovviamente di sperimentazioni.
Eventi in CSS – Prima parte

Clicchiamo Con il CSS

In questi ultimi anni abbiamo assistito ad un notevole cambiamento dei css. Ora possiamo fare cose che un tempo realizzavamo con javascript o immagini decorative, come ad esempio gli angoli arrotondati, le sfumature, layout mobile ed altro ancora. L’unica cosa che ancora manca è gestire gli eventi in css, intendo quelli brevi, come ad esempio un semplice click, quello che davvero ci scoccia realizzarlo in javascript.

Checkbox: primo step

Il metodo checkbox è quello più comune per gestire un evento click, tutto si basa su una casella di controllo. Vediamo un esempio.

<input type="checkbox" />
<p class="change">Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.</p>

.change{
    color: green;
}

input[type=checkbox]:checked ~ .change{
    color: red;
}

Come puoi notare, l’esempio si basa sulla pseudo-classe :checked e sul selettore generale fratello (~), sostituibile solo in questo caso anche con il selettore fratello adiacente (+). In sostanza, con l’ultima dichiarazione, si scaturisce quest’azione: “a casella selezionata gli elementi con classe .change diventeranno rossi”.

Miglioriamo il tutto

Lo so, hai ragione, graficamente è un pò grezzo, rimedio subito 🙂

<input id="toggle" type="checkbox" />
<label for="toggle">Clicca</label>
<p class="change">Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.</p>
input[type=checkbox] {
    display:none
}

label{
    display: block;
    background: #08C;
    padding: 5px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 2px;
    color: white;
    font-weight: bold;
}

input[type=checkbox]:checked ~ .change {
    color: red;
}

Ho inserito un’etichetta (label) associandole, tramite l’attributo for, la casella di controllo nascosta.

Risultati interessanti

Diciamo che ora graficamente è più accettabile, ma applicandosi di più si possono creare cose molto notevoli. Dai un’occhiata a questi post:

Pro e Contro

L’aspetto a favore è sicuramente il sistema binario, cioè cliccando una seconda volta si ritorna allo stato iniziale. Questo consente eventi click concatenati.

Il primo difetto è innanzitutto l’inserimento di codice extra per far si che funzioni (checkbox, label). Secondo, gli elementi devono essere obbligatoriamente fratelli, ed infine richiede soluzioni alternative per utilizzarlo sugli smartphone (The advanced checkbox hack (fixing both Android 4.1.2 and iOS 4/5 bugs).

Se il post è stato di tuo gradimento non dimenticare di condividerlo 😉 e per qualsiasi chiarimento puoi utilizzare il box dei commenti o la nostra fanpage. A presto con la seconda parte.

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github