touch-actionВластивість в CSS дає вам контроль над ефектом сенсорного екрану взаємодії з елементом, подібно більш широко використовуваного pointer-eventsмайна , використовуваного для взаємодії управління мишею.
#element ( touch-action: pan-right pinch-zoom; )touch-actionВластивість корисно в першу чергу для інтерактивних елементів призначеного для користувача інтерфейсу , які потребують в різну поведінку в залежності від типу використовуваного пристрою. Коли ваші користувачі можуть очікувати, що елемент буде поводитись за допомогою миші певним чином, і дещо інша поведінка на сенсорному екрані touch-actionстане в нагоді.
Найбільш очевидним прикладом цього є інтерактивний елемент карти. Якщо ви коли-небудь переглядали карту, не призначену для роботи з сенсорними пристроями, ви, мабуть, намагалися стискати та масштабувати лише для того, щоб знайти браузер, що збільшує елемент, але фактично не масштабувати фактичну карту.
За замовчуванням браузер автоматично обробляє взаємодії із дотиком: стискайте, щоб збільшити, проводьте пальцем, щоб прокручувати тощо. Якщо встановити touch-actionзначення, noneбуде вимкнено обробку цих подій у браузері, залишаючи їх за вами (через JavaScript). Якщо ви хочете взяти на себе лише одну взаємодію, скажіть браузеру, щоб впорався з рештою. Наприклад, якщо ви написали деякі JavaScript , що тільки ручки масштабування, ви можете сказати , браузер на ручки і все інше з цим властивістю: touch-action: pan-x pan-y;.
Див. Приклади ручки сенсорної дії від CSS-Tricks (@ css-tricks) на CodePen.
Синтаксис
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationЦінності
touch-actionВластивість набуває таких значень:
auto: Дозволяє браузеру обробляти всі взаємодії панорамування та масштабування.none: Вимикає браузерам обробку всіх взаємодій панорамування та масштабування. Це відкриває можливість користувацького визначення цих взаємодій у JavaScript.pan-x: Дозволяє горизонтальне панорамування за допомогою одного пальця. Це скорочення дляpan-leftіpan-rightзначень, але може бути використаний в поєднанні зpan-y,pan-up,pan-downіpinch-zoom.pan-yДозволяє вертикальне панорамування за допомогою одного пальця. Це скорочення дляpan-upіpan-downзначень, але може бути використаний в поєднанні зpan-x,pan-left,pan-rightіpinch-zoom.manipulation: Дозволяє взаємодію стискання та масштабування, але вимикає інші, які ви можете знайти на деяких пристроях, наприклад, двічі торкніться, щоб збільшити. Це скорочення для поєднанняpan-x pan-y pinch-zoom.pan-left(Експериментально): Дозволяє взаємодію одним пальцем, коли палець користувача рухається вправо, який рухається вліво.pan-right(Експериментально): дає змогу взаємодія одним пальцем, коли палець користувача рухається вліво, а той рухається вправо.pan-down(Експериментально): дає змогу взаємодія одним пальцем, коли палець користувача рухається вгору, який рухається вниз.pan-up(Експериментально): дає змогу взаємодія одним пальцем, коли палець користувача рухається вниз, який рухається вгору.pinch-zoom: Дозволяє взаємодія кількома пальцями та може поєднуватися з будь-яким іншимpan-значенням.
Пов’язані
pointer-events
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Ні |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13,0-13,1 |
Safari - кричущий пропуск підтримки дотику. iOs Safari має обмежену підтримку, лише для значень autoі manipulation.
Додаткова інформація
- Специфікація показників рівня покажчика 2 - специфікація наразі знаходиться в Рекомендації кандидатів, але має на меті перейти до Запропонованої рекомендації на початку 2019 року, станом на момент написання статті. Намір полягає в тому, щоб документ став офіційною рекомендацією W3C.
- Документація MDN
- Властивість CSS із натисканням на масштабування Зразок CSS Зразок - демонстраційна версія Google Chrome щодо його реалізації.
- Квиток на WebKit Bugzilla № 133112 - Відкритий квиток, щоб запропонувати підтримку Safari. Додайте свій голос, щоб підняти його.