1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: touch-action
slug: Web/CSS/touch-action
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/touch-action
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>touch-action</code></strong> définit si une région donnée peut être manipulée par l'utilisateur grâce à des interactions tactiles (en déplaçant ou en zoomant) et comment cette interaction fonctionnera.</p>
<pre class="brush:css no-line-numbers notranslate">/* Avec un mot-clé */
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;
/* Valeurs globales */
touch-action: inherit;
touch-action: initial;
touch-action: unset;
</pre>
<p>Par défaut, le déplacement et le zoom sont exclusivement gérés par le navigateur, ce qui déclenche un évènement {{event("pointercancel")}} à destination de l'application. En désactivant la prise en charge de ces gestes, l'application peut alors fournir ses propres gestionnaires d'évènements pour {{event("pointermove")}}, {{event("pointerup")}}.</p>
<p>On utilise parfois cette propriété pour désactiver les interactions tactiles sur un élément pour un jeu ou une carte qui fournissent leur propre gestion tactile.</p>
<p>Lorsqu'une interaction tactile a lieu, le navigateur inspecte les valeurs de <code>touch-action</code> pour l'élément et ses ancêtres jusqu'à atteindre l'élément qui implémente le geste (c'est-à-dire celui qui peut défiler/zoomer). En pratique, <code>touch-action</code> est généralement uniquement appliquée aux éléments de plus haut niveau ayant besoin d'un comportement spécifique. Il n'est pas nécessaire de redéfinir <code>touch-action</code> sur les descendants.</p>
<div class="blockIndicator note">
<p><strong>Note :</strong> Lorsqu'un geste est déjà initié, tout changement sur <code>touch-action</code> n'aura aucun impact sur le geste en cours.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<p>La propriété <code>touch-action</code> peut être définie grâce à :</p>
<ul>
<li>l'un des mots-clés parmi <code><a href="#auto">auto</a></code>, <code><a href="#none">none</a></code>, <code><a href="#manipulation">manipulation</a></code><em> ou</em></li>
<li>un mot-clé parmi <code><a href="#pan-x">pan-x</a></code>, <code><a href="#pan-keywords">pan-left</a></code>, <code><a href="#pan-keywords">pan-right</a></code>, et/ou un mot-clé parmi <code><a href="#pan-y">pan-y</a></code>, <code><a href="#pan-keywords">pan-up</a></code>, <code><a href="#pan-keywords">pan-down</a></code> et éventuellement le mot-clé <code><a href="#">pinch-zoom</a></code>.</li>
</ul>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>auto</code></dt>
<dd>L'agent utilisateur détermine les interactions tactiles possibles (zoomer, déplacer le viewport) lorsque l'élément est touché.</dd>
<dt><code>manipulation</code></dt>
<dd>Les gestes de déplacement et de zoom sont autorisés mais les gestes non-standards (ex. double touche pour zoomer) sont désactivés. Cette valeur est un alias pour <code>pan-x pan-y pinch-zoom</code>.</dd>
<dt><code>none</code></dt>
<dd>Cette valeur désactive tous les comportements par défaut et permet au contenu de gérer les interaction tactiles (les touches qui commencent sur l'élément ne doivent pas déclencher de comportements tactiles par défaut).</dd>
<dt><code>pan-x</code></dt>
<dd>L'agent utilisateur peut considérer que les touchers qui débutent sur l'élément ont pour but de faire défiler horizontalement le plus proche ancêtre de l'élément qui possède du contenu en défilement horizontal. Cette valeur peut être combinée avec <code>pan-y</code>, <code>pan-up</code>, <code>pan-down</code> et/ou <code>pinch-zoom</code>.</dd>
<dt><code>pan-y</code></dt>
<dd>L'agent utilisateur peut considérer que les touchers qui débutent sur l'élément ont pour but de faire défiler verticalement le plus proche ancêtre de l'élément qui possède du contenu en défilement vertical. Cette valeur peut être combinée avec <code>pan-x</code>, <code>pan-left</code>, <code>pan-right</code> et/ou <code>pinch-zoom</code>.</dd>
<dt><code>pan-left</code>, <code>pan-right</code> {{experimental_inline}}</dt>
<dd>L'agent utilisateur peut considérer que les touchers qui commencent sur l'élément n'ont pour but que de faire défiler horizontalement le contenu du plus proche ancêtre de l'élément qui possède du contenu qui peut défiler (<em>scrollable</em>) horizontalement.</dd>
<dt><code>pan-up</code>, <code>pan-down</code> {{experimental_inline}}</dt>
<dd>L'agent utilisateur peut considérer que les touchers qui commencent sur l'élément n'ont pour but que de faire défiler verticalement le contenu du plus proche ancêtre de l'élément qui possède du contenu qui peut défiler (<em>scrollable</em>) verticalement.</dd>
<dt><code>pinch-zoom</code></dt>
<dd>L'agent utilisateur peut considérer que les touches qui commencent sur l'élément n'ont pour but que de zoomer sur l'ancêtre le plus proche qui contient du contenu sur lequel on peut zoomer.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><ul>Ma list
<li>UnLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll</li>
<li>UnAutreLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll</li>
</ul>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">ul {
width: 200px;
height: 50px;
overflow-x: scroll;
}
ul > li {
touch-action: pan-x pinch-zoom;
}
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples')}}</p>
<div class="blockIndicator note">
<p><strong>Note :</strong> La propriété <code>touch-action</code> est également utilisée afin de supprimer le délai donné à l'évènement {{event("click")}} pour prendre en charge le zoom via la double-touche.</p>
</div>
<h2 id="Accessibilité">Accessibilité</h2>
<p>Une déclaration <code>touch action: none;</code> empêchera le navigateur de zoomer. Cela peut empêcher les personnes à faible vision de lire et de comprendre le contenu de la page.</p>
<ul>
<li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
<li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 - Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html"> (en anglais)</a></li>
</ul>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Compat', '#touch-action', 'touch-action')}}</td>
<td>{{Spec2('Compat')}}</td>
<td>Ajout de la valeur <code>pinch-zoom</code> pour la propriété.</td>
</tr>
<tr>
<td>{{SpecName('Pointer Events 2 Ext', '#additional-touch-action-values', 'touch-action')}}</td>
<td>{{Spec2('Pointer Events 2 Ext')}}</td>
<td>Ajout des valeurs <code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code> pour la propriété.</td>
</tr>
<tr>
<td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td>
<td>{{Spec2('Pointer Events')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{compat("css.properties.touch-action")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/API/Pointer_events">Les événements de pointage</a></li>
<li>Un billet du blog WebKit : <a href="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/">une gestion plus responsive du toucher sur iOS (en anglais)</a></li>
<li><a href="*https://developers.google.com/web/updates/2017/01/scrolling-intervention">Rendre le défilement tactile rapide, par défaut sur le Google Developers Blog</a></li>
<li><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap">Le module de spécification CSS Scroll Snap</a></li>
</ul>
|
