Dodirna akcija - CSS-trikovi

Anonim

touch-actionNekretnina u CSS vam daje kontrolu nad učinkom touchscreen interakcija s elementom, slično više široko koristi pointer-eventsimovinu koristi za kontrolu mišem interakcije.

#element ( touch-action: pan-right pinch-zoom; )

touch-actionSvojstvo je korisno prije svega za interaktivne elemente korisničkog sučelja koje je potrebno malo drugačije ponašanje ovisno o vrsti uređaja koji se koristi. Kad vaši korisnici mogu očekivati ​​da će se element ponašati mišem na određeni način, i malo drugačije ponašanje na dodirnom zaslonu, dobro touch-actionće doći.

Najočitiji primjer toga je interaktivni element karte. Ako ste ikada pregledali kartu koja nije dizajnirana za rad s dodirnim uređajima, vjerojatno ste pokušali stisnuti i zumirati samo kako biste pronašli preglednik koji uvećava element, ali zapravo ne zumira stvarnu kartu.

Prema zadanim postavkama, preglednik će automatski rukovati interakcijama dodira: prstima umanjite za zumiranje, prijeđite prstom za pomicanje itd. Ako postavite touch-actionna none, onemogućit će se sve rukovanje ovim događajima u pregledniku, ostavljajući ih vama na implementaciji (putem JavaScript-a). Ako želite preuzeti samo jednu interakciju, recite pregledniku da se pobrine za ostalo. Na primjer, ako je napisao nešto JavaScript da samo ručke zumiranje, možete reći preglednik za obradu i sve drugo sa ovom objektu: touch-action: pan-x pan-y;.

Pogledajte primjere olovke djelovanja dodira pomoću CSS-trikova (@ css-trikovi) na CodePenu.

Sintaksa

touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulation

Vrijednosti

touch-actionNekretnine prihvaća sljedeće vrijednosti:

  • auto: Omogućuje pregledniku da obrađuje sve interakcije pomicanja i zumiranja.
  • none: Onemogućuje preglednicima upravljanje svim interakcijama pomicanja i zumiranja. To otvara mogućnost prilagođenog definiranja tih interakcija u JavaScript-u.
  • pan-x: Omogućuje vodoravno pomicanje s jednim prstom. To je stenogram za pan-leftte pan-rightvrijednosti, ali se može koristiti u kombinaciji s pan-y, pan-up, pan-downi pinch-zoom.
  • pan-yOmogućuje okomito pomicanje s jednim prstom. To je stenogram za pan-upte pan-downvrijednosti, ali se može koristiti u kombinaciji s pan-x, pan-left, pan-righti pinch-zoom.
  • manipulation: Omogućuje interakcije prstima i zumiranja, ali onemogućava druge koje biste mogli pronaći na nekim uređajima, poput dvostrukog dodira za zumiranje. Stenografija je kombinacije pan-x pan-y pinch-zoom.
  • pan-left (Eksperimentalno): Omogućuje interakciju jednim prstom kada se korisnikov prst pomakne udesno, a on se okreće prema lijevoj strani.
  • pan-right (Eksperimentalno): Omogućuje interakciju jednim prstom kada se korisnikov prst pomakne ulijevo, a on se okreće udesno.
  • pan-down (Eksperimentalno): Omogućuje interakciju jednim prstom kada se prst korisnika pomakne prema gore, a on se pomiče prema dolje.
  • pan-up (Eksperimentalno): Omogućuje interakciju jednim prstom kada se prst korisnika pomakne prema dolje, a on se pomiče prema gore.
  • pinch-zoom: Omogućuje interakciju s više prstiju i može se kombinirati s bilo kojom drugom pan-vrijednošću.

Povezano

  • pointer-events

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
36 52 10 * 12 Ne

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 13,0-13,1

Safari je očigledan propust podrške za dodirno djelovanje. Safari za iOS ima ograničenu podršku, samo za autote manipulationvrijednosti.

dodatne informacije

  • Specifikacija nivoa pokazivača događaja 2 - Specifikacija je trenutno u Preporuci kandidata, ali namjerava se prebaciti na Predloženu preporuku početkom 2019. godine, od trenutka pisanja ovog članka. Namjera je da dokument postane službena preporuka W3C.
  • MDN dokumentacija
  • CSS svojstvo dodirnog zumiranja pinch-zoom uzorka - demonstracija Google Chrome-a o njegovoj implementaciji.
  • WebKit Bugzilla Ticket # 133112 - Otvorena ulaznica za predlaganje podrške za Safari. Dodajte svoj glas da ga povećate.