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

Leitfäden

Erweiterte Formulargestaltung lernen

Erklärt, wie appearance zum Styling von Formularsteuerungen verwendet werden kann.

Verwandte Konzepte

Spezifikationen

Specification
CSS Basic User Interface Module Level 4

Siehe auch