CSS Basis-Benutzeroberfläche

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 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 #ccc;
}
: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 Feedback darüber zu geben, welches Element derzeit den Fokus hat. Eine accent-color bietet eine Themenfarbe für alle Formularsteuerelemente. Der Cursor, der erscheint, wenn der Text bearbeitet wird, hat dank der caret-color-Eigenschaft die gleiche Farbe. Diese können alle als Verbesserungen der Benutzeroberfläche betrachtet werden.

Einige Funktionen beeinträchtigen die Benutzerfreundlichkeit. Die cursor-Eigenschaft wurde verwendet, um die Standard-Cursor des Browsers zu ändern, was verwirrend ist. Die resize-Eigenschaft verhindert, dass das zweite <textarea> vergrößert oder verkleinert wird, während die pointer-events-Eigenschaft verhindert, dass das dritte <textarea> Klick-Ereignisse erhält. Es ist immer noch über die Tastatur fokussierbar.

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

• accent-color
• appearance

• caret, Kurzform für:

  • caret-color
  • caret-shape
• cursor
• nav-down
• nav-left
• nav-right
• nav-up

• outline, Kurzform für:

  • outline-color
  • outline-style
  • outline-width
• outline-offset
• pointer-events
• resize
• user-select

Lernen Sie Formulare: Erweitertes Formularstyling

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

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

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