CSS-Eigenschaft „Touch-Action“: Wie bei der Eingabe präziser Taktile

Home » Python » CSS-Eigenschaft „Touch-Action“: Wie bei der Eingabe präziser Taktile

Während wir mit taktilen Schnittstellen arbeiten, gibt es ein Detail, das den Unterschied zwischen einem flüssigen und anderen frustrierenden Erlebnis markiert: Entscheiden Sie, ob Sie den Navigator ausgewählt haben und ob Sie Ihren Code eingegeben habenDie CSS-Eigenschaft touch-action Es ist nur der Unterbrecher, der es erlaubt, sein Verhalten auf dem Millimeter einzustellen.

Lejos de ser algo esotérico, touch-action Steuern Sie die Ausrichtung, den Zoom oder die anderen voreingestellten Gesten que the navegador aplicaría al tocar un elemento. Wenn Sie es verwenden, vermeiden Sie Rückschläge in Ereignissen, verwenden Sie nur wenig JavaScript und steuern Sie echte Komponenten wie Karten, Karten oder Spiellizenzen.

Was ist die exakte Touch-Aktion?

In ein paar Worten, touch-action Geben Sie dem Benutzer einen Hinweis darauf, dass die Taster aus der ursprünglichen Form ausgeworfen werden können In einer Region der Seite und Orte müssen Sie sie für Ihre Veranstaltungsmanager reservieren. Es ist die Ergänzung zum Tastsinn pointer-events, que mes asociar mes a interactions with ratón, pero con an enfoque específico en gestos like the displazamiento y el zoom.

Somit Es ist möglich, dass der Navigator seine Arbeit erledigt (zerstört, vergrößert) oder blockiert, um die Interaktionen durchzuführen (z. B. Zoomen innerhalb einer Karte) Keine Interferenzen und keine künstlichen Demos click.

Sintaxis y formas de uso

Das Gerät ist für verschiedene Kombinationen mit viel Beton geeignet. Sie können einen einzigen Wert angeben oder verschiedene kompatible Komponenten auswählen Zur präzisen Einstellung des Tastverhaltens.

/* Declaración típica */
#elemento {
  touch-action: pan-right pinch-zoom;
}

Wenn die genaue Grammatik erforderlich ist, Es ist die formale Versöhnung der Sintaxis:

touch-action =
  auto |
  none |
   ||  || pinch-zoom ] |
  manipulation

Mit anderen Worten, kann einen globalen Wert nutzen (automatisch, keine, Manipulation) Es gibt eine Kombination aus horizontalen und vertikalen Ausrichtungselementen, mehr pinch-zoom optional.

Werte der Touch-Action und dass es jedes Mal eins gibt

Dieses Angebot enthält wertvolle Hinweise für viele konkrete Fälle. Wir möchten vermeiden, dass JavaScript erneut implementiert wird Im Gegenteil, Sie müssen sich frei entscheiden, wann immer es nötig ist.

auto

Deja que el navegador Nehmen Sie alle Einstellungen zum Platzieren und Zoomen vor. Es liegt in der Verantwortung des Defekts: Der Benutzer kann ihn entfernen, um ihn zu entfernen und ihn zu verstärken, ohne dass er mehr braucht.

none

Sperrung durch vollständiges Eingreifen des Navigators in diesen Gestohlen. Keine pellizco-zoom-nativos; Sie müssen JavaScript implementieren, wenn Sie diese benötigen. Es ist ideal für Karten oder Karten, bei denen die Kontrolle zu 100 % gewährleistet sein muss.

manipulation

Ermöglichen Sie die Entfernung und den Zoom, aber deaktivieren Sie sie Ciertos sind nicht in der Lage, die doppelte Haube für den Verstärker zu verwenden. Es ist in der Praxis ein Pseudonym von „Schwenken-X, Schwenken-Y, Pinch-Zoom" (Die Kombination ist ausdrücklich erklärt, da sie für die Kompatibilität gültig ist). Wenn Sie die doppelte Haube verlassen, Außerdem entfällt die Notwendigkeit, die Generierung von Ereignissen erneut durchzuführen click Aufgrund eines Problems ist mir die Antwort auf die Schnittstelle am besten.

pan-x

Activa Die horizontale Anordnung erfolgt allein. Puede combinarse con pan-y, pan-up, pan-down und / oder pinch-zoom. Es un atajo que engloba pan-left y pan-right.

pan-y

Activa Die vertikale Anordnung erfolgt allein. Puede combinarse con pan-x, pan-left, pan-right und / oder pinch-zoom. Auf die eine oder andere Weise ist es eine Sache, die darin enthalten ist pan-up y pan-down.

pan-left, pan-right, pan-up, pan-down

Sie erlauben Sie müssen das Gerät nur in die angegebene Richtung entfernen. Ojo: una vez iniciado el desplazamiento, Sie können die Richtung umkehren. Es gibt ein Detail, das sie verwirren: an den Schnittstellenanschlüssen, „Schwenk nach oben„Bedeutet, dass der Benutzer den Inhalt auf dem Bildschirm ablegen muss, damit der Inhalt so schnell wie möglich auf dem Bildschirm angezeigt wird.“Schwenk nach links„Impliziert, dass der Inhalt auf den Markt gebracht werden muss, damit der Inhalt nicht mehr verfügbar ist.

pinch-zoom

Aktivieren Gestos Multi-Dedo dedo de Zoom y desplazamiento. Sie können es mit der Wertschätzung kombinieren pan-*. Von Navigatoren, die es implementieren, Der Beauftragte kann den Zoom sofort fortsetzen Es besteht keine Gefahr, dass ein Ereignis abgesagt wird.

Kombinations- und Normalisierungseinstellung

Bei der Kombination von Richtungen ist eine Vereinfachung erforderlich. Nicht alles, was Sie schreiben können, ist gültig, wenn Sie eine einfachere Form haben. Zum Beispiel: "pan-left pan-right„Wir betrachten dies als ungültig, weil die Form korrekt ist und mehr Zeit hat pan-x.

Es gibt jedoch keine Kombinationen, die Sie gesendet haben, wie „pan-left pan-down„um zuzulassen, dass Plazamientos que Inician hacia la izquierda o hacia abajo. In diesem Fall gibt es keine gleichwertige direkte Abkürzung, da es sich um eine akzeptable Kombination handelt.

Denken Sie auch daran Puedes mezclar ejes y pellizco. Zum Beispiel: "pan-x pinch-zoom„Ermöglichen Sie eine horizontale Ausrichtung durch eine horizontale Ausrichtung und einen Multi-Zoom-Vorgang, indem Sie die vertikale Ausrichtung automatisch aktivieren.

Cuándo usar cada valor: patrones reales

Der typische Fall ist eine Karte oder ein Spieltitel, der auf der Seite eingebettet ist. Wenn das Gesto des Pellizcar sich auf die eigene Karte auswirkt und nicht auf den Navigator zoomt, te interesa declarar touch-action: none; Sie haben Ihr personalisiertes Zoom in JavaScript geschrieben.

Weitere Szenarios finden Sie in Ihrem Code Es wird nur ein Teil der Interaktion implementiert (z. B. der Zoom) und es ist wichtig, dass der Navigator die ursprüngliche Aufgabe übernimmt. In diesem Fall: „touch-action: pan-x pan-y;„Der Agent des Benutzers hat die Aufgabe übernommen und muss sie kostenlos nutzen, um den Zoom zu nutzen, wie er sagt.

Für UI-Komponenten wie horizontale Würfel, pan-x suele ser la mejor opción. Ermöglicht das seitliche Verschieben mit nur einem Klick, verhindert, dass der Zoom deaktiviert wird, wenn er nicht geöffnet wird, und vermeidet Konflikte mit dem vertikalen Bildlauf auf der Seite, wenn er nicht aktiviert ist.

Wenn Ihre Priorität ist Sofortige Antwort auf die Haube und Beseitigung der Verzögerung der doppelten Haube, manipulation Es ist ein Wunder. Beenden Sie den Doppelklick, um ihn zu verstärken und mit der Notwendigkeit zu verbinden click, es gibt ein Gefühl von „Schnappheit“ auf Tasten und Schnüren.

Impacto en accesibilidad

Ein kritischer Punkt: si declaras touch-action: none; Blockiert den nativen Zoom des Navigators. Personen mit niedriger Sicht, die einen Verstärker benötigen, um diese Kapazität zu nutzen, können dazu führen, dass Ihre Schnittstelle nicht mehr zugänglich ist.

Wenn der Kontext erlaubt ist, considera mantener pinch-zoom aktiviert oder suchen barrierefreie Alternativen que no impidan el aumento. Hacer zoom es, para muchos usuarios, una manramienta de lectura essential; Nein, es gibt keine Deaktivierungen mehr.

Kompatibilität mit Navigationsgeräten

Die Unterstützung von touch-action es amplio, pero con matices. Die modernen Browser sind Chrome (36+), Edge (12+), Firefox (52+) und Opera (23+). Implementieren Sie das Eigentum mit den wichtigsten Werten.

Die historische Delikatesse liegt neben Safari. Für iOS Safari gibt es Einschränkungen, mit solider Unterstützung auto y manipulation, mientras que otros valores han sido mehr variabless según version and contexto. Bei älteren Safari-Schreibversionen (13+) ist die Kompatibilität besonders gut. Aber wir empfehlen Ihnen, bestimmte Fälle zu prüfen, Dies alles hängt von den verfügbaren Kombinationen ab.

Las tablas de compatibilidad públicas (las típicas que consamos a diario) Es wird durch Beiträge der Gemeinschaft und der US-Städte aktualisiert; Wenn Ihr Projekt sinnvoll ist, müssen Sie es auf konkrete und reale Maßnahmen prüfen. Zehn davon auch Nur auf Geräten mit Berührungsbildschirm können Sie das Verhalten überprüfen de forma fidedigna.

Praktische Anwendungsbeispiele

Veamos war einer der Gönner der Erklärung, dass er das Leben retten wollte. Recuerda probar siempre en hardware táctil Um zu vergleichen, dass die Erfahrung das Beste ist.

1) Alle Einstellungen deaktivieren (Karte oder Leinwand personalisieren)

Bis zu dem Zeitpunkt, an dem Sie die Anordnung und den Innenzoom ohne Interferenzen ausführen müssen. Der Navigator kann weder den Plazamiento noch den Pellizco abfangen.

<!-- HTML -->
<div id='mapa' class='superficie'></div>

<!-- CSS -->
.superficie {
  touch-action: none;
}

2) Aktivieren Sie die natürliche Einstellung, indem Sie nur den Zoom steuern

Wenn Ihr JavaScript den Zoom aktiviert hat, ist der Browser geöffnet Führen Sie den Bildlauf in den nächsten Sekunden aus para no reinventar la rueda.

.zoom-personalizado {
  touch-action: pan-x pan-y;
}

3) Horizontale Ausrichtung mit pellizco-zoom

Für Carruseles Complejos oder Galerien: Scrollen Sie horizontal nach unten und zoomen Sie nach unten, sin scroll vertical nativo.

.galeria-avanzada {
  touch-action: pan-x pinch-zoom;
}

4) Desplazamientos por rección inicial

Bei Gelegenheit kann dies gestattet werden Sie müssen nur eine konkrete Richtung festlegen (S. ej., para no interferir con otros Componentes).

.panel-contextual {
  touch-action: pan-left pan-down;
}

5) Atajo pragmático: Manipulation

Wenn Sie auf eine Berührung mit der doppelten Haube reagieren, manipulation es un gran comodín. Ayuda a evitar el retraso del click Post-Toque.

button, a {
  touch-action: manipulation;
}

Beziehung mit pointer-events y eventos de clic

Obwohl sie manchmal verwirrt sind, touch-action y pointer-events atacan problemas distintos. Der zweite Schritt entscheidet, ob ein Element mit „Punteros“ (ratón, táctil, lápiz) auf der Ebene der Trefferprüfung reagiert; el primero determina Wenn Sie den Defekt berühren, können Sie ihn aus dem Navigationsgerät auswerfen in dieser Region.

Zusätzlich Deaktivieren Sie die Funktion wie die Doppelhaube mit manipulation Elimina el retraso clásico del click Über eine bewegliche Haube. Diese Verzögerung besteht darin, zwischen einer einfachen Haube und dem Anfang einer doppelten Haube zum Zoomen zu unterscheiden; Wenn die doppelte Haube nicht existiert, kann der Navigator die Tür öffnen click ohne zu warten

Hinweise und Details zur Implementierung

Mit pinch-zoom, hay navegadores que Starten Sie den Zoom sofort weiter Es besteht jedoch die Absicht, die JavaScript-Aktion abzubrechen. Este comportamiento favorece una sensación de inmediatez In der Pellizco-Geste sind die Elemente enthalten, die sie zulassen.

Es ist auch wichtig, dass Sie die Richtung einschränken, in der ein Plan beginnt. Der Benutzer kann die Richtung umkehren, nachdem er mit dem Scrollen begonnen hat. Dies ist eine Erfahrung mit dem, was der Herr von einer Liste oder einer Bibliothek erwartet, und vermeidet künstliche Blöcke mitten in der Geste.

Gute Praktiken

Erstens, wenden Sie sich an die Mindesteingriffsregel: Die Tapferkeit beschränkt sich kaum darauf, was Sie in Ihrem Fall tun müssen. Si te basta con pan-x, keine Verwendungen none. Es ist in seiner natürlichen Form erhalten und zugänglich.

Zweite, vollständige Hardware-Prüfung: Das bedeutet, dass der Emulator die Trägheit und die Reibung nicht beeinträchtigen kann. Die taktilen Sensationen sind praktisch, und kleine Veränderungen sind möglich touch-action se notan.

Tercero, si bloqueas el zoom pour encessidades del produkto, Wir bieten Alternativen zur Zugänglichkeit an (Kontrollen des Text-Tamaños, Klarsicht-Interview, Adecuado-Kontrast). Privar del zoom sin alternativa perjudica la lectura.

Cuarto, documenta y acuerda comportamiento con el equipo: Markieren Sie die Klarstellungen zwischen CSS und JavaScript Um Konflikte zu vermeiden, müssen die Zuhörer alle Ereignisse oder Bibliotheken absagen, die für mittelfristig gedacht sind.

Nützliche Klassen und Frameworks

Viele aktuelle Anwendungsframeworks clases que mapean 1:1 a touch-action, lokal acelera prototipado y cambios. Es kommt häufig vor, dass es verschiedene Varianten gibt touch-auto, touch-none, touch-pan-x o touch-pan-y.

<div class='h-48 w-full touch-auto overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>
<div class='h-48 w-full touch-none overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>
<div class='h-48 w-full touch-pan-x overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>
<div class='h-48 w-full touch-pan-y overflow-auto'>
  <img class='h-auto w- max-w-none' src='...' alt=''>
</div>

Dies nutzt Hilfsmittel, um die CSS-Laufzeit und -Kohärenz zu gewährleisten; recuerda que bajo el capó siguen siendo valores de touch-action, mit den unterschiedlichsten Kombinations- und Wirkungsregeln.

Testen und Debuggen

Um die Wirkung zu überprüfen, ist es ideal, ein taktiles Gerät zu verwenden. Einige Benutzer haben die aktuelle Touch-Emulation auf ihren DevTools durchgeführt, aber nicht in Perfektion reproduziert, aber nicht in mehreren Fällen gleichzeitig.

Wenn Sie nicht geantwortet haben, überprüfen Sie die Prioritäten: Was ist wirklich ein Element, das die Ereignisse rezitiert? ¿Hey Hörer, die por preventDefault()? Bestätigen Sie die computed style de touch-action y chequear superposiciones con pointer-events spart Ihnen Stunden.

Fragmentos listos para copiar

Unos cuantos atajos útiles para el day a day. Úsalos como base y ajústalos a tu caso.

/* Desactiva todo (señal de: me ocupo yo por JS) */
.superficie { touch-action: none; }

/* Solo desplazamiento horizontal */
.carrusel { touch-action: pan-x; }

/* Solo desplazamiento vertical */
.lista { touch-action: pan-y; }

/* Inicios hacia derecha + hacia arriba */
.panel { touch-action: pan-right pan-up; }

/* Pellizco-zoom + desplazamiento en cualquier eje (sin doble tap) */
.interactivo { touch-action: manipulation; }

Notas de soporte específicas

In der Vergangenheit der Wert pinch-zoom Wird seit der Version 56 durch Chrome-Unterstützung populär gemacht, und Ihr Comportamiento habe ich verfeinert. Stellen Sie sicher, dass Ihre App nicht in einen Konflikt gerät, wenn Sie auf der Plattform eine Systemverbindung herstellen gestos del SO (Beispiel: Gestos de navegación por bordes).

Wenn Ihr öffentliches Ziel iOS umfasst, erhalten Sie Folgendes: Die erweiterten Kombinationen können nicht mit Chromium kompatibel sein. Die Tests müssen durchgeführt werden, sobald UX in die erste Richtung geht oder die doppelte Haube blockiert.

Zusammenfassung der Sintaxis und mentaler Modelle

Eine Möglichkeit, keine Zweideutigkeiten zu vermeiden, ist im Kopf. Der erste Schritt besteht darin, die zulässige Richtung einzuhalten (Pan-x, Pan-y, Pan-links usw.); después entscheidet si añades pinch-zoom; y, si lo tuyo es la rapidez, USA manipulation als Abkürzung a lo típico sin doble toque.

Ja, das bringt die Vereinfachung nicht mit sich: Wenn Ihre Kombination mit einem Gerät geschrieben werden kann, verwenden Sie das Gerät. Es ist lesbar und vermeidet ungültige Werte (der Klassiker „Pan-Links-Pan-Rechts“, das heißt pan-x).

Plantilla de estilos para proyectos

Dieser Block wird in Design-Systeme und Komponentenbibliotheken eingebunden. Definieren Sie Ihre CSS-Anwendungen für die häufige Verwendung y tendrás coherencia en ter equipos.

/* Utilidades corporativas */
.u-touch-auto { touch-action: auto; }
.u-touch-none { touch-action: none; }
.u-touch-pan-x { touch-action: pan-x; }
.u-touch-pan-y { touch-action: pan-y; }
.u-touch-zoom { touch-action: pinch-zoom; }
.u-touch-sensible { touch-action: manipulation; }

Con estas clases, documentas la intención (z. B. „vernünftig“ impliziert die Antwort) Als ein erfahrener Techniker die Arbeit erleichtert, wird es anderen Entwicklern erleichtert.

Kleine Checkliste vor der Veröffentlichung

– „Hast du die Tapferkeit weniger aufdringlich, als dass du dein Ziel erreicht hättest?“ Wenn jemand nativ ist, déjalo nativ.
– Ist Ihre App mit Zoom nutzbar? Es gibt keine Opfer, es ist nicht unantastbar.
– Wurde iOS und Android tatsächlich verglichen? Die Emulation ist nützlich, aber noch nicht endgültig.
– ¿Los Hörer nicht interfieren con el comportamiento esperado? Evita cancelaciones globales.

Es ist klar, dass touch-action Es ist eine unverzichtbare Hilfe, um das Tasterlebnis zu verbessern: Um zu begrenzen, was Ihre Mutter und Ihre Tochter tun, reduzieren Sie die Latenz wie im Buch click Über die Haube hinaus bieten wir Ihnen Kombinationsmöglichkeiten für alle möglichen Fälle an; Wenn es darum geht, reale Geräte und ein gut zugängliches Haus zu prüfen, neigen sie zu taktilen Komponenten, die ihnen natürliche und flexible Eigenschaften verleihen.