Додирна акција - ЦСС-трикови

Anonim

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