CSS-Benutzeroberfläche

Benutzeroberfläche in Aktion

Um zu sehen, wie Benutzeroberflächeneigenschaften das Erscheinungsbild von UI-Funktionen verändern können, interagieren Sie mit den Elementen in diesem Beispiel. Beachten Sie, dass einige Features in diesem Beispiel die Benutzerfreundlichkeit verbessern, während andere das Benutzererlebnis 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 Nutzern zu zeigen, welches Element derzeit den Fokus hat. Ein accent-color bietet eine Themenfarbe für alle Formularelemente. Der Caret, der erscheint, wenn der Text bearbeitet wird, hat die gleiche Farbe dank der caret-color Eigenschaft. Dies können alle als Verbesserungen der Benutzeroberfläche betrachtet werden.

Einige Features beeinträchtigen die Benutzerfreundlichkeit. Die cursor Eigenschaft wurde verwendet, um die Zeiger vom Standard des Browsers zu ändern, was verwirrend ist. Die resize Eigenschaft verhindert, dass die zweite <textarea> angepasst werden kann, während die pointer-events Eigenschaft 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 Benutzeroberflächen 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: Fortgeschrittenes Formulargestaltung

Erklärt, wie appearance verwendet werden kann, um Formularsteuerungen zu stylen.

Verwandte Konzepte

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

Spezifikationen

Siehe auch

• Tips for Designing Useful and Usable Focus Indicators (2016)