В 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-трикове (@ css-трикове) на 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 със сензорно действие с мащабиране Пример - демонстрация на Google Chrome за неговото внедряване.
- WebKit Bugzilla Ticket # 133112 - Отворен билет за предлагане на поддръжка за Safari. Добавете гласа си, за да го увеличите.