CSS basic user interface
Das Modul CSS basic user interface ermöglicht es Ihnen, das Rendering und die Funktionalität von Elementen, die mit der Benutzerschnittstelle zusammenhängen, zu definieren. Dazu gehören Umriss-Eigenschaften, visuelle Rückmeldungen für Zeigegeräte und Tastaturen sowie die Veränderung des Standardaussehens von UI-Widgets.
Grundlegende Benutzerschnittstellen-Eigenschaften können verwendet werden, um die Benutzererfahrung und -zugänglichkeit zu verbessern, indem visuellen Hinweisen auf Elemente, die interagiert werden, bereitgestellt werden. Dazu gehört das Styling von Mauszeigern und die Navigation mit der Tastatur sowie das Styling des Cursor-Karets, wenn ein bearbeitbares Element den Fokus hat. Das Modul ermöglicht es, Umrisse zu fokussierten (oder nicht fokussierten) Elementen hinzuzufügen, ohne die Dimensionen und das Styling des Box-Modells zu beeinflussen. Dieses UI-Modul ermöglicht auch das Styling von Benutzerschnittstellen-Steuerelementen.
Grundlegende Benutzerschnittstelle in Aktion
Um zu sehen, wie grundlegende Benutzerschnittstelleneigenschaften das Erscheinungsbild von UI-Features verändern können, interagieren Sie mit den Elementen in diesem Beispiel. Beachten Sie, dass einige Funktionen in diesem Beispiel die Benutzerfreundlichkeit verbessern, während andere die Benutzererfahrung beeinträchtigen.
Die CSS-Eigenschaften outline
und outline-offset
wurden verwendet, um den Benutzern Rückmeldungen darüber zu geben, welches Element derzeit den Fokus hat. Eine accent-color
sorgt für eine Themenfarbe für alle Formularsteuerungen. Das Karet, das beim Bearbeiten des Textes erscheint, hat dank der caret-color
-Eigenschaft die gleiche Farbe. Diese können alle als UI-Verbesserungen betrachtet werden.
Einige Funktionen beeinträchtigen die Benutzerfreundlichkeit. Die cursor
-Eigenschaft wurde verwendet, um den Standardcursor des Browsers zu ändern, was verwirrend ist. Die resize
-Eigenschaft verhindert, dass das zweite <textarea>
skaliert werden kann, während die pointer-events
-Eigenschaft verhindert, dass das dritte <textarea>
-Element Klickereignisse erhält. Es ist jedoch weiterhin über die Tastatur fokussierbar.
Um den Code für dieses Beispiel einer grundlegenden Benutzerschnittstelle zu sehen, sehen Sie den Quellcode auf GitHub an.
Referenz
Eigenschaften
accent-color
appearance
-
caret
, Kurzform für: cursor
nav-down
nav-left
nav-right
nav-up
-
outline
, Kurzform für: outline-offset
pointer-events
resize
user-select
Leitfäden
- Erweiterte Formulargestaltung lernen
-
Erklärt, wie
appearance
zum Styling von Formularsteuerungen verwendet werden kann.
Verwandte Konzepte
- CSS
cursor
Eigenschaft - SVG
cursor
Attribut - CSS
:focus
,:focus-within
und:focus-visible
Pseudoklassen CaretPosition
Schnittstelle
Spezifikationen
Specification |
---|
CSS Basic User Interface Module Level 4 |