The touch-actionproperti di CSS memberi Anda kontrol atas efek interaksi touchscreen dengan elemen, mirip dengan yang lebih luas-digunakan pointer-eventsproperti yang digunakan untuk interaksi kontrol mouse.
#element ( touch-action: pan-right pinch-zoom; )The touch-actionproperti ini berguna terutama untuk elemen UI interaktif yang perlu perilaku yang sedikit berbeda tergantung pada jenis perangkat yang digunakan. Ketika pengguna Anda mungkin mengharapkan elemen berperilaku dengan cara tertentu dengan mouse, dan perilaku yang sedikit berbeda pada layar sentuh, touch-actionakan berguna.
Contoh paling jelas dari ini adalah elemen peta interaktif. Jika Anda pernah melihat peta yang tidak dirancang untuk bekerja dengan perangkat sentuh, Anda mungkin mencoba mencubit dan memperbesar hanya untuk menemukan browser memperbesar elemen, tetapi tidak benar-benar memperbesar peta yang sebenarnya.
Secara default, browser akan menangani interaksi sentuh secara otomatis: Cubit untuk memperbesar, geser untuk menggulir, dll. Pengaturan touch-actionke noneakan menonaktifkan semua browser yang menangani peristiwa ini, menyerahkannya kepada Anda untuk diterapkan (melalui JavaScript). Jika Anda hanya ingin mengambil alih satu interaksi, beri tahu browser untuk menangani sisanya. Misalnya, jika Anda menulis beberapa JavaScript yang hanya menangani zoom, Anda dapat memberitahu browser untuk menangani segala sesuatu yang lain dengan properti ini: touch-action: pan-x pan-y;.
Lihat contoh Pen touch-action oleh CSS-Tricks (@ css-trick) di CodePen.
Sintaksis
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationNilai
The touch-actionproperti menerima nilai-nilai berikut:
auto: Memungkinkan browser menangani semua interaksi geser dan zoom.none: Menonaktifkan browser untuk menangani semua interaksi geser dan zoom. Ini membuka kemampuan untuk menentukan sendiri interaksi tersebut di JavaScript.pan-x: Mengaktifkan panning horizontal dengan interaksi satu jari. Ini adalah istilah untukpan-leftdanpan-rightnilai-nilai, tetapi dapat digunakan dalam kombinasi denganpan-y,pan-up,pan-downdanpinch-zoom.pan-yMengaktifkan panning vertikal dengan interaksi satu jari. Ini adalah istilah untukpan-updanpan-downnilai-nilai, tetapi dapat digunakan dalam kombinasi denganpan-x,pan-left,pan-rightdanpinch-zoom.manipulation: Mengaktifkan interaksi cubit dan zoom, tetapi menonaktifkan perangkat lain yang mungkin Anda temukan di beberapa perangkat, seperti ketuk dua kali untuk memperbesar. Ini adalah singkatan dari kombinasipan-x pan-y pinch-zoom.pan-left(Eksperimental): Mengaktifkan interaksi satu jari saat jari pengguna bergerak ke kanan, yang mengarah ke kiri.pan-right(Eksperimental): Mengaktifkan interaksi satu jari saat jari pengguna bergerak ke kiri, yang mengarah ke kanan.pan-down(Eksperimental): Mengaktifkan interaksi satu jari saat jari pengguna bergerak ke atas, yang mengarah ke bawah.pan-up(Eksperimental): Mengaktifkan interaksi satu jari saat jari pengguna bergerak ke bawah, yang mengarah ke atas.pinch-zoom: Mengaktifkan interaksi multi-jari dan dapat digabungkan denganpan-nilai lainnya .
Terkait
pointer-events
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Tidak |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Safari adalah kelalaian mencolok untuk dukungan aksi sentuh. iOs Safari memiliki dukungan terbatas, hanya untuk autodan manipulationnilai.
informasi tambahan
- Spesifikasi Pointer Events Level 2 - Spesifikasi saat ini ada dalam Rekomendasi Kandidat tetapi dimaksudkan untuk pindah ke Rekomendasi Yang Diajukan awal 2019, pada tulisan ini. Tujuannya agar dokumen tersebut menjadi Rekomendasi resmi W3C.
- Dokumentasi MDN
- Contoh properti CSS touch-action pinch-zoom - Demo Google Chrome tentang implementasinya.
- Tiket Bugzilla WebKit # 133112 - Buka tiket untuk mengajukan dukungan Safari. Tambahkan suara Anda untuk meningkatkannya.