touch-action

ジャンプ先:
  1. 構文
  2. 例
  3. アクセシビリティへの配慮
  4. 仕様書
  5. ブラウザーの対応
  6. 関連情報

CSS の touch-action プロパティは、指定された領域がタッチスクリーンで操作できるかどうか (例えば、ブラウザー内に組み込まれたパン又はズーム機能)、及びその方法を指定します。

/* キーワード値 */
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;

/* グローバル値 */
touch-action: inherit;
touch-action: initial;
touch-action: unset;

初期値auto
適用対象次を除く全要素: 非置換インライン要素およびテーブル行、行グループ、テーブル列、列グループ
継承不可
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

既定で、パン (スクロール) 及びピンチ操作はブラウザーとは独立して別に扱われます。 Pointer_events を使用するアプリケーションは、ブラウザーがタッチジェスチャーの扱いを始めるときに pointercancel イベントを受け取ります。ブラウザーがどのジェスチャーを扱うかについての具体的に定義することによって、アプリケーションはジェスチャーを記憶するために pointermove 及び pointerup リスナーの中で独自の振る舞いを提供することができます。 Touch_events を使用するアプリケーションは、 preventDefault() を呼び出すことでブラウザーのジェスチャーの扱いを無効にすることができますが、イベントリスナーが呼び出される前に、 touch-action を使用してブラウザーにアプリケーションの目的を知らせるようにもしてください。

ジェスチャーが開始されると、ブラウザーはタッチ要素の touch-action の値を、祖先のうちジェスチャーを実装しているもの (言い換えれば、最初のスクロールを含む要素) まで交差させます。つまり実際には、 touch-action は通常、その要素の子孫のいずれかに touch-action を明示的に指定する必要なく、独自の動作を持つ個々の要素にのみ適用されます。ジェスチャーが開始された後、 touch-action 値を変更しても、現在のジェスチャーの動作には影響を与えません。

構文

touch-action プロパティは次の何れかの形で指定することができます。

値

auto
ブラウザーがすべてのパンやズームのジェスチャーを扱うことを有効にします。
none
ブラウザーがすべてのパンやズームのジェスチャーを扱うことを無効にします。
pan-x
指１本で水平にパンするジェスチャーを有効にします。 pan-y, pan-up, pan-down, pinch-zoom と組み合わせることができます。
pan-y
指１本で垂直にパンするジェスチャーを有効にします。 pan-x, pan-left, pan-right, pinch-zoom と組み合わせることができます。
manipulation
パン及びズームのジェスチャーは有効にしますが、ダブルタップでのズームなど、標準外の追加的なジェスチャーを無効します。ダブルタップでズームすることを無効にすることで、ユーザーが画面をタップしたとき、ブラウザーがクリックイベントの生成を待つ必要がなくなります。これは "pan-x pan-y pinch-zoom" の別名です (互換性のために、これも有効です)。
pan-left, pan-right, pan-up, pan-down
指定された方向へのスクロールを始める指１本のジェスチャーを有効にします。スクロールが始まると、その方向が予約されることがあります。なお、「上」にスクロールすること (pan-up) は、ユーザーが画面の表面を指で下方向にドラッグすることを意味し、同様に pan-left はユーザーが指で右にドラッグすることを意味します。より単純な表現がない限り、複数の方向を組み合わせることができます (例えば、 "pan-left pan-right" は "pan-x" の方がより単純なので不正ですが、 "pan-left pan-down" は有効です)。
pinch-zoom
複数の指でのページのパンやズーム有効にします。これは pan- のあらゆる値と組み合わせることができます。

形式文法

auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

例

最も一般的な使い方は、要素 (及びスクロールしないその子孫) のすべてのジェスチャーを無効にして、地図やゲームの画面のように、独自のドラッグやズームの振る舞いを提供することです。

#map {
  touch-action: none;
}

もう一つのよくあるパターンは、水平方向のパンを扱うためにポインターイベントを使用する画像ギャラリーですが、文書自体の垂直スクロールやズームを阻害したくない場合です。

.image-carousel {
  width: 100%;
  height: 150px;
  touch-action: pan-y pinch-zoom;
}

touch-action は、ダブルタップによるズームジェスチャーに対応することによって起きたクリックイベントの遅延を完全に止めるためにもよく使用されます。

html {
  touch-action: manipulation;
}

アクセシビリティへの配慮

touch action: none; の宣言は、ブラウザー内蔵のズーム機能を操作することを阻害することがあります。これは弱視の人がページのコンテンツを読んで理解できるようになることを阻害します。

仕様書

仕様書 策定状況 コメント
Compatibility Standard
touch-action の定義		 現行の標準 pinch-zoom プロパティ値を追加。
Pointer Events – Level 2
touch-action の定義		 草案 pan-left, pan-right, pan-up, pan-down プロパティ値を追加。
Pointer Events
touch-action の定義		 勧告 初回定義。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応3612

521

291 2

11

10 -ms-

23 なし3
manipulation3612

521

291 2

11

10 -ms-

23 なし
double-tap-zoom なし12 なし

11

10 -ms-

なし なし
pinch-zoom5612 なし4

11

10 -ms-

43 なし
pan-up, pan-down, pan-left and pan-right55 なし なし4 なし42 なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応3636 あり

52

292

 あり なし3 あり
manipulation3636 あり

52

292

 あり9.1 あり
double-tap-zoom なし なし あり なし なし なし なし
pinch-zoom5656 あり なし443 なし6.0
pan-up, pan-down, pan-left and pan-right5555 なし なし442 なし6.0

1. Not applicable to Firefox platforms that support neither pointer nor touch events.

2. From version 29: this feature is behind the layout.css.touch_action.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. See WebKit bug 133112.

4. See bug 1285685.

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: Neos21, mfuji09
最終更新者: Neos21,