Artikel mit Schlagwort

Bruce Lawson mit dem Tipp des Tages, der vor der Verwendung von pointer-events: none auf Formular-Labels warnt. Wir wissen, dass pointer-events verwendet wird, um zu ändern, wie Elemente auf Klick-, Tipp-, Hover- und Aktivierungszustände reagieren. Aber es bricht anscheinend …

Die Interaktions-Medienfunktionen der Media Queries Level 4 – pointer, hover, any-pointer und any-hover – sollen es Websites ermöglichen, unterschiedliche Stile und Funktionalitäten (entweder CSS-spezifische Interaktivität wie :hover oder JavaScript-Verhalten, wenn sie mit window.matchMedia abgefragt werden) zu implementieren, abhängig von den spezifischen Merkmalen des Eingabegeräts eines Benutzers.

Die CSS-Eigenschaft touch-action gibt Ihnen die Kontrolle über die Auswirkung von Touchscreen-Interaktionen mit einem Element, ähnlich der weiter verbreiteten Eigenschaft pointer-events, die zur Steuerung von Mausinteraktionen verwendet wird.

#element {
  touch-action: pan-right pinch-zoom;
}

Die Eigenschaft touch-action ist nützlich …

Die Eigenschaft pointer-events ermöglicht die Steuerung, wie HTML-Elemente auf Maus-/Touch-Ereignisse reagieren – einschließlich CSS-Hover-/Aktivzuständen, Klick-/Tippereignissen in Javascript und ob der Cursor sichtbar ist oder nicht.

.avoid-clicks {
  pointer-events: none;
}

Während die pointer-events Eigenschaft …