Odds är: svävar var den allra första pseudoklassväljaren som du någonsin lärt dig. Heck, det kan vara den enda du någonsin lärt dig. Vi alla älskar denna underbara lilla funktion och använder den hela tiden som ett sätt att skapa berikade användarupplevelser.
Min fråga idag kan förändra hur du tänker på svävar för alltid:? Gör ubiquity av pekskärmar svängar händelser föråldrade ?? Sätt på ett annat sätt, dödade iPhone: sväva? Läs vidare för att se hur iOS hanterar en CSS-svänghändelse, vad det betyder för dig som utvecklare, och hur du borde eller borde inte använda svävarhändelser i dina mönster.
Ode Att byta
Jag älskar CSS3. Det har gjort ren CSS-utveckling så mycket mer robust och platt ut roligt. Funktioner som övergångar och keyframe-animationer ger oss den typ av fascinerande interaktion som vi en gång var tvungna att vända sig till JavaScript för att erhålla.
När du pratar om animerade händelser via ren CSS är dina alternativ ganska begränsade. Mål ger oss ett sätt att göra något medan användarna har sin mus ner, men en klick och håll-åtgärd är inte nödvändigtvis intuitiv på webben. Det finns andra sätt att förfalska en klick-interaktion, till exempel kanske modding av radioknappar i ett fullblåst bildspel, men dessa tekniker är fortfarande ganska sällsynta.
Med keyframes har vi möjlighet att starta en animation så snart sidan laddas och till och med slinga det oändligt. Det här är inte alltid önskvärt men kan komma med en anständig processorhastighetsslag för komplexa animationer.
Sedan är det svävar. Det är en enkel, enkel att implementera, lätt att förstå åtgärder som du som utvecklare kan utnyttja för att göra användarinteraktionen lite bättre. Med övergångar kan du blekna från en färg till en annan, gradvis minska eller öka storleken på ett objekt och till och med skicka det i 3D-utrymme om det är vad du är i. Med svävar har du det perfekta sättet att sparka av alla dessa effekter.
Jag handlar om hovereffekter och har skrivit upp flera artiklar som ger gratis exempel på mina favoritstickor.
Trubbel i paradiset
Det finns ett problem med svänghändelser som ett primärt interaktionsmedel, eller kanske borde jag säga miljoner och miljoner problem i händerna på människor över hela världen: smartphones.
Under årtionden har vi haft skärmmarkörer, ett konstigt men allmänt accepterat sätt att interagera med digitalt innehåll. Touchscreen-enheter, antingen finger eller pekskärm, har funnits i nästan lika länge som markören, men nivån på industrimättnad var alltid ganska låg och låt oss möta det, ingen kunde hantera "real" webb någonstans nära tillräckligt bra för att ens bry sig om.
Sedan kom iPhone. Det var inte den första smartphone eller den första pekskärmstelefonen, men det var definitivt en pionjär enhet i världen av en icke-vattnad, touchbaserad mobil webb. Snabbspolning några år och världen är full av iOS- och Android-enheter, som i stor utsträckning tar sig till den vanliga gamla, oförstörda webben.
De flesta av oss är nu så bekanta eller ännu mer bekanta med touch-driven webb interaktioner än vi är med sina markörstyrda motsvarigheter. Det stora problemet är naturligtvis att telefoner inte känner för fingret för närvarande? Svävar? ovanför ett element. Detta innebär att erfarenheten inte direkt översätts från en metod för interaktion till en annan.
Det här låter som ett litet problem, men borsta inte det av. Touch-interaktioner är fundamentalt annorlunda än den traditionella modellen och följaktligen måste många av våra favorittrick, som svävarhändelser, omprövas. Gör de inte?
Vad gör IOS med en svängare?
Det är uppenbart att pekskärmar uppvisar ett problem med svänghändelser. En av frågorna som kom till mitt ögonblick var om det här var mitt problem som webbutvecklare eller ett hinder som enhetsproducenterna tvingades ta itu med när de först utvecklade sina pekbaserade webbläsare. Om svävar är ett grundläggande sätt att vi interagerar med webben, kanske de befogenheter som står för det på något sätt.
Det bästa sättet att ta reda på vad som händer när du slänger en svänghändelse på en pekskärm är att prova det. Så låt oss koda ett super snabbt och smutsigt exempel för att testa och se vad som händer. I grund och botten kastade jag bara en massa bilder i en div och satte dem att rotera på svävaren. Här är CSS:
Live-testet
Nu när vi har någonting att testa oss, låt oss kolla på en pekskärmsenhet. Ta din iPad eller iPhone och tryck här eller på bilden ovan för att starta demoversidan.
Självklart kommer inget att inträffa magiskt om du sveper fingret över en bild, men vad händer om du knackar på en bild?
Det visar sig att svängningseffekten faktiskt fungerar ganska bra, det har helt enkelt översatts till en knopphändelse. I våra demoer roteras ingen av bilderna som standard, då när du trycker på en bild uppträder den animerade rotationen.
Intressanta observationer
Så vi har fastställt att svänghändelser översätter för att knacka på händelser i iOS, och från vad jag kan berätta, förekommer en liknande effekt på Android (eventuellt med enstaka dubbelkran som krävs). Det är viktigt att notera dock inte bara att dessa händelser inträffar men på vilket sätt de förekommer och påverkar olika omständigheter.
Till att börja med borde du vara medveten om det faktum att när du har tappat på ett objekt, är det enda sättet att avbryta den svävarhändelsen att trycka på ett annat element som orsakar en svänghändelse att inträffa.Till exempel, i den här demonstrationen, när du pekar på stycket eller bakgrunden, upphör inte att flytta händelsen, bara att knacka på en annan bild gör det.
Den viktigaste uppenbarelsen kommer när vi inser att de flesta svänghändelser förekommer på föremål som också fungerar som länkar till andra föremål. Det betyder att vi har både en svängare och ett klickhändelse på samma sak.
Som vi vet gör pekskärmsenheter att klicka på händelser också på knackhändelser, så vad händer när vi kombinerar två olika skrivbordshändelser som båda översätts till samma pekskärmshändelse? Som vi kan se i denna demo börjar animeringen när du trycker på objektet, men klickhändelsen hoppar snabbt och omdirigerar sidan, även om animationen inte är klar.
Med tanke på att svänghändelser ofta används för att informera användaren om att ett objekt är klickbart, gör den här upptäckten dem i stor utsträckning värdelös i det avseendet.
Ska du överge Hover Events?
Frågan som är kärnan i denna diskussion är huruvida svängpseudoväljaren har någon plats i din CSS i en tid där så många människor surfar på webben med pekskärmsenheter. Så vad är svaret?
Vad jag är bekymrad är svaret en rungande? Ja ,? även om det kommer med flera bestämmelser. Först är det intressant att notera att vissa projekt kommer att fungera bra på många pekskärmsenheter trots deras beroende av svävarhändelser. Ett exempel är ett animerat miniatyrgalleri från en ny Design Shack-artikel, som fungerar fantastiskt på min iPad. Ett annat exempel kan vara en navigeringsmeny som visas på svävaren, varav många fungerar ganska bra på pekskärmsenheter trots den gemensamma trenden att motsatsen är sant.
Trots detta rekommenderar jag fortfarande absolut att inte förlita sig på svävarhändelser som en kritisk metod för interaktion på mobila enheter. Att göra det är att sätta upp dig för massor av användarens huvudvärk. Med tanke på utbudet av olika pekskärmsbrowsare och enheter kan du inte vara säker utan en löjlig nivå av testning som svävar händelser på samma sätt på alla.
Följaktligen är mitt råd alltid att anta, oavsett sannolikheten för uttalandet, att svängmodellmodellen inte kommer att fungera för smarthphone- och tablettanvändare. Detta antagande hindrar dig dock inte från att ställa in svängväljaren i allt ditt arbete och till och med använda några fina svängareffekter en gång i taget. Tänk bara på att användarens framgång inte bör bero på denna åtgärd utan att det blir mer av en progressiv förbättringssituation där alla kan använda din webbplats på sin mest grundläggande nivå och skrivbordsbrukare kan njuta av några visuella spänningar som pekskärmsanvändare kanske aldrig någonsin se.
Optimering via Media Query
Om du vill gå vidare och tydligt skilja upplevelserna från dina pekskärm och skrivbordsbrukare, kan du skriva upp några enkla JavaScript men jag är en stor fan av att använda CSS när det är möjligt så att mitt sinne omedelbart gravitates mot en media-frågestyrd lösning.
Du kan använda mediafrågor för att säkerställa att både mobila och stationära enheter har en optimerad upplevelse. En lista med länkar kan till exempel ha ett litet klickbart område och en trevlig svängningseffekt på ett skrivbord medan det finns ett stort klickbart område och ingen svängningseffekt på en mobilenhet.
Men låt oss säga att vi ville gå vidare och faktiskt göra storskärmswebbplatsen helt beroende av att en svävarhändelse fungerar som den ska. Detta är acceptabelt eftersom vår mediafråga kommer att se till att mobila enheter har en annan modell, eller hur? Kanske inte.
Framtidssäkra
Under hela denna artikel har jag ständigt kontrasterat pekskärmsenheter med stationära datorer. Det inneboende antagandet här är att alla pekskärmsanordningar har små skärmar. Det förekommer för mig att även om detta är bekvämt korrekt i mest fall idag är det ett helt felaktigt antagande som särskilt bryter ner på lång sikt.
Jag tror personligen att pekskärmsinteraktionen bara blir mer populär under de kommande åren. En pekskärmsp dator eller bärbar dator kan vara en sällsynthet nu, men jag är inte säker på att det är ett säkert antag att detta kommer att hålla sant långsiktigt. Det betyder att även om det är ett bra sätt att skilja mellan pekskärm och markörbaserade enheter idag, är det förmodligen inte den bästa praxisen att komma in eftersom morgondagens tjugo tums skärmar kan använda touch-interaktion lika mycket eller mer än de gör markörer.
Använd Hover klokt
Är svävaren utdöd? Nej. Kommer det att bli utrotat när som helst snart? Antagligen inte. Är det alltmer farligt att förlita sig på svävarhändelser som ett primärt sätt att interagera med användaren? Absolut.
Jag använder fortfarande svängstilar och fortsätter även att räkna ut funktionsövningstrenor, men jag vill definitivt klargöra att jag tror att de dagar som tillåter din webbplats att förlita sig på att sväva att fungera är långt borta. Om inte nästa iPhone känner att fingret svävar över displayen, beror pekskärmen på denna interaktionsmodell, så att du normalt ska anta att den helt enkelt inte fungerar på dessa enheter (vare sig de är små eller stora).
Vad tror du? Är du försiktig med hur du applicerar svängstilar i CSS? Var ritar du linjen för att använda svävar som en punkt av interaktion? Tror du att pekskärmarna fortsätter att öka i ubiquity? Jag skulle gärna höra dina tankar.