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 - Отворена улазница за предлагање подршке за Сафари. Додајте свој глас да бисте га повећали.