touch-actionHotel v CSS vam omogoča nadzor nad učinkom touchscreen interakcije z elementom, podobno kot širše-rabljene pointer-eventsnepremičnine, ki se uporablja za interakcije nadzor z miško.
#element ( touch-action: pan-right pinch-zoom; )touch-actionLastnost je uporabna predvsem za interaktivne elementi uporabniškega vmesnika, ki potrebujejo nekoliko drugačno obnašanje glede na vrsto naprave, ki se uporabljajo. Ko bodo vaši uporabniki morda pričakovali, da se bo element obnašal z miško na poseben način, in nekoliko drugačno vedenje na zaslonu na dotik, touch-actionbo prišlo prav.
Najbolj očiten primer tega je interaktivni element zemljevida. Če ste si kdaj ogledali zemljevid, ki ni zasnovan za delovanje z napravami na dotik, ste verjetno poskušali stisniti in povečati le brskalnik, ki povečuje element, dejansko pa dejansko ne povečate.
Privzeto brskalnik samodejno obdeluje interakcije z dotikom: stisnite za povečavo, povlecite za pomikanje itd. Če nastavite touch-actionna, nonebo onemogočeno vse brskanje po teh dogodkih in jih prepustite sami sebi (prek JavaScripta). Če želite prevzeti samo eno interakcijo, povejte brskalniku, da bo poskrbel za ostalo. Na primer, če si napisal nekaj JavaScript, da le ročaji povečave, lahko poveste brskalnik za ravnanje vse ostalo s to nepremičnino: touch-action: pan-x pan-y;.
Oglejte si primere pisala s pritiskom na CSS-Tricks (@ css-tricks) na CodePen.
Sintaksa
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationVrednote
touch-actionLastnina sprejema naslednje vrednosti:
auto: Dovoli brskalniku, da obravnava vse interakcije pomikanja in povečave.none: Onemogoči brskalnikom upravljanje vseh interakcij premikanja in povečave. To odpira možnost, da te interakcije v JavaScript določite po meri.pan-x: Omogoča vodoravno premikanje z enim samim prstom. To je okrajšava zapan-leftinpan-rightvrednot, ki pa se lahko uporablja v kombinaciji zpan-y,pan-up,pan-downinpinch-zoom.pan-yOmogoča navpično premikanje z enim samim prstom. To je okrajšava zapan-upinpan-downvrednot, ki pa se lahko uporablja v kombinaciji zpan-x,pan-left,pan-rightinpinch-zoom.manipulation: Omogoča interakcije s stiskanjem in povečavo, onemogoči pa druge, ki jih lahko najdete v nekaterih napravah, na primer dvakrat tapnite za povečavo. Okrajšava je za kombinacijopan-x pan-y pinch-zoom.pan-left(Eksperimentalno): omogoči interakcijo z enim prstom, ko se uporabnikov prst premakne v desno, ta pa se pomakne proti levi.pan-right(Eksperimentalno): omogoči interakcijo z enim prstom, ko se uporabnikov prst premakne v levo, ta pa se pomakne proti desni.pan-down(Eksperimentalno): Omogoča interakcijo z enim prstom, ko se uporabnikov prst premakne navzgor, ki se pomakne navzdol.pan-up(Eksperimentalno): Omogoča interakcijo z enim prstom, ko se uporabnikov prst pomakne navzdol, ki se pomakne navzgor.pinch-zoom: Omogoča interakcije z več prsti in jih je mogoče kombinirati s katero koli drugopan-vrednostjo.
Sorodno
pointer-events
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12. | Ne |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13,0-13,1 |
Safari je očitna opustitev podpore za dotik. iOs Safari ima omejeno podporo, samo za vrednosti autoin manipulation.
Dodatne informacije
- Specifikacija kazalcev 2. stopnje - specifikacija je trenutno v Priporočilu za kandidate, vendar naj bi se začela predlagati priporočilo v začetku leta 2019, od trenutka pisanja. Namen je, da bo dokument postal uradno priporočilo W3C.
- Dokumentacija MDN
- Lastnost CSS s pritiskom na tipko z zoomom Primer - predstavitev izvedbe Google Chroma.
- Vstopnica za WebKit Bugzilla # 133112 - odprta vstopnica za podporo Safariju. Dodajte svoj glas, da ga povečate.