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;.
См. Примеры сенсорного действия Pen с помощью 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, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | 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 Touch-action pinch-zoom - демонстрация его реализации в Google Chrome.
- WebKit Bugzilla Ticket № 133112 - Открытый билет для предложения поддержки Safari. Добавьте свой голос, чтобы поднять его.