Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.
Übersicht
Die CSS-Eigenschaft touch-action spezifiziert, ob das Standardverhalten des Browsers ausgeführt wird oder nicht (z. B. durch Scrollen oder Zoomen).
| Initialwert | auto |
|---|---|
| Anwendbar auf | alle Elemente außer: nicht ersetzte Inlineelemente, Tabellenzeilen, Zeilengruppen, Tabellenspalten und Spaltengruppen |
| Vererbt | Nein |
| Medien | visuell |
| Berechneter Wert | wie angegeben |
| Animierbar | Nein |
| Kanonische Reihenfolge | die eindeutige Reihenfolge definiert durch die formale Grammatik |
Syntax
auto | none | [[ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ]] | manipulation
Werte
auto- Der User-Agent führt das voreingestellte Verhalten für Berührungen aus, wie die Manipulation des Elements durch Scrollen oder Zoomen bei Berührungen, die in dem Element beginnen.
none- Berührungen, die auf dem Element beginnen, lösen nicht das Standardverhalten aus.
pan-x- Der User-Agent reagiert nur auf Berührungen, die das horizontale Scrollen des nächsten scrollbaren Elements auslösen.
pan-y- Der User-Agent reagiert nur auf Berührungen, die das vertikale Scrollen des nächsten scrollbaren Elements auslösen.
manipulation- Der User-Agent reagiert nur auf Berührungen, die dem Scrollen oder dem ununterbrochenen Zoomen dienen.
Beispiel
.list {
width: 200px;
height: 50px;
overflow-x: scroll;
}
.list > .entry {
touch-action: pan-x;
}
Spezifikationen
| Spezifikation | Status | Anmerkung |
|---|---|---|
| Pointer Events Die Definition von 'touch-action' in dieser Spezifikation. |
Empfehlung |
Browser Kompatibilität
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 36.0 | Nicht unterstützt[1] | 10.0-ms[2] 11.0 |
23.0 | Nicht unterstützt[4] |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 37.0 | Nicht unterstützt[1] | 10.0 -ms 11.0 | 24.0 | Nicht unterstützt[4] |
[1] Seit Firefox 29: Die Unterstützung in Firefox ist standardmäßig deaktiviert, Aktivierung über die Einstellung layout.css.touch_action.enabled preference (Bug 960316).
[2] IE10+ unterstützt zusätzlich die nicht standardisierten Werte pinch-zoom, double-tap-zoom, cross-slide-x and cross-slide-y.
[4] Siehe WebKit Bug 133112.