Le probabilità sono:: hover è stato il primo vero selettore di pseudo classe che tu abbia mai imparato. Diamine, potrebbe essere l'unico che tu abbia mai imparato. Tutti noi amiamo questa piccola e deliziosa funzionalità e la usiamo costantemente come un modo per creare esperienze utente arricchite.
La mia domanda oggi potrebbe cambiare il modo in cui pensi al passaggio del mouse per sempre:? L'ubiquità dei touchscreen rende obsoleti gli eventi al passaggio del mouse? In altre parole, l'iPhone ha ucciso: al passaggio del mouse? Continua a leggere per vedere come iOS gestisce un evento hover CSS, cosa significa per te come sviluppatore e come dovresti o non dovresti usare gli eventi di hover nei tuoi progetti.
Ode per il passaggio del mouse
Adoro i CSS3. Ha reso lo sviluppo di CSS puro molto più solido e divertente. Funzionalità come le transizioni e le animazioni dei fotogrammi chiave ci portano il tipo di interazione affascinante che abbiamo dovuto trasformare in JavaScript per ottenere.
Se stai parlando di eventi animati tramite puro CSS, le tue opzioni sono piuttosto limitate. Target ci offre un modo per fare qualcosa mentre gli utenti hanno il mouse verso il basso, ma un'azione di click and hold non è necessariamente intuitiva sul web. Esistono altri modi per simulare un'interazione di clic, ad esempio modificare i pulsanti di opzione in una presentazione completa, ma queste tecniche sono ancora piuttosto rare.
Con i fotogrammi chiave, abbiamo la possibilità di avviare un'animazione non appena la pagina viene caricata e persino ripetuta all'infinito. Tuttavia, ciò non è sempre auspicabile e può comportare un discreto successo di velocità del processore per animazioni complesse.
Poi c'è il passaggio del mouse. È un'azione semplice, facile da implementare e facile da comprendere che puoi utilizzare come sviluppatore per rendere l'interazione dell'utente un po 'migliore. Con le transizioni, puoi sfumare da un colore a un altro, ridurre o aumentare gradualmente le dimensioni di un oggetto e persino inviarlo ruotando nello spazio 3D se è quello che ti interessa. Con il passaggio del mouse, hai il modo ideale per dare il via a tutti questi effetti.
Sono tutto sugli effetti al passaggio del mouse e ho scritto diversi articoli che forniscono esempi gratuiti dei miei trucchi preferiti.
Guai in Paradiso
C'è un problema con gli eventi hover come mezzo principale di interazione, o forse dovrei dire milioni e milioni di problemi nelle mani di persone in tutto il pianeta: gli smartphone.
Per decenni abbiamo avuto cursori sullo schermo, uno strano ma ampiamente accettato modo di interagire con i contenuti digitali. I dispositivi touchscreen, indipendentemente dal fatto che il dito o lo stilo siano diretti, sono rimasti in circolazione per quasi il tempo del cursore, ma il livello di saturazione del settore era sempre piuttosto basso e ammettiamolo, nessuno di loro poteva gestire il? Reale? web ovunque vicino abbastanza bene da disturbare anche con.
Poi è arrivato l'iPhone. Non era il primo smartphone o il primo telefono touchscreen, ma era sicuramente un dispositivo pionieristico nel mondo di un web mobile non annacquato e basato su touch. Avanzano di pochi anni e il mondo è pieno di dispositivi iOS e Android che accedono in gran parte al vecchio e semplice web non adulterato.
La maggior parte di noi ora ha familiarità o familiarità con le interazioni web tattili rispetto alle controparti basate su cursore. Il grosso problema, naturalmente, è che i telefoni non percepiscono al momento il tuo dito? sopra un elemento. Ciò significa che l'esperienza non si traduce direttamente da un metodo di interazione a un altro.
Sembra un piccolo problema, ma non spazzarlo via. Le interazioni tattili sono fondamentalmente diverse rispetto al modello tradizionale e di conseguenza molti dei nostri trucchi preferiti, come gli eventi hover, devono essere ripensati. Non loro?
Cosa fa iOS con un passaggio del mouse?
Ovviamente, i touchscreen presentano un problema con eventi al passaggio del mouse. Una delle domande che mi sono venute in mente subito è se questo sia il mio problema come sviluppatore web o un ostacolo che i produttori di dispositivi sono stati costretti ad affrontare quando hanno sviluppato i loro browser basati su touch. Se il passaggio del mouse è un modo fondamentale che interagiamo con il web, forse i poteri che possono essere considerati in qualche modo.
Il modo migliore per capire cosa succede quando si lancia un evento hover su un touchscreen è provarlo. Quindi analizziamo un esempio super veloce e sporco per testare e vedere cosa succede. Fondamentalmente, ho appena lanciato un gruppo di immagini in un div e le ho impostate per ruotare al passaggio del mouse. Ecco il CSS:
Il test dal vivo
Ora che abbiamo qualcosa da testare, controlliamolo su un dispositivo touchscreen. Prendi il tuo iPad o iPhone e tocca qui o sull'immagine qui sopra per avviare la pagina demo.
Ovviamente, non accade nulla di magico se si passa il dito sopra un'immagine, ma cosa succede se si tocca un'immagine?
Si scopre che l'effetto hover funziona davvero bene, è stato semplicemente tradotto in un evento tap. Nelle nostre demo, nessuna delle immagini viene ruotata di default, quindi quando si tocca un'immagine, si verifica la rotazione animata.
Osservazioni interessanti
Quindi abbiamo stabilito che gli eventi di hover si traducono in tap sugli eventi in iOS, e da quello che posso dire, un effetto simile si verifica su Android (eventualmente con un doppio tocco occasionale richiesto). È importante notare, tuttavia, non solo che questi eventi si verificano ma Come si verificano e influenzano circostanze diverse.
Per i principianti, dovresti essere consapevole del fatto che una volta che hai toccato un oggetto, l'unico modo per cessare questo evento di hover è quello di toccare un altro elemento che causa un evento di hover.Ad esempio, in questa demo, toccando il paragrafo o lo sfondo non cessa l'evento hover, solo toccando su un'altra immagine.
La rivelazione più significativa arriva quando ci rendiamo conto che la maggior parte degli eventi al passaggio del mouse si verificano su elementi che fungono anche da collegamenti ad altri elementi. Ciò significa che abbiamo entrambi un evento di hover e click sullo stesso oggetto.
Come sappiamo, i dispositivi touchscreen trasformano gli eventi click in eventi tap, quindi cosa succede quando combiniamo due diversi eventi desktop che si traducono entrambi nello stesso evento touchscreen? Come possiamo vedere in questa demo, l'animazione inizia quando si tocca l'elemento, ma l'evento click salta rapidamente dentro e reindirizza la pagina, anche se l'animazione non è terminata.
Dato che gli eventi di hover vengono spesso utilizzati per informare l'utente che un elemento è selezionabile, questa scoperta li rende ampiamente inutili a tale riguardo.
Dovresti abbandonare gli eventi al passaggio del mouse?
La domanda che è al centro di questa discussione è se lo pseudo-selettore del passaggio del mouse ha o meno spazio nel tuo CSS in un momento in cui così tante persone navigano sul Web con dispositivi touchscreen. Quindi qual è la risposta?
Per quanto mi riguarda, la risposta è clamorosa? anche se questo viene fornito con diverse clausole. Innanzitutto, è interessante notare che alcuni progetti funzioneranno benissimo su molti dispositivi touchscreen nonostante la loro dipendenza da eventi di hover. Un esempio è una galleria di miniature animate di un recente articolo di Design Shack, che funziona meravigliosamente sul mio iPad. Un altro esempio potrebbe essere un menu a discesa di navigazione che appare al passaggio del mouse, molti dei quali funzionano abbastanza bene sui dispositivi touchscreen, nonostante la comune convinzione che sia vero il contrario.
Nonostante ciò, consiglio comunque di non fare affidamento sugli eventi hover come metodo critico di interazione sui dispositivi mobili. Per fare ciò, ti stai preparando per un sacco di mal di testa da parte dell'utente. Data la gamma di diversi browser e dispositivi touchscreen, non puoi essere certo senza un livello ridicolo di test che gli eventi di hover traducono allo stesso modo su tutti loro.
Di conseguenza, il mio consiglio è di assumere sempre, indipendentemente dalla verità della dichiarazione, che il modello di interazione al passaggio del mouse non funzioni per gli utenti di smarthphone e tablet. Questa ipotesi, tuttavia, non ti impedisce di disegnare il selettore del volo stazionario in tutti i tuoi lavori e persino di usare qualche volta effetti fantastici al passaggio del mouse. Ricorda che il successo dell'utente non deve dipendere da questa azione, ma piuttosto da una situazione di miglioramento progressivo in cui tutti possono utilizzare il tuo sito al livello più elementare e gli utenti desktop possono godere di alcuni brividi visivi che gli utenti touchscreen potrebbero non vedere.
Ottimizzazione tramite Media Query
Se vuoi andare oltre e differenziare chiaramente le esperienze del tuo touchscreen e degli utenti desktop, potresti scrivere qualche semplice JavaScript, ma sono un grande fan dell'uso di CSS ovunque sia possibile, quindi la mia mente gravita immediatamente verso una soluzione basata su query multimediali.
Puoi utilizzare le query multimediali per garantire che i dispositivi mobili e desktop abbiano un'esperienza ottimizzata. Ad esempio, un elenco di collegamenti potrebbe avere una piccola area cliccabile e un bel effetto di passaggio del mouse su un desktop, pur avendo un'ampia area cliccabile e nessun effetto di passaggio del mouse su un dispositivo mobile.
Ma diciamo che volevamo andare oltre e rendere il sito di grande schermo completamente dipendente da un evento di hover per funzionare correttamente. Questo è accettabile perché la nostra query sui media assicurerà che i dispositivi mobili abbiano un modello diverso, giusto? Forse no.
A prova di futuro
In questo articolo ho costantemente confrontato i dispositivi touchscreen con i computer desktop. L'assunto implicito qui è che tutti i dispositivi touchscreen hanno schermi piccoli. Mi viene in mente che, mentre questo è opportunamente corretto in maggior parte casi oggi, è un assunto del tutto errato che si spezza soprattutto nel lungo periodo.
Personalmente credo che l'interazione con il touchscreen diventerà sempre più popolare negli anni a venire. Un PC touchscreen o un laptop potrebbe essere una rarità ora, ma non sono sicuro che sia un presupposto sicuro che questo rimarrà vero a lungo termine. Ciò significa che anche se l'utilizzo di una query multimediale per rilevare le dimensioni dello schermo potrebbe sembrare un ottimo modo per distinguere tra touchscreen e dispositivi basati su cursore oggi, probabilmente non è la migliore pratica per entrare in quanto gli schermi da venti pollici di domani potrebbero utilizzare l'interazione tattile tanto o più di loro cursori.
Usa Hover saggiamente
L'hover è estinto? No. Si estinguerà presto? Probabilmente no. Sta diventando sempre più rischioso affidarsi agli eventi hover come mezzo principale di interazione con l'utente? Assolutamente.
Continuerò a utilizzare gli stili di passaggio del mouse e persino a continuare a dare risalto ai divertenti tutorial sull'effetto al passaggio del mouse, ma voglio assolutamente chiarire che penso che i giorni in cui il tuo sito si è basato sul passaggio del mouse sulla funzione non siano più disponibili. A meno che il prossimo iPhone non rilevi il dito sospeso sul display, i touchscreen complicano questo modello di interazione abbastanza da dover assumere che non funzioni semplicemente su questi dispositivi (che siano piccoli o grandi).
Cosa pensi? Stai attento a come applichi gli stili di hover nei CSS? Dove traccia la linea per l'utilizzo di hover come punto di interazione? Pensi che i touchscreen continueranno ad aumentare in ubiquità? Mi piacerebbe sentire i tuoi pensieri.