touch-actionИмовина у ЦСС вам даје контролу над ефекта интеракције екраном осетљивим на додир са елементом, сличан више широкој употреби pointer-eventsимовине која се користи у интеракцијама контролу миша.
#element ( touch-action: pan-right pinch-zoom; )touch-actionМу је користан првенствено интерактивних УИ елемената које је потребно мало другачије понашање у зависности од типа уређаја који се користи. Када ваши корисници могу очекивати да се елемент понаша мишем на одређени начин, и мало другачије понашање на додирном екрану, добро touch-actionће доћи.
Најочигледнији пример овога је интерактивни елемент мапе. Ако сте икада прегледали мапу која није дизајнирана за рад са додирним уређајима, вероватно сте покушали да притегнете и зумирате само да бисте пронашли прегледач који увећава елемент, али заправо не зумирате стварну мапу.
Подразумевано, прегледач ће аутоматски руковати интеракцијама додиром: прстом увуците за зумирање, превуците прстом за помицање итд. Ако поставите touch-actionна none, онемогућиће се руковање овим догађајима у прегледачу, остављајући их вама на примени (путем ЈаваСцрипт-а). Ако желите да преузмете само једну интеракцију, реците прегледачу да се побрине за остало. На пример, ако сте написали неку ЈаваСцрипт да само ручице зумирање, можете рећи бровсер за руковање и све остало са ове некретнине: touch-action: pan-x pan-y;.
Погледајте примере оловке осетљиве акције ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.
Синтакса
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationВредности
touch-actionИмовине прихвата следеће вредности:
auto: Омогућава прегледачу да обрађује све интеракције померања и зумирања.none: Онемогућава прегледачима да управљају свим интеракцијама померања и зумирања. Ово отвара могућност прилагођавања тих интеракција у ЈаваСцрипт-у.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
Подршка прегледача
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Не |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Сафари је очигледан пропуст подршке за додир. иОС Сафари има ограничену подршку, само за autoи manipulationвредности.
Додатне Информације
- Спецификација нивоа показивача догађаја 2 - Спецификација је тренутно у Препоруци кандидата, али је намењена преласку на Предложену препоруку почетком 2019. године, од писања овог текста. Намера је да документ постане званична препорука В3Ц.
- МДН документација
- Узорак ЦСС својства додирног зумирања пинцх-зоом-ом - демонстрација Гоогле Цхроме-а о примени.
- ВебКит Бугзилла Тицкет # 133112 - Отворена улазница за предлагање подршке за Сафари. Додајте свој глас да бисте га повећали.