CSS-Grundlegendes Benutzeroberfläche

Das Modul CSS-Grundlegendes Benutzeroberfläche ermöglicht es Ihnen, die Darstellung und Funktionalität von Funktionen im Zusammenhang mit der Benutzeroberfläche zu definieren, einschließlich Umriss-Eigenschaften, visuelle Rückmeldungen an Zeigegeräte und Tastatur sowie die Änderung des Standardaussehens von UI-Widgets.

Grundlegende Benutzeroberflächen-Eigenschaften können verwendet werden, um die Benutzererfahrung und Zugänglichkeit zu verbessern, indem visuelle Hinweise für Elemente bereitgestellt werden, die interagiert werden, einschließlich der Gestaltung von Mauszeigern und der Tastaturnavigationsfokussierung, sowie der Gestaltung von Caret-Cursors, wenn ein bearbeitbares Element fokussiert ist. Das Modul ermöglicht es, Umrisse für fokussierte (oder nicht fokussierte) Elemente bereitzustellen, ohne die Dimensionen und Gestaltung eines Elements im Box-Modell zu beeinflussen. Dieses UI-Modul ermöglicht auch das Styling von Bedienelementen der 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 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 Nutzern ein Feedback zu geben, welches Element aktuell fokussiert ist. Ein accent-color bietet eine Themenfarbe für alle Formularsteuerelemente. Der Caret, der erscheint, wenn der Text bearbeitet wird, hat dank der caret-color-Eigenschaft die gleiche Farbe. All dies kann als UI-Verbesserungen betrachtet werden.

Einige Funktionen beeinträchtigen die Benutzerfreundlichkeit. Die cursor-Eigenschaft wurde verwendet, um Cursors vom standardmäßigen Browser-Cursor zu ändern, was verwirrend ist. Die resize-Eigenschaft verhindert, dass das zweite <textarea> resizebar 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.

Formulare lernen: Erweiterte Formulargestaltung: Erklärt, wie appearance verwendet werden kann, um Formularsteuerelemente zu gestalten.

Spezifikationen

Specification
CSS Basic User Interface Module Level 4

Siehe auch

Tipps zur Gestaltung nützlicher und brauchbarer Fokusindikatoren (2016)

CSS-Grundlegendes Benutzeroberfläche

Grundlegende Benutzeroberfläche in Aktion

Referenz

Eigenschaften

Leitfäden

Verwandte Konzepte

Spezifikationen

Siehe auch