Propiedad CSS touch-action: bagaimana mengatur sentuhan dengan presisi

Beranda » Ular sanca » Propiedad CSS touch-action: bagaimana mengatur sentuhan dengan presisi

Ketika Anda bekerja dengan antarmuka taktil, ada detail yang menandai perbedaan antara pengalaman yang lancar dan frustrasi lainnya: Memutuskan Cara Mengelola Navigasi dan Cara Mengoperasikan Kode Anda. La propiedad CSS touch-action itu hanya interupsi yang cukup sehingga dapat diatur sesuai ukuran mil.

Lejos de ser algo esotérico, touch-action kontrol layarnya, zoomnya oleh pellizco dan gerakan lain yang telah ditentukan sebelumnya bahwa navigasinya akan membuka sebuah elemen. Baik digunakan, tidak perlu menelusuri kembali acara, beberapa menu di JavaScript, dan mengontrol komponen secara nyata seperti peta, carrusel, atau hak gadai permainan.

Apa itu aksi sentuh yang tepat?

En pocas palabras, touch-action menunjukkan kepada agen pengguna tindakan taktil yang dapat dilakukan dengan cara asli di wilayah halaman dan tempat yang harus dicadangkan untuk mengelola acara. Ini adalah sentuhan pelengkap pointer-events, yang hanya menghubungkan lebih banyak interaksi dengan tikus, tetapi dengan sebuah fokus khusus seperti pada tampilan dan zoom.

Dengan cara ini, Anda dapat mengizinkan navegador melakukan pekerjaan Anda (desplazar, zoom) atau blokir untuk mengimplementasikan interaksi Anda (misalnya, perbesar bagian dalam peta) tidak ada gangguan atau kerusakan yang dibuat-buat click.

Sintaxis y formas de uso

Propiedad acepta berbagai kombinasi dengan banyak hal nyata. Anda dapat mendeklarasikan nilai unik, atau komponen berbagai nilai yang kompatibel untuk menyesuaikan perilaku dengan presisi.

/* Declaración típica */
#elemento {
  touch-action: pan-right pinch-zoom;
}

Jika memerlukan tata bahasa yang tepat, ini adalah sintaksis formal reconocida:

touch-action =
  auto |
  none |
   ||  || pinch-zoom ] |
  manipulation

Dengan kata lain, dapat menggunakan uno de los valores globales (otomatis, tidak ada, manipulasi) atau merupakan kombinasi sambungan lantai horizontal dan vertikal, lebih lagi pinch-zoom secara opsional.

Nilai aksi sentuh dan apa yang harus dilakukan setiap saat

Ini adalah propiedad ofrece valores pensados ​​for casos muy concretos. Diam-diam dia harus mengimplementasikan kembali gesto dengan JavaScript o, sebaliknya, Anda melalui gratis untuk melakukannya ketika Anda membutuhkannya.

auto

Deja que el navegador gestione semua gerakan untuk membuka dan memperbesar. Ini adalah tindakan yang tidak dapat dilakukan: Pengguna dapat menghapus dan menghapus aplikasi tersebut tanpa perlu melakukan lebih banyak hal.

none

Blokir untuk menyelesaikan intervensi navigasi dalam gerakan itu. Tidak ada ruang untuk memperbesar atau memperkecil tampilan aslinya; Anda harus menerapkannya dengan JavaScript jika Anda ingin melakukan hal ini. Ini ideal untuk peta atau hak gadai di mana kontrolnya harus 100% aman.

manipulation

Izinkan penghapusan area dan zoom, tetapi nonaktifkan ciertos gestos no estándar as the double toque to ampliar. Itu, dalam praktiknya, suatu alias de "pan-x pan-y pinch-zoom" (combinación explícita se mantiene valid por compatibilidad). Setelah berhenti melakukan hal yang sama, juga menghilangkan kebutuhan untuk mengingat kembali kejadian yang terjadi click ada satu sentuhan yang saya lakukan pada respons antarmuka.

pan-x

Activa layarnya horizontal dengan satu langkah saja. Puede combinarse con pan-y, pan-up, pan-down dan / atau pinch-zoom. Es un atajo que engloba pan-left y pan-right.

pan-y

Activa layarnya vertikal dengan satu langkah saja. Puede combinarse con pan-x, pan-left, pan-right dan / atau pinch-zoom. Dengan cara yang sama, ada upaya yang termasuk pan-up y pan-down.

pan-left, pan-right, pan-up, pan-down

Izinkan gerakan membuka aplikasi dengan satu hal yang ditekankan pada petunjuk yang ditunjukkan. Ojo: suatu kali Anda memulainya, Anda dapat membalikkan arah. Ada rincian yang mungkin membingungkan: dalam terminal antarmuka, "pan-up" arti penting bahwa usuario arrastra el dedo hacia abajo en la pantalla agar kontennya se mueva hacia arriba; y "geser ke kiri" menyiratkan bahwa tindakan tersebut harus dilakukan karena konten tersebut menggantikan hak yang telah ditetapkan.

pinch-zoom

Memungkinkan gestos multi-dedo de zoom dan deplazamiento. Anda dapat menggabungkan nilai apa pun pan-*. Di navegador yang melaksanakannya, Agen pengguna dapat memulai zoom terus menerus tanpa perlu mengharapkan pengelola acara yang dibatalkan.

Aturan kombinasi dan normalisasi

Dalam kombinasi arah, ada aturan penyederhanaan. Tidak semua yang bisa Anda tuliskan valid jika ada cara yang lebih sederhana. Por ejemplo, "pan-left pan-right" ini dianggap tidak valid karena formatnya benar dan lebih banyak lagi pan-x.

Namun, ada kombinasi yang telah Anda lakukan, seperti "pan-left pan-down" untuk mengizinkannya menghapus instalasi tersebut dimulai hacia la izquierda atau hacia abajo. Dalam hal ini, tidak ada singkatan langsung yang setara, karena itu adalah kombinasi yang dapat diterima.

Juga ingat itu bisa mezclar ejes dan pellizco. Por ejemplo, "pan-x pinch-zoom" izinkan perluasan horizontal untuk satu kali dan perbesar beberapa kali dalam sekali, lakukan perluasan secara vertikal.

Cuándo usar cada valor: patrones reales

Hal ini biasanya merupakan peta atau hak gadai permainan yang tertanam di halaman. Jika Anda ingin gerakan pellizcar mempengaruhi propio mapa dan tidak memperbesar navegador, te interesa declarar touch-action: none; dan tuliskan zoom yang dipersonalisasi dalam JavaScript.

Skenario lain adalah ketika kode Anda sendirian menerapkan bagian interaksi (misalnya, zoom), dan pilih navegador yang mempertahankan lokasi lokal. Kalau begitu, "touch-action: pan-x pan-y;" Le dice al agente de usuario that gestione to do el desplazamiento and te deja libre to ocuparte del zoom como quieras.

Untuk komponen UI seperti carrusel horizontal, pan-x suele ser la mejor opción. Mengizinkan pengunduhan ke samping, mempertahankan zoom yang dinonaktifkan jika tidak ada yang berikutnya, dan menghindari konflik saat menggulir vertikal halaman jika tidak ada yang ingin aktif.

Jika prioritas Anda adalah respons segera terhadap tombol dan penghapusan tombol ganda, manipulation itu sebuah kejutan besar. Cukup ketuk dua kali untuk memperbesar dan mengetahui kebutuhannya untuk memutar ulang click, itu adalah sensasi "snappiness" di botones dan enlaces.

Impacto en accesibilidad

Un punto crítico: si declaras touch-action: none; memblokir zoom nativo del navegador. Orang-orang dengan visi baja yang diperlukan untuk memperkuat kemampuan mereka, yang dapat mengubah antarmuka Anda menjadi tidak dapat diakses.

Ketika konteksnya diizinkan, considera mantener pinch-zoom diaktifkan atau cari alternatif aksesibilitas apa yang tidak impidan el aumento. Memperbesarnya, bagi banyak pengguna, sebuah perangkat pembelajaran penting; tidak la menonaktifkan a la ligera.

Kompatibel dengan navegador

Dukungan dari touch-action es amplio, pero con matices. Navigasi modern seperti Chrome (36+), Edge (12+), Firefox (52+) dan Opera (23+) menerapkan propiedad dengan nilai-nilai prinsipal.

Tempat bersejarah yang indah di Safari. iOS Safari memiliki keterbatasan, dengan dukungan yang kuat untuk auto y manipulation, sementara nilai lain memiliki lebih banyak variabel sesuai versi dan konteks. Dalam versi terbaru Safari de escritorio (13+), kompatibilitasnya lebih baik, tetapi kami dapat memvalidasi hal-hal tertentu, semua itu bergantung pada kombinasi sebelumnya.

Tablas de compatibilidad public (tipe yang berkonsultasi dengan buku harian) Anda akan mengaktualisasikan kontribusi komunitas dan statistik penggunaan; jika proyek Anda masuk akal dalam hal konkret, gunakan perangkat yang sebenarnya. Ada juga hal yang sama hanya perangkat dengan layar sentuh yang dapat memverifikasi kenyamanannya de forma fidedigna.

Contoh praktis penggunaan

Ada beberapa pelindung deklarasi yang memecahkan masalah kehidupan. Selamat mencoba untuk tetap tenang dengan sentuhan perangkat keras untuk mengetahui bahwa pengalaman adalah pengalaman.

1) Nonaktifkan semua gestos (peta atau kanvas yang dipersonalisasi)

Jika Anda ingin menerapkan pengaturan dan pembesaran internal tanpa gangguan. Navigator tidak mencegat, tidak ada ruang terbuka atau pellizco.

<!-- HTML -->
<div id='mapa' class='superficie'></div>

<!-- CSS -->
.superficie {
  touch-action: none;
}

2) Izinkan deplazamiento nativo, kontrol hanya dengan zoom

Jika JavaScript Anda dimuat dengan zoom, itu berarti navigasinya gerakkan gulir ke sana para no reinventar la rueda.

.zoom-personalizado {
  touch-action: pan-x pan-y;
}

3) Buka area horizontal dengan zoom pellizco

Untuk carruseles complejos atau galerías: gulir horizontal dengan un dedo dan zoom con dos, sin scroll vertical nativo.

.galeria-avanzada {
  touch-action: pan-x pinch-zoom;
}

4) Penunjukan ke arah awal

Pada suatu kesempatan, kami mengizinkannya hanya gerakan yang diatur untuk mencapai arah yang konkret (hal. misalnya, agar tidak mengganggu komponen lain).

.panel-contextual {
  touch-action: pan-left pan-down;
}

5) Atajo pragmático: manipulasi

Ketika Anda mendapatkan jawaban tak terduga tanpa melakukan dua hal, manipulation es un gran comodín. Ayuda menghindari kesalahan itu click pasca-toque.

button, a {
  touch-action: manipulation;
}

Hubungan dengan pointer-events y eventos de clic

Meskipun terkadang mereka bingung, touch-action y pointer-events atacan problemas distintos. Detik berikutnya putuskan jika suatu elemen merespons "punteros" (ratón, táctil, lápiz) pada tingkat pengujian pukulan; penentu pertama gerakan taktil yang rusak dapat dijalankan di navegador di wilayah itu.

Selain itu, menonaktifkan gestos seperti melakukan dua kali con manipulation menghilangkan retraso clasico del click mentransfer panggilan ke ponsel. Keterlambatan ini ada untuk membedakan antara satu tombol sederhana dan inisiasi dua kali lipat untuk memperbesar; jika panggilan ganda ya tidak ada, navegador dapat mengirimnya click tanpa menunggu

Catatan dan detail implementasi

dengan pinch-zoom, hay navegadores que mulai zoom terus menerus tapi saya harap Anda bermaksud membatalkan tindakan dengan JavaScript. Ini adalah perilaku yang disukai una sensación de inmediatez dan gerakan pellizco dengan elemen yang Anda izinkan.

Anda juga harus tahu bahwa jika Anda membatasi arah yang memulai instalasi, Pengguna dapat membalikkan arah sekali memulai gulir. Ini adalah pengalaman yang sesuai dengan apa yang orang-orang harapkan dari daftar atau hak gadai, dan menghindari blokade buatan dalam mitad del gesto.

Praktik yang baik

Pertama, terapkan intervensi minimal: kecualikan keberanian Anda kecuali Anda membatasi apa pun yang terjadi. Si te basta con pan-x, tidak ada gunanya none. Ini akan menjaga gestos nativos dan accesibilidad.

Kedua, komponen-komponen yang lengkap dan perangkat keras yang sebenarnya: apa yang dilakukan secara optimal dengan emulator tidak dapat mencerminkan inersia dan gesekan nyata. Sensasi sentuhannya halus dan perubahan kecil touch-action se notan.

Jadi, jika zoomnya terhambat karena produknya diperlukan, menawarkan alternatif aksesibilitas (mengontrol tampilan akhir teks, memperbesar bagian dalam dengan jelas, kontras sesuai). Privar del zoom sin alternativa perjudica la lectura.

Dengan cara ini, dokumentasikan dan temukan kenyamanan dengan peralatan tersebut: marcar contratos claros entre CSS dan JavaScript Hindari konflik, jadi ketika ada pendengar yang membatalkan acara atau pustaka gerakan untuk media.

Klasemen utilitas dalam kerangka kerja

Banyak kerangka kerja yang digunakan saat ini clases que mapean 1:1 a touch-action, apa itu prototipado dan perubahan yang lebih cepat. Ini adalah kebiasaan untuk menemukan varian seperti itu touch-auto, touch-none, touch-pan-x o touch-pan-y.

<div class='h-48 w-full touch-auto overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>
<div class='h-48 w-full touch-none overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>
<div class='h-48 w-full touch-pan-x overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>
<div class='h-48 w-full touch-pan-y overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>

Penggunaan ini membantu menjaga CSS tetap lancar dan koheren; menyelamatkan Anda dari kegagalan dengan nilai yang rendah touch-action, dengan aturan kombinasi dan efek yang berbeda.

Pengujian dan debug

Untuk memeriksa efeknya, perangkat yang ideal adalah perangkat sentuh. Beberapa navigasi terbaru menggunakan taktik di DevTools-nya, tapi tidak mereproduksi kesempurnaan gerakan fisik atau beberapa kali secara bersamaan.

Jika ada yang tidak ditanggapi, pertimbangkan kembali prioritasnya: apakah elemen tersebut benar-benar menerima peristiwa tersebut? ¿hay pendengar yang membatalkannya preventDefault()? konfirmasi computed style de touch-action dan periksa superposiciones con pointer-events menghemat waktu Anda.

Fragmentos listos para copiar

Beberapa hal yang berguna untuk hari itu. Ini seperti dasar dan penyesuaian dalam kasus Anda.

/* Desactiva todo (señal de: me ocupo yo por JS) */
.superficie { touch-action: none; }

/* Solo desplazamiento horizontal */
.carrusel { touch-action: pan-x; }

/* Solo desplazamiento vertical */
.lista { touch-action: pan-y; }

/* Inicios hacia derecha + hacia arriba */
.panel { touch-action: pan-right pan-up; }

/* Pellizco-zoom + desplazamiento en cualquier eje (sin doble tap) */
.interactivo { touch-action: manipulation; }

Notas de soporte específicas

Di masa lalu, nilai pinch-zoom dipopulerkan dengan dukungan di Chrome mulai dari versi 56, dan perilaku Anda telah melakukan pembiayaan kembali. Di platform di bawah tindakan sistem, verifikasi bahwa aplikasi Anda tidak masuk konflik gestos del SO (misalnya, gestos de navegación por bordes).

Jika tujuan publik termasuk iOS, Anda akan mendapatkan mati: Kombinasi sebelumnya tidak dapat dibandingkan dengan Chromium. Pruebas cruzadas adalah suatu keharusan ketika Anda mendasarkan UX pada inisial arah atau dengan menekan tombol ganda.

Sintaksis resume dan model mental

Suatu cara yang tidak dapat dipertukarkan adalah memikirkan tentang kemampuan. Pertama, Anda berhak atas izin tersebut atau arah yang diizinkan (pan-x, pan-y, pan-kiri, dll.); setelah itu memutuskan si añades pinch-zoom; y, jika lo tuyo es la rapidez, kamu menggunakan manipulation sebagai jalan pintas a lo típico sin doble toque.

Dan tidak ada penyederhanaan yang terlihat: Jika kombinasi Anda dapat ditulis dengan sebuah kata, gunakan kata tersebut. Itu dapat dibaca dan menghindari nilai-nilai yang tidak valid (el clasico "pan-left pan-right" yang seharusnya menjadi pan-x).

Tanaman estilos untuk proyek

Blok ini biasanya memuat sistem desain dan perpustakaan komponen. Tentukan kegunaan CSS Anda untuk penggunaan yang sering dan cenderung koheren di antara keduanya.

/* Utilidades corporativas */
.u-touch-auto { touch-action: auto; }
.u-touch-none { touch-action: none; }
.u-touch-pan-x { touch-action: pan-x; }
.u-touch-pan-y { touch-action: pan-y; }
.u-touch-zoom { touch-action: pinch-zoom; }
.u-touch-sensible { touch-action: manipulation; }

Con estas clases, documentas la intención (misalnya, "masuk akal" berarti menjawab dengan cepat) sebagai bagian dari teknik rinci yang digunakan, yang memfasilitasi adopsi oleh bagian desarrollador lain.

Daftar periksa kecil sebelum dipublikasikan

– Apakah keberanian Anda kurang dari yang mengganggu tujuan Anda? Jika ada yang bisa menjadi nativo, maka nativo.
– ¿Apakah aplikasi ini dapat digunakan dengan zoom? Tidak ada pengorbanan yang dapat diakses jika tidak dapat dicapai.
– ¿Apakah iOS dan Android sudah diuji? Emulación itu berguna, tapi tidak pasti.
– ¿Apakah para pendengar tidak mengganggu kenyamanan kerja mereka? Evita cancelaciones globales.

Jelas itu touch-action Ini adalah cara yang penting untuk mendapatkan pengalaman taktis: Anda mengizinkan pembatasan yang dilakukan oleh nativos dan cuáles controlas Anda, kurangi latencias como la del click tras el toque, y ofrececombinaciones ricas for casos avanzados; Jika ini adalah sejumlah manfaat dari perangkat nyata dan perangkat yang dapat diakses, Anda akan menemukan komponen-komponen taktil yang terlihat alami dan dapat diandalkan.