CSS grundlegende Benutzeroberfläche

Grundlegende Benutzeroberfläche in Aktion

Um zu sehen, wie grundlegende Benutzeroberflächen-Eigenschaften das Aussehen von UI-Features ä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 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 Rückmeldungen darüber zu geben, welches Element aktuell im Fokus ist. Eine accent-color bietet eine Themenfarbe für alle Formularelemente. Der Caret, der beim Bearbeiten des Textes erscheint, hat dank der Eigenschaft caret-color die gleiche Farbe. Diese können alle als UI-Verbesserungen betrachtet werden.

Einige Funktionen beeinträchtigen die Benutzerfreundlichkeit. Die cursor-Eigenschaft wurde verwendet, um die Cursor vom Standardwert des Browsers zu ändern, was verwirrend ist. Die resize-Eigenschaft verhindert, dass die zweite <textarea> größenveränderbar ist, während die pointer-events-Eigenschaft verhindert, dass das dritte <textarea> Klickereignisse empfängt. Es kann jedoch weiterhin mit der Tastatur fokussiert werden.

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
• 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ächen definiert auch die Eigenschaften caret, caret-shape, nav-down, nav-left, nav-right und nav-up. Derzeit unterstützt kein Browser diese Funktionen.

Leitfäden

Formulare lernen: Erweitertes Formular-Styling

Erklärt, wie appearance verwendet werden kann, um Formularelemente zu gestalten.

Verwandte Konzepte

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

Spezifikationen

Siehe auch

• Tipps zum Entwerfen nützlicher und benutzerfreundlicher Fokusindikatoren (2016)