Sempre più di recente ho visto sviluppatori che utilizzano trucchi per creare stati di commutazione usando puro CSS. Questo ti permette di saltare il JavaScript senza sacrificare l'interazione. Come funziona? È una pratica accettabile?
Oggi esamineremo due metodi distinti per l'utilizzo di una casella di controllo per creare un evento click che scambia tra due immagini utilizzando il buon vecchio HTML e CSS. Concluderemo con una breve discussione sulla semantica e i pro / contro di questa tecnica.
Come scuoiare un gatto
? In pratica si crea una casella di controllo in HTML solo per nasconderlo e rubarne la funzionalità.?Con qualsiasi trucco CSS, ci sono sempre una manciata di modi diversi per realizzare il compito che stai mirando a raggiungere. Quello che faremo qui oggi è imparare come utilizzare le checkbox per creare due stati che possono essere alternati usando solo HTML e CSS. Dato questo obiettivo, possiamo facilmente arrivare con almeno due modi per realizzarlo. Anche all'interno di queste due strategie principali, scoprirai che ci sono più strade che potremmo prendere.
Entrambi i metodi implicano alcuni discutibili trucchi CSS. In sostanza, crei una casella di controllo in HTML solo per nasconderlo e rubarne la funzionalità. Il primo metodo semplicemente allunga la casella di controllo alla dimensione totale dell'area che desideri rendere cliccabile e non utilizza alcuna etichetta.
Il secondo metodo utilizza l'interessante funzionalità delle etichette associate a una casella di controllo. Anche se si nasconde la casella di controllo, l'etichetta può essere effettivamente disegnata, posizionata e cliccata per attivare l'interruttore, dandoci un elemento completamente flessibile per lavorare con due stati possibili.
Entriamo e osserviamo da vicino ciascuno di questi metodi.
Metodo 1
Il primo modo per attaccare questo esperimento è quello di fare in modo che la nostra casella di controllo diventi tutta la dimensione del nostro oggetto e poi lo nasconda. Per fare questo, tutto ciò che serve tecnicamente è un div che contiene una casella di controllo con una classe applicata. Se vuoi andare oltre, puoi aggiungere altri attributi come? Nome ?. Inseriremo anche un'immagine, quindi avremo qualcosa da attivare.
Ora è il momento di eseguire l'atto discutibile di trasformare la nostra intera immagine in una grande casella di controllo. Per fare ciò, seleziona il pulsante? classe che abbiamo impostato prima e impostiamo la stessa altezza e larghezza che abbiamo sempre usato.
Quindi, imposta la posizione su assoluto e reimposta la sinistra, la parte superiore, il margine e il riempimento, solo per essere sicuro che il punto di partenza sarà dove lo vogliamo. Ciò funzionerà in tandem con il nostro posizionamento relativo precedente, in modo che la nostra casella di controllo possa ora occupare l'intero spazio dell'immagine. Per assicurarti che la casella di controllo rimanga in cima a tutto, imposta il suo valore z-index su qualcosa di arbitrariamente alto.
Infine, imposta l'opacità della casella di controllo su 0 per nasconderla completamente. La cosa interessante qui è che nascondere la casella di controllo non disabilita la sua funzionalità. Così ora, quando fai clic in qualsiasi punto dell'immagine, accendi e spegni la casella di controllo.
La nostra casella di controllo nascosta funziona, ma non l'abbiamo ancora configurata per fare qualcosa. Come accennato in precedenza, vogliamo attivare l'opacità dell'immagine HTML, in modo che possiamo impostare un selettore che individua tutti gli input con il tasto? Toggle? classe selezionata, quindi utilizzare il selettore di pari livello per selezionare l'immagine e impostarne l'opacità su zero. Per rendere l'effetto un po 'più bello, lancia una transizione semplice.
Provalo
Con quello, il metodo uno è tutto finito. Di seguito dovresti essere in grado di vedere un collegamento alla pagina CodePen. Dai un'occhiata e poi torna qui per il resto!
demo: Clicca qui per vederlo su CodePen.
Metodo 2
Con il primo metodo fuori mano, è il momento di esplorare il metodo n. 2, che prevede l'utilizzo di un'etichetta di casella di controllo. Questo viene aggiunto direttamente prima dell'input. Si noti che il? Per? valore corrisponde all'ID per la casella di controllo. Inoltreremo entrambe le immagini nel nostro codice HTML per aggirare le cose.
CSS
Ancora una volta, inizieremo aggiungendo alcuni stili di base al div. Non c'è niente di veramente speciale qui, solo alcune dimensioni e posizionamento.
Ora per qualcosa di nuovo.Ricorda che questo metodo implica l'utilizzo dell'etichetta della casella di controllo anziché della casella di controllo stessa. Per fare ciò, imposta il display per bloccarlo e dargli alcune dimensioni. Abbiamo incluso il testo? Click Me? nel codice HTML sopra riportato, quindi avremo bisogno di applicare anche lo stile. In sostanza, stiamo solo trasformando l'etichetta per dargli l'aspetto di un pulsante.
Al passaggio del mouse, ho modificato i colori e aggiunto il puntatore del mouse per favorire l'idea che si tratti di un elemento cliccabile.
Ora è il momento di nascondere nuovamente la casella di controllo, ma lo faremo in modo un po 'diverso in questo modo solo per mostrarti che possiamo. Assegnando il posizionamento assoluto e alcuni valori di posizionamento folli, spariamo alla vista della casella di controllo reale. Ricorda, questo funziona perché possiamo ancora fare clic sull'elemento etichetta per rimuovere l'interruttore.
Per finire questa versione, abbiamo bisogno di altri tre blocchi di stile. Il primo posiziona la seconda immagine direttamente sotto la prima immagine. Da qui, stiamo usando lo stesso codice che abbiamo fatto l'ultima volta per cambiare l'opacità su alternanza e aggiungere una transizione piacevole.
Provalo
Abbiamo completato il secondo metodo ora, provalo di seguito facendo clic sul collegamento.
demo: Clicca qui per vederlo su CodePen.
Questo lavoro di JavaScript non è?
Senza dubbio, questa è una cosa divertente. Con solo un po 'di CSS e HTML, siamo stati in grado di creare un piccolo evento di click. I vantaggi qui sono chiari: codice breve, nessun JavaScript, facilità di implementazione, ecc.
Sfortunatamente, entrambi i metodi sopra descritti sono piuttosto tabù in alcuni ambienti. Questo perché sono entrambi davvero una bastardizzazione dell'elemento checkbox. Non stiamo davvero usando l'elemento semanticamente? intendendo come doveva essere veramente usato, invece stiamo solo rubando la sua funzionalità e avvolgendola attorno ad altri oggetti.
Quindi quanto è grave questa offesa? Dipende da chi stai parlando. Un codificatore della vecchia scuola ti dirà che questa è una brutta notizia. Usa JavaScript dummy, ecco a cosa serve! Nonostante ciò, molti dei tutorial CSS più incredibili pubblicati online di recente utilizzano trucchi simili a questo (una variante utilizza invece i pulsanti di scelta), sebbene lo facciano senza spiegarlo in modo approfondito. Alcuni di questi sono così fantastici, semplicemente non si può resistere a lanciare semantica al vento e superare ciò che prima era possibile con solo CSS.
Con questo articolo ho cercato di spiegare come questa tecnica stia lavorando su un livello base e sottolinea che è, per lo meno, considerato controverso.
Dovrei usare più spesso?
Scrivo tutorial CSS per vivere. Ogni giorno cerco di pensare a grandi cose che posso insegnarti. Metodi come questi presentano un dilemma interessante. Aprono così grandi possibilità di creare incredibili demo CSS puri. Tuttavia, alcuni potrebbero considerarlo una perdita di tempo data l'applicazione semantica discutibile.
Qui te lo restituisco, i lettori di Design Shack. Cosa pensi? Dovrei mostrarti cose interessanti, anche se fa dei sacrifici semantici? Vuoi vedere alcune demo più interessanti costruite con i due metodi descritti in questo articolo? Come potresti migliorare questo trucco? Mi piacerebbe sentire i tuoi pensieri!