CSS grundlegende Benutzeroberfläche

Grundlegende Benutzeroberfläche in Aktion

Um zu sehen, wie grundlegende Benutzeroberflächen-Eigenschaften das Erscheinungsbild von UI-Funktionen 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 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 Benutzern Rückmeldung darüber zu geben, welches Element derzeit im Fokus steht. Eine accent-color bietet eine Themenfarbe für alle Formularsteuerelemente. Der Caret, der beim Bearbeiten des Textes erscheint, hat dank der Eigenschaft caret-color die gleiche Farbe. Dies können allesamt als UI-Verbesserungen angesehen werden.

Einige Funktionen beeinträchtigen die Benutzerfreundlichkeit. Die Eigenschaft cursor wurde verwendet, um Cursor vom Standard des Browsers zu ändern, was verwirrend ist. Die Eigenschaft resize verhindert, dass die zweite <textarea> skalierbar ist, während die Eigenschaft pointer-events verhindert, dass das dritte <textarea> Klick-Ereignisse empfängt. Es kann jedoch immer noch über die Tastatur fokussiert werden.

Klicken Sie oben im Beispiel auf "Play", 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, Abkürzung für:
  • outline-color
  • outline-style
  • outline-width
• outline-offset
• pointer-events
• resize
• user-select

Das CSS-Modul für grundlegende 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

Lernen von Formularen: fortgeschrittenes Formularstyling

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

Verwandte Konzepte

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

Spezifikationen

Siehe auch

• Tipps zur Gestaltung nützlicher und benutzbarer Fokusindikatoren (2016)