Grundlegende Benutzeroberfläche in CSS

Grundlegende Benutzeroberfläche in Aktion

Um zu sehen, wie grundlegende Benutzeroberflächen-Eigenschaften das Erscheinungsbild von UI-Funktionen ä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.

<div><span contenteditable>Edit this text </span></div> <fieldset> <legend>Play with these fake form controls</legend> <input type="checkbox" id="check" /> <input type="radio" name="a" /> <input type="radio" name="a" /> <input type="range" /> <progress></progress> </fieldset> <fieldset> <legend>Be careful not to ruin usability: try resizing these.</legend> <textarea> cursor: wait; </textarea> <textarea> resize: none; </textarea> <textarea> pointer-events: none; </textarea> </fieldset> 

body { font-family: sans-serif; font-size: 1.25rem; } [contenteditable] { cursor: copy; caret-color: magenta; border: 1px solid #cccccc; } :focus { outline: dashed magenta 3px; outline-offset: 10px; } * { accent-color: magenta; } div, fieldset { margin: 20px; } textarea:nth-of-type(1) { cursor: wait; } textarea:nth-of-type(2) { resize: none; } textarea:nth-of-type(3) { pointer-events: none; } 

Die CSS-Eigenschaften outline und outline-offset wurden verwendet, um den Benutzern eine Rückmeldung darüber zu geben, welches Element gerade den Fokus hat. Eine accent-color bietet eine Designfarbe für alle Formularelemente. Der Cursor, der beim Bearbeiten des Texts erscheint, hat dank der Eigenschaft caret-color die gleiche Farbe. Diese können alle als Verbesserungen der Benutzeroberfläche angesehen werden.

Einige Funktionen beeinträchtigen die Benutzerfreundlichkeit. Die cursor-Eigenschaft wurde verwendet, um die Zeiger vom Standardzeiger des Browsers zu ändern, was verwirrend ist. Die resize-Eigenschaft verhindert, dass das zweite <textarea> in der Größe geändert werden kann, während die Eigenschaft pointer-events verhindert, dass das dritte <textarea> Klickereignisse empfängt. Es ist jedoch weiterhin mit der Tastatur fokussierbar.

Klicken Sie auf "Play" im obigen Beispiel, um den Code für die Animation im MDN Playground zu sehen oder zu bearbeiten.

Referenz

Eigenschaften

• accent-color
• appearance
• caret-animation
• caret-color
• caret-shape
• cursor
• outline, Kurzform für:
  • outline-color
  • outline-style
  • outline-width
• outline-offset
• pointer-events
• resize
• user-select

Das CSS-Modul für grundlegende Benutzeroberfläche definiert auch die Eigenschaften caret, nav-down, nav-left, nav-right und nav-up. Derzeit unterstützen keine Browser diese Funktionen.

Leitfäden

Formulare lernen: erweitertes Formular-Styling

Erklärt, wie appearance zur Gestaltung von Formularelementen verwendet werden kann.

Verwandte Konzepte

• CSS-Eigenschaft cursor
• SVG-Attribut cursor
• CSS :focus, :focus-within und :focus-visible Pseudoklassen
• CaretPosition Schnittstelle

Spezifikationen

Siehe auch

• Tipps für die Gestaltung nützlicher und benutzerfreundlicher Fokusindikatoren (2016)