свойство touch-actionCSS3-генератор ☛

Свойство контролирует события фильтрации жестов и дает разработчикам декларативный механизм для выборочного отключения сенсорной прокрутки (по одной или обеим осям) и масштабирования по двойному тапу.

Краткая информация

Значение по умолчанию	auto
Наследуется	Нет
Применяется	Ко ввсем элементам кроме: незаменяемых инлайновых элементов, строк таблиц, групп строк, колонок таблиц и групп колонок
Анимируется	Нет

Синтаксис ?

touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] ] | manipulation

✖

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

auto: Значение по умолчанию. Браузер пользователя может определить разрешенное поведение при касании элемента.
manipulation: На элементе разрешено панорамирование и зум пальцами. Можно считать сокращением для pan-x pan-y pinch-zoom. Дополнительные нестандартные жесты типа двойного тапа запрещены.
none: На элементе запрещены стандартные поведения при касании.
pan-x: Разрешено панорамирование пальцами по оси Х. Можно совместить с pan-y, pan-up, pan-down и зумом пальцами.
pan-y: Разрешено панорамирование пальцами по оси Y. Можно совместить с pan-x, pan-up, pan-down и зумом пальцами.
pan-left: Панорамирование пальцами разрешено только, если действие начинается с панорамирования влево. То есть пользователь перемещает палец вправо. После начала прокрутки направление можно изменить на противоположное.
pan-right: Панорамирование пальцами разрешено только, если действие начинается с панорамирования вправо. То есть пользователь перемещает палец влево. После начала прокрутки направление можно изменить на противоположное.
pan-up: Панорамирование пальцами разрешено только, если действие начинается с панорамирования вверх. То есть пользователь перемещает палец вниз. После начала прокрутки направление можно изменить на противоположное.
pan-down: Панорамирование пальцами разрешено только, если действие начинается с панорамирования вниз. То есть пользователь перемещает палец вверх. После начала прокрутки направление можно изменить на противоположное.
pinch-zoom: Разрешен зум несколькими пальцами. Можно совместить с pan-x, pan-left, pan-right, pan-y, pan-up, pan-down.
double-tap-zoom: Приближение по клику по заданной области
cross-slide-x: Перемещение поперек элемента
cross-slide-y: Перемещение вдоль элемента

В общем используя свойство touch-action мы при необходимости ограничить действия пользователей на сенсорных экранах при работе с нашим сайтом или приложением.

Пример

Свойство используется для сенсорных экранов, рекомендуется проверять его на устройствах с сенсорным экраном.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>touch-action</title>
  <style>


body {
  color: #555;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 1em auto;
  padding: 0 1em;
  max-width: 700px;
}

h1 {
  margin-bottom: 0.5em;
}

h1::after {
  display: block;
  content: 'This demo only works on browsers that support the touch-action property.';
  background-color: pink;
  color: maroon;
  border: 2px solid crimson;
  padding: 0.5em;
}

@supports (touch-action: auto) {
  h1::after {
    display: none;
  }
}

h2 {
  margin-top: 0;
  margin-bottom: 1em;
}

h2::after {
  content: ' (not supported)';
  color: crimson;
}

.element {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
  height: 50vh;
  overflow: auto;
  position: relative;
}

.element div {
  min-width: 75%;
  height: 75vh;
}

section div:nth-child(1) {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c0392b), color-stop(50%, #c0392b), color-stop(50%, #3498db), to(#3498db));
  background-image: -webkit-linear-gradient(top, #c0392b 0%, #c0392b 50%, #3498db 50%, #3498db 100%);
  background-image: linear-gradient(to bottom, #c0392b 0%, #c0392b 50%, #3498db 50%, #3498db 100%);
}

section div:nth-child(2) {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f1c40f), color-stop(50%, #f1c40f), color-stop(50%, #2ecc71), to(#2ecc71));
  background-image: -webkit-linear-gradient(top, #f1c40f 0%, #f1c40f 50%, #2ecc71 50%, #2ecc71 100%);
  background-image: linear-gradient(to bottom, #f1c40f 0%, #f1c40f 50%, #2ecc71 50%, #2ecc71 100%);
}

@supports (touch-action: auto) {
  .auto {
    -ms-touch-action: auto;
    touch-action: auto;
  }
  .auto ~ h2::after {
    display: none;
  }
}

@supports (touch-action: none) {
  .none {
    -ms-touch-action: none;
    touch-action: none;
  }
  .none ~ h2::after {
    display: none;
  }
}

@supports (touch-action: manipulation) {
  .manipulation {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
  }
  .manipulation ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pan-x) {
  .pan-x {
    -ms-touch-action: pan-x;
    touch-action: pan-x;
  }
  .pan-x ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pan-y) {
  .pan-y {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
  }
  .pan-y ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pan-left) {
  .pan-left {
    -ms-touch-action: pan-left;
    touch-action: pan-left;
  }
  .pan-left ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pan-right) {
  .pan-right {
    -ms-touch-action: pan-right;
    touch-action: pan-right;
  }
  .pan-right ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pan-up) {
  .pan-up {
    -ms-touch-action: pan-up;
    touch-action: pan-up;
  }
  .pan-up ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pan-down) {
  .pan-down {
    -ms-touch-action: pan-down;
    touch-action: pan-down;
  }
  .pan-down ~ h2::after {
    display: none;
  }
}

@supports (touch-action: pinch-zoom) {
  .pinch-zoom {
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
  }
  .pinch-zoom ~ h2::after {
    display: none;
  }
}
  </style>
 </head>
 <body>
<div class="container">
  <h1>CSS <code>touch-action</code> demo</h1>

  <section>
    <div class="element auto">
      <div></div>
      <div></div>
    </div>
    <h2>Default behavior</h2>
  </section>

  <section>
    <div class="element none">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: none</h2>
  </section>

  <section>

    <div class="element pan-x">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pan-x</h2>
  </section>

  <section>
    <div class="element pan-y">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pan-y</h2>
  </section>

  <section>
    <div class="element pan-left">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pan-left</h2>
  </section>

  <section>
    <div class="element pan-right">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pan-right</h2>
  </section>

  <section>
    <div class="element pan-up">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pan-up</h2>
  </section>

  <section>
    <div class="element pan-down">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pan-down</h2>
  </section>

  <section>
    <div class="element pinch-zoom">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: pinch-zoom</h2>
  </section>

  <section>
    <div class="element manipulation">
      <div></div>
      <div></div>
    </div>
    <h2>touch-action: manipulation</h2>
  </section>
</div>
 </body>
</html>

Объектная модель

Объект.style.touchAction

Браузеры: Настольные Мобильные ?

Internet Explorer	Chrome	Opera	Safari	Firefox
11	36	23		57

Android	Firefox Mobile	Opera Mobile	Safari Mobile
81	68		1

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Разное

См. также

@media