touch-actionNehnuteľnosť v CSS vám dáva kontrolu nad vplyvom interakcií s dotykovým displejom s prvkom, podobne ako ďalšie široko používaný pointer-eventsmajetku používaného na interakciám ovládanie myšou.
#element ( touch-action: pan-right pinch-zoom; )Táto touch-actionvlastnosť je užitočná predovšetkým pre interaktívne prvky používateľského rozhrania, ktoré sa musia mierne líšiť v závislosti od typu použitého zariadenia. Ak vaši používatelia môžu očakávať, že sa prvok bude správať konkrétnym spôsobom pomocou myši, touch-actionbude sa hodiť mierne odlišné správanie na dotykovej obrazovke .
Najzrejmejším príkladom toho je interaktívny mapový prvok. Ak ste si niekedy prezerali mapu, ktorá nie je navrhnutá na prácu s dotykovými zariadeniami, pravdepodobne ste sa pokúsili štipku priblížiť alebo oddialiť, len aby ste našli prehľadávač, ktorý zväčšuje prvok, ale nie skutočnú mapu.
V predvolenom nastavení bude prehliadač automaticky manipulovať s dotykovými interakciami: priblížením, priblížením alebo posunutím prstom atď. Nastavením touch-actionna nonezakážete spracovanie všetkých týchto udalostí prehliadačom a ich implementáciu necháte na vás (prostredníctvom JavaScriptu). Ak chcete prevziať iba jednu interakciu, povedzte prehliadaču, aby sa postaral o zvyšok. Napríklad, ak ste napísal niektoré JavaScript, ktorý manipuluje iba s priblížením, môžete povedať, prehliadač zvládnuť všetko ostatné s touto vlastnosťou: touch-action: pan-x pan-y;.
Pozrite si príklady pera dotykovej akcie od CSS-Tricks (@ css-tricks) na CodePen.
Syntax
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationHodnoty
Toto touch-actionubytovacie zariadenie akceptuje nasledujúce hodnoty:
auto: Umožňuje prehliadaču spracovávať všetky interakcie posúvania a zväčšovania.none: Zakáže prehliadačom spracovávať všetky interakcie posúvania a zväčšovania. Tým sa otvára možnosť vlastné definovanie týchto interakcií v JavaScripte.pan-x: Umožňuje horizontálne posúvanie pomocou interakcie jedným prstom. To je skratka prepan-leftapan-righthodnoty, ale môžu byť použité v kombinácii span-y,pan-up,pan-downapinch-zoom.pan-yUmožňuje vertikálne posúvanie pomocou interakcie jedným prstom. To je skratka prepan-upapan-downhodnoty, ale môžu byť použité v kombinácii span-x,pan-left,pan-rightapinch-zoom.manipulation: Umožňuje interakcie zoštipnutím a zväčšením, ale zakáže ďalšie, ktoré môžete nájsť na niektorých zariadeniach, napríklad priblíženie dvojitým klepnutím. Je to skratka pre kombináciupan-x pan-y pinch-zoom.pan-left(Experimentálne): Umožňuje interakciu jedným prstom, keď sa prst používateľa pohybuje doprava, čo sa posúva smerom doľava.pan-right(Experimentálne): Umožňuje interakciu jedným prstom, keď sa prst používateľa pohybuje doľava a posúva sa doprava.pan-down(Experimentálne): Umožňuje interakciu jedným prstom, keď sa prst používateľa pohybuje nahor a posúva sa nadol.pan-up(Experimentálne): Umožňuje interakciu jedným prstom, keď sa prst používateľa posunie nadol, čo sa posúva nahor.pinch-zoom: Umožňuje interakcie viacerými prstami a dá sa kombinovať s akoukoľvek inoupan-hodnotou.
Súvisiace
pointer-events
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Nie |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Safari je očividným vynechaním dotykovej podpory. iOs Safari má obmedzenú podporu, iba pre hodnoty autoa manipulation.
Ďalšie informácie
- Špecifikácia úrovne 2 ukazovateľa Udalosti - špecifikácia je momentálne v odporúčaní kandidáta, ale od tohto písania sa má presunúť na navrhované odporúčanie začiatkom roku 2019. Zámerom je, aby sa dokument stal oficiálnym odporúčaním W3C.
- Dokumentácia MDN
- Vlastnosť CSS so štipkovým zväčšením dotykovým ovládaním Ukážka - ukážka implementácie prehliadača Google Chrome.
- WebKit Bugzilla Ticket # 133112 - Otvorený lístok na navrhnutie podpory Safari. Pridajte svoj hlas, aby ste to zvrátili.