Cursor und Zeiger

Auf Geräten ohne Touchscreen ist der Cursor für Nutzer unerlässlich, um zu wissen, womit sie interagieren. Sie können auch nützliche Hinweise dazu geben, wie mit einem Element interagiert werden kann oder wie sich eine Bewegung mit einem Trackpad oder einer Maus auf Ihre Website auswirkt.

Cursors

Einige häufige Anwendungsfälle für Cursor werden automatisch von Browsern verarbeitet.

Wenn Sie dies auf einem Gerät mit einem Cursor lesen, sehen Sie sich die Seite an. Vielleicht haben Sie bisher nicht darauf geachtet, wie sich der Cursor ändert. Achten Sie aber auf die Hinweise, die er gibt. Wenn Sie den Mauszeiger auf Text bewegen, ändert sich der Cursor in ein Auswahl-I-Beam, das darauf hinweist, dass Sie den Text auswählen können. Wenn Sie den Mauszeiger auf einen Link bewegen, ändert er sich in eine Hand, die mit dem Zeigefinger zeigt. Das bedeutet, dass Sie eine Aktion ausführen können. An allen anderen Stellen wird ein Standardcursor angezeigt, der oft ein Pfeil ist.

Wenn Sie interaktivere Websites erstellen, sollten Sie den Cursor anpassen, damit Nutzer die Interaktionen besser nachvollziehen können.

Browser unterstützen eine Reihe von Keywords für die cursor-Eigenschaft, die Hinweise zum Ziehen, Ändern der Größe, Auswählen usw. geben.

Wenn keiner der unterstützten Cursor die Interaktionen eines Elements vermittelt, können Sie auch ein SVG- oder PNG-Bild als Cursor verwenden.

Caret-Zeichen

Eine Einfügemarke zeigt Ihre Position im bearbeitbaren Text an. Er unterscheidet sich von Ihrem Cursor, da er nicht der Maus folgt. Sie können die Farbe mit caret-color ändern.

Auf Zeigereingaben eines Nutzers reagieren

Nutzer mit einer Maus oder einem Trackpad können mit einem präziseren Punkt auf dem Bildschirm interagieren als Nutzer mit einem Touchscreen. Wenn Sie nur für die Präzision einer Maus optimieren, können Nutzer mit Touchscreens oder Problemen mit der Feinmotorik möglicherweise nicht wie gewünscht mit Ihrer Seite interagieren.

Häufige Probleme sind zu kleine Schaltflächen oder interaktive Elemente, die zu nah beieinander liegen. Dadurch wird es Nutzern erschwert, mit dem richtigen Element zu interagieren.

Es ist wichtig, dass Ihre Schaltflächen und andere interaktive Ziele groß genug sind, damit Ihre Website barrierefrei ist. Sie können Ihre Stile auch basierend auf der Präzision der Eingabegeräte des Nutzers mit den Media-Queries pointer und any-pointer anpassen.

lassen sich mit der Media-Funktion pointer auf das primäre Eingabegerät des Nutzers und mit any-pointer auf alle Eingabegeräte beziehen. Sie können Geräte wie Mäuse mit fine und Geräte wie Touchscreens mit coarse abgleichen. Der Wert none gibt an, dass der Nutzer kein Eingabegerät mit einem Zeiger verwendet.

Zeiger- und Touch-Ereignisse

Bestimmte Touchscreen-Gesten deaktivieren

Wenn Sie einen Touchscreen verwenden, werden einige gängige Touch-Gesten vom Browser verarbeitet. Wenn Sie beispielsweise mit zwei Fingern auf das Display tippen und die Finger auseinanderziehen, wird die Website in der Regel vergrößert. openjdk-11-jre-headless

Wenn Sie verhindern möchten, dass der Browser bestimmte Aktionen verarbeitet, listen Sie die Aktionen auf, die das Element verarbeiten soll. Mit pan-x und pan-y werden Schwenkgesten mit einem Finger aktiviert. Sie können zusammen mit pinch-zoom aktiviert werden, wodurch das Zoomen und Schwenken mit mehreren Fingern möglich ist.

Das Keyword manipulation entspricht pan-x pan-y pinch-zoom. manipulation schließt andere Touch-Gesten aus, die mehrere Berührungen in kurzer Zeit erfordern, z. B. Doppeltippen zum Zoomen.

Nachdem Sie die Browserverarbeitung einer Aktion deaktiviert haben, indem Sie sie aus touch-action ausschließen, können Sie Zeigerereignisse für diese Aktion einrichten.

Alle Ereignisse und Aktionen deaktivieren

In einigen Fällen möchten Sie möglicherweise angeben, dass ein Element nicht interaktiv ist. Wenn Sie pointer-events: none für eine Schaltfläche festlegen, können Sie beispielsweise nicht auf die Schaltfläche klicken oder einen Hover-Zustand auslösen.

Wissen testen