Traduzione dell’articolo “CSS CLICK EVENTS” del blog “CODROPS“
Negli ultimi anni, noi abbiamo assistito alla meravigliosa espansione di lingue per front-end soprattutto HTML, con le specifiche HTML5, e CSS con le specifiche CSS3.
Ora possiamo fare un sacco di cose che non potevamo prima senza JavaScript o immagini, come gli angoli arrotondati, i gradienti, i layout reattivi, griglie, trasparenza nei colori e tanto altro ancora.
Ma una cosa che abbiamo sempre mancante è la possibilità di gestire gli eventi di clic con i CSS.
In realtà, alcune persone pensano che noi non dovremmo avere questa opzione, dal momento che le interazioni sono più come una sorta di oggetto JavaScript. Capisco l’idea, ma mi imfastidisce sempre utilizzare JavaScript per un evento click molto semplice.
Comunque, a partire da oggi, CSS non fornisce un modo ufficiale per gestire un evento click in CSS.
Ma ci sono alcuni trucchi molto interessanti che possiamo utilizzare per “rilevare” un clic utilizzando CSS solo, senza una sola riga di JavaScript, e questo è ciò che ci accingiamo a parlare di oggi.
DISCLAIMER
Questo post mostrerà le possibilità del CSS e qualche trucco intelligente.
Non è chiaro per i casi di utilizzo di “vita reale”. Per favore, considerare l’intero articolo come un parco giochi per sperimentare, non come un tutorial per gestire gli eventi clic sul tuo sito Web o applicazione.
Inoltre, alcune di queste tecniche non sono ben supportati dai browser, significa che è ancora più borderline; abbiamo intenzione di divertirci spingendo i limiti del CSS.
IL TRUCCO DEL CHECKBOX
Aaaaah, il checkbox. Sono sicuro che tutti avete sentito parlare del trucco del checkbox prima.
È probabilmente il modo più comune per gestire un evento click in CSS.
Essa si basa su, Beh, una casella di controllo.
Che cosa è cool su una casella di controllo è il fatto che è binario. Esso è attivo o non attivo.
Non non c’è nessun “via di mezzo”. Ecco perché l’hack di checkbox è un modo abbastanza affidabile per innescare un evento click in CSS. Facciamo un esempio.
L’HTML:
<input type = "checkbox" >
<p class = "to-be-change" > Sto per diventare rosso! E' s gonna essere legen ... Attendere per esso ... </ p>Il CSS
.to-be-change {
colore : nero;
}
input [tipo = checkbox] : spuntato ~ .to-essere-modificato {
color : rosso;
}Come si può vedere, si basa sulla pseudo-classe “:checked” e sul selettore “~” .
Si prega di notare che funziona anche con il selettore fratello adiacente “+” .
In sostanza, si dice “se la casella è selezionata, i seguenti elementi con la classe “.to-be-changed” saranno in rosso.
Ok, una casella di controllo non è molto bella, ma si può assolutamente fare qualcosa di più nascondendo la casella di controllo e associare un’etichetta ad esso. Qualcosa di simile a questo forse:
< input type = "checkbox" id = "toggle" >
< label for = "toggle" > Cliccami! </ label >
< p class = "to-be-change" > Sto per diventare rosso! Sarà legen ... Aspetta ... </ p >Così nascondiamo la casella di controllo e utilizziamo l’etichetta per attivare l’evento click.
input [type = checkbox] {
position : absolute;
sopra : - 9999px ;
a sinistra : - 9999px ;
}
etichetta {
display : block;
sfondo : # 08C ;
imbottitura : 5px ;
border : 1px solido RGBA (0,0,0, 0,1);
bordo-raggio : 2px ;
colore : bianco;
peso carattere : grassetto;
}
input [tipo = checkbox] : spuntato ~ .to-essere-modificato {
color : rosso;
}In questo modo, hai qualche tipo di pulsante che innesca il cambiamento di colore sul paragrafo. Non è così cool? Spegnete il pulsante e il colore torna a nero ovviamente.
(Notare che ci sono diverse possibilità per nascondere la casella di controllo, il più evidente di tutti è “display: none”.)
Potete vedere una demo qui: demo hack Checkbox
PRO E CONTRO
PRO
- Binario, checked o non checked
- Cliccando nuovamente si torna al primo stato
- Permette eventi click concatenati
CONTRO
- Gli elementi devono condividere lo stesso padre (fratelli)
- Richiede alcuni extra HTML (input, label, ecc.)
- Richiede due soluzioni alternative per farlo funzionare su browser mobile (consultare ulteriori letture)
ULTERIORI LETTURE
Ci sono fantastiliardi di demo con la casella di controllo hack dato che chiaramente è il modo più comune per gestire un evento click con CSS puro. Tuttavia, ci sono probabilmente alcune cose che si consiglia di leggere su di esso:
- The advanced checkbox hack (fixing both Android 4.1.2 and iOS 4/5 bugs) di Tim Pietrusky
- Stuff you can do with the checkbox hack di Chris Coyier
- Button switches with checkboxes di Hugo Giraudel
Il metodo :target
C’è un altro modo, noto come “fake”, per fare un evento click con CSS, utilizzando la pseudo classe “:target”.
Questa pseudo-classe è molto simile al “:hover” in modo che corrisponda solo uno scenario specifico.
L’evento speciale per la pseudoclasse “:target” dipende da ciò che noi chiamiamo un “identificatore di frammento”.
Per dirla semplice, questa pseudo-classe si riferisce a un hashtag che si può vedere a volte alla fine dell’URL.
Così si abbina quando l’hashtag e l’ID di un elemento sono le stesse.
ESEMPIO:
HTML
<input type="checkbox">
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>CSS
.to-be-changed {
color: black;
}
.to-be-changed:target {
color: red;
}Fondamentalmente, quando si fa clic sul collegamento (href = “#id”), l’URL cambia e si va all’ancoraggio #id nella pagina. In questo momento, l’elemento avendo questo id può essere mirato con la pseudo classe “:target”.
Tu puoi vedere una demo qui: :target demo
PRO E CONTRO
PRO
- CSS molto leggero
- Perfetto per evidenziare le sezioni
CONTRO
- Pasticci con la cronologia del browser
- Rende una pagina “saltellante” (quando si raggiunge l’ancoraggio)
- Richiede un tag di ancoraggio per innescare l’hashtag o un hack URL
- Può interessare solo un elemento (poiché gli ID sono univoci)
- Alcun modo di tornare allo stato primo senza un altro hashtag, un link o un hack URL
ULTERIORI LETTURE
- On :target di Chris Coyier
- What’s the deal with :target in CSS di Joshua Johnson
- Highlighting a section with :target di Jonathan Snook
- Mimic a click event with CSS di Jeffrey Way
Il metodo :focus
Continuiamo con un altro modo utilizzando una pseudo-classe “:focus” questa volta.
È praticamente la stessa idea, tranne che non si aspetta un cambiamento di URL.
Essa si basa sull’attenzione dell’utente su un particolare elemento.
Quando siete su una pagina web, è possibile premere il tasto tab per spostarsi tra i vari elementi della pagina.
È particolarmente utile per andare da un campo a altro senza dover utilizzare il mouse.
È anche utilizzato da persone non vedenti o ipovedenti per navigare attraverso il sito.
Che cosa è importante da notare è che alcuni elementi possono essere concentrati, come link, input e simili, e qualche altri non possono, come paragrafi, divisioni e molti altri.
In realtà si può, ma sarà necessario aggiungere l’attributo tabindex con un valore numerico.
ESEMPIO
HTML
<span tabindex="0">Click me!</span>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>CSS
span:focus ~ .to-be-changed {
color: red;
}Così, quando si fa clic sullo “span” o lo si seleziona con il tasto tab, diventa selezionato e parte la pseudo-classe “:focus”. Il selettore di pari livello adiacente fa il resto. Abbastanza facile, giusto? Se non volete pasticciare con il tabindex per qualsiasi motivo, è possibile utilizzare semplicemente un link con un “#href”. Funziona lo stesso.
Potete vedere una demo qui:demo modo messa a fuoco
PRO E CONTRO
PRO
- HTML e CSS molto leggero
- Ottimo per la navigazione o simili
CONTRO
- Richiede un elemento attivabile o l’attributo tabindex
- Parte solo quando l’elemento è focalizzato (che significa cliccando altrove non funzionerà)
ULTERIORI LETTURE
Pure CSS clickable events di Ryan Collins
Il TRUCCO DELLA TRANSIZIONE
Questo è probabilmente il modo più subdolo per gestire un evento click in CSS.
Seriamente ragazzi, questa è follia.
Questa tecnica deriva da Joel Besada ed è sempre stato uno dei miei preferiti trucchi CSS.
L’idea è quella di conservare uno stile CSS in una transizione di CSS. Sì, avete letto è giusto, una transizione di CSS. In realtà, l’idea è abbastanza semplice. Essa si basa sull’applicazione di un “pseudo-infinito” ritardo a un cambiamento al fine di evitare di tornare al valore predefinito. Può sembrare complicato, ma è abbastanza facile, credetemi. Si prega di avere uno sguardo al codice.
HTML
</code>
<pre><code>.to-be-changed {
color: black;
}
input[type=checkbox]:checked ~ .to-be-changed {
color: red;
}
</code>CSS
.to-be-changed {
transition: all 0s 9999999s;
}
span:active ~ .to-be-changed {
transition: all 0s;
color: red;
}L’idea dietro la prima dichiarazione è di ritardare qualsiasi cambiamento di circa 116 giorni per assicurarsi che le modifiche rimangano una volta che l’hai impostato. Non è infinito, ma una specie , chiaro?
Ma non vogliamo applicare le modifiche 116 giorni dopo aver cliccato, vogliamo che sia impostato immediatamente! Quindi l’idea è di eseguire l’override del ritardo durante il click ( pseudoclasse “:active”) per applicare le modifiche. Poi quando si uscirà dal click, la vecchia proprietà di transizione cambierà, torna l’impostazione del ritardo a 9999999s, impedendo di tornare allo stato predefinito.
Vedere anche l’articolo Transition hack demo
PRO E CONTRO
PRO
- Follemente intelligente
- Mantiene il valore esatto quando rilasciate il clic, anche se la transizione non è ancora finita (vedi sotto)
“[…] il fatto è che è possibile terminare una transizione a metà e la proprietà mantiene ancora il valore esatto che aveva a quel punto nella transizione. Così per esempio, diciamo che abbiamo una transizione lineare da opacità 1 a 0 più di due secondi, ma la lascia correre solo per un secondo. Il valore di opacità dovrebbe ora essere bloccato a 0,5 perché il ritardo impedisce di tornare indietro. Se dovessimo eseguire nuovamente il passaggio di opacità, esso sarebbe continuato da 0,5 invece di ricominciare dall’inizio.”
CONTRO
- Decente, ma non è supportato da tutti i browser (vedi IE9 e Opera Mini)
- Funziona solo con i valori delle transition
- Non c’è alcun modo di ottenere di nuovo il primo stato
- Non è veramente infinito se puoi aspettare 116 giorni
ULTERIORI LETTURE
Sicuramente si dovrebbe leggere l’articolo originale da Joel Besada:
Maintaining CSS style states using infinite transition delays di Joel Besada
Moving a character on a gamepad with pure CSS di Joel Besada
IN CONCLUSIONE
A partire da oggi, possiamo rilevare i click con i CSS.
Voglio dire, questo è possibile, anche se è praticamente un hack in ogni caso.
Alcuni casi sono meglio di altri per alcune situazioni, ma tutto sommato, non è qualcosa che possa essere utilizzato in un progetto reale.
Jr. Atkins ha bloggato su questo pochi mesi fa. Ha scritto un’intera proposta sugli stati toggling in CSS. Uno sguardo al suo lavoro:
toggle-states: none | sticky? | infinity (initial: none) toggle-group: none | (initial: none) toggle-share: none | # (initial: none) toggle-initial: (initial: 1)
…dove:
- toggle-states è la funzione di base che si trasforma per attivare funzionalità on/off. Nessuno significa non alternare, 2 o più implementa diversi stati di controllato.
- toggle-group implementa la funzionalità di pulsante. Se si fa clic su un elemento “toggle-group” impostato su un non-valore none, tutti gli elementi che lo stesso “toggle-group” di condivisione verranno impostati automaticamente al primo stato (disattivato)
- toggle-share implementa la funzionalità di etichetta. Quando si fa clic su un elemento con “toggle-share”, si comporta come se si avesse cliccato tutti gli elementi che puntano a esso.
- toggle-initial imposta lo stato iniziale del toggle
Tuttavia, ha ammesso che la sua idea non è perfetta e può ancora presentare alcuni problemi e paradossi.
Non entrerò ulteriormente in argomento poiché sarebbe fuori dall’ambito di questo articolo, ma suggerisco caldamente di leggerlo. Anche se è incompleto, è brillante.
Quindi passiamo a JavaScript. È probabilmente il modo migliore per ottenere coerenza e l’affidabilità. Tuttavia, se si vuole divertirsi facendo le cose con “CSS puro”, allora si potreste trovare questo articolo utile.
da un lato si noti che Chris Coyier in CSS Tricks ha scritto un post sul blog su gestione doppio clic con CSS puro circa 2 anni fa. Esso può essere vecchio, ma ancora è molto interessante vedere alcuni dei modi per ottenere (o non ancora ottenuti) lì.
Comunque, grazie mille per la lettura ragazzi. Si prega di assicurarsi di porre domande o mostrare qualsiasi lavoro correlato!
Traduzione dell’articolo “CSS CLICK EVENTS” del blog “CODROPS“
