touch-actionNieruchomość w CSS daje kontrolę nad wpływem interakcji z ekranem dotykowym z elementem, podobnie jak bardziej powszechnie używane pointer-eventsnieruchomego, który służy do interakcji myszy kontrola.
#element ( touch-action: pan-right pinch-zoom; )touch-actionWłaściwość jest przydatna przede wszystkim dla interaktywnych elementów interfejsu użytkownika, które wymagają nieco innego zachowania w zależności od typu używanego urządzenia. Gdy użytkownicy mogą oczekiwać, że element będzie zachowywał się w określony sposób z myszą i nieco inne zachowanie na ekranie dotykowym, touch-actionprzyda się.
Najbardziej oczywistym tego przykładem jest interaktywny element mapy. Jeśli kiedykolwiek widziałeś mapę, która nie została zaprojektowana do pracy z urządzeniami dotykowymi, prawdopodobnie próbowałeś szczypać i powiększać tylko po to, aby znaleźć przeglądarkę powiększającą element, ale tak naprawdę nie powiększającą rzeczywistą mapę.
Domyślnie przeglądarka automatycznie obsługuje interakcje dotykowe: Pinch, aby powiększyć, przesuń do przewijania, itd. Ustawienie touch-actiondo nonewyłączy wszystkie przeglądarkę obsługi tych zdarzeń, pozostawiając je do ciebie, aby wdrożyć (za pośrednictwem JavaScript). Jeśli chcesz przejąć tylko jedną interakcję, powiedz przeglądarce, aby zajęła się resztą. Na przykład, jeśli napisał, że tylko niektóre JavaScript uchwyty powiększanie, można powiedzieć przeglądarkę do obsługi wszystkiego innego z tej właściwości: touch-action: pan-x pan-y;.
Zobacz przykłady działania dotykowego pióra przez CSS-Tricks (@ css-tricks) na CodePen.
Składnia
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationWartości
touch-actionWłaściwość przyjmuje następujące wartości:
auto: Pozwala przeglądarce na obsługę wszystkich interakcji przesuwania i powiększania.none: Wyłącza obsługę wszystkich interakcji przesuwania i powiększania w przeglądarkach. Otwiera to możliwość niestandardowego definiowania tych interakcji w JavaScript.pan-x: Umożliwia panoramowanie w poziomie za pomocą jednego palca. Jest to skrótowy zapispan-leftipan-rightwartości, ale może być stosowany w połączeniu zpan-y,pan-up,pan-downipinch-zoom.pan-yUmożliwia panoramowanie w pionie za pomocą jednego palca. Jest to skrótowy zapispan-upipan-downwartości, ale może być stosowany w połączeniu zpan-x,pan-left,pan-rightipinch-zoom.manipulation: Umożliwia uszczypnięcie i powiększanie, ale wyłącza inne, które można znaleźć na niektórych urządzeniach, na przykład dwukrotne dotknięcie, aby powiększyć. Jest to skrót od kombinacjipan-x pan-y pinch-zoom.pan-left(Eksperymentalnie): umożliwia interakcję jednym palcem, gdy palec użytkownika przesuwa się w prawo, czyli przesuwa w lewo.pan-right(Eksperymentalnie): umożliwia interakcję jednym palcem, gdy palec użytkownika przesuwa się w lewo, co przesuwa się w prawo.pan-down(Eksperymentalnie): umożliwia interakcję jednym palcem, gdy palec użytkownika porusza się w górę, co przesuwa w dół.pan-up(Eksperymentalnie): umożliwia interakcję jednym palcem, gdy palec użytkownika przesuwa się w dół, co przesuwa w górę.pinch-zoom: Włącza interakcje z wieloma palcami i może być łączony z dowolną innąpan-wartością.
Związane z
pointer-events
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Nie |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Safari to rażące zaniedbanie obsługi dotykowej. Safari iOs ma ograniczone wsparcie, tylko dla wartości autoi manipulation.
Dodatkowe informacje
- Specyfikacja Pointer Events na poziomie 2 - specyfikacja znajduje się obecnie w rekomendacji dla kandydatów, ale ma zostać przeniesiona do proponowanej rekomendacji na początku 2019 r., Od chwili pisania tego tekstu. Intencją jest, aby dokument stał się oficjalną rekomendacją W3C.
- Dokumentacja MDN
- Dotykowa właściwość CSS powiększania przez szczypanie Przykład - prezentacja jej implementacji w przeglądarce Google Chrome.
- WebKit Bugzilla Ticket # 133112 - Otwórz zgłoszenie, aby zaproponować obsługę Safari. Dodaj swój głos, aby go wzmocnić.