Mit bevorzugten Medienabfragen benutzeradaptive Oberflächen erstellen

1. Hinweis

Nutzer haben heutzutage viele Einstellungen auf ihren Geräten. Sie möchten, dass das Betriebssystem und die Apps so aussehen und sich so anfühlen wie ihre eigenen. Nutzeradaptive Benutzeroberflächen sind solche, die diese Einstellungen nutzen, um die Nutzerfreundlichkeit zu verbessern und die Benutzeroberfläche persönlicher zu gestalten. Wenn alles richtig gemacht wird, merkt ein Nutzer möglicherweise nie, dass sich die User Experience anpasst oder angepasst hat.

Nutzereinstellungen

Die Wahl der Gerätehardware ist eine Einstellung, das Betriebssystem ist eine Auswahl, die Farben von Apps und Betriebssystemen sind Einstellungen und die Dokumentsprachen von Apps und Betriebssystemen sind Einstellungen. Die Anzahl der Präferenzen eines Nutzers scheint immer weiter zu steigen. Eine Webseite kann nicht auf alles zugreifen – aus gutem Grund.

Hier sind einige Beispiele für Nutzereinstellungen, die von CSS verwendet werden können:

• Größe des Darstellungsbereichs des Geräts
• Ausrichtung des Geräts (Hochformat | Querformat)
• Schriftgröße
• Online / offline
• Netzwerkqualität
• Farbschema (hell | dunkel)
• Animationen der Benutzeroberfläche (an | reduziert)
• Eingabequalität (Maus | Touch | Eingabestift)
• Dokumentrichtung und Schreibmodus (von links nach rechts, von oben nach unten usw.)
• Anzeigemodus (fullscreen | standalone | minimal UI | browser)

Hier sind einige Beispiele für Nutzereinstellungen, die bald in CSS verfügbar sein werden:

• Reduzierte Daten / Lite-Modus
• Farbbereich
• Kontrast (weniger | mehr | verringern)
• Farben: Die Farben des Nutzers werden auf der Seite verwendet.
• Transparenz (an | reduziert)

Media-Anfragen

CSS und das Web ermöglichen die Anpassung und Reaktionsfähigkeit durch Media-Queries, eine deklarative Bedingung, die eine Reihe von Stilen enthält, wenn diese Bedingung erfüllt ist. Am häufigsten wird die Viewport-Größe des Geräts überprüft: Wenn die Größe weniger als 800 Pixel beträgt, werden einige bessere Stile für diesen Fall verwendet.

Nutzeradaptiv

Bei einer nicht adaptiven Benutzeroberfläche ändert sich nichts, wenn ein Nutzer sie aufruft. Sie bietet also allen Nutzern dieselbe Erfahrung und lässt sich nicht anpassen. Eine nutzeradaptive Oberfläche könnte für fünf verschiedene Nutzer fünf verschiedene Darstellungen und Stile haben. Die Funktionalität ist dieselbe, aber die Ästhetik wird als besser empfunden und die Benutzeroberfläche ist für Nutzer, die sie anpassen können, einfacher zu bedienen.

Voraussetzungen

• Kenntnisse in HTML und CSS
• Kenntnisse von Entwicklertools wie den Google Chrome-Entwicklertools

Umfang

In diesem Codelab erstellen Sie ein nutzeradaptives Formular, das sich an Folgendes anpasst:

• Das System berücksichtigt die Farbschema-Einstellung, indem es ein helles und ein dunkles Farbschema für die Formularsteuerelemente und die umgebenden UI-Elemente anbietet.
• Die Systemeinstellungen für Bewegung bieten verschiedene Arten von Animationen.
• Viewports für kleine und große Geräte für Mobilgeräte und Computer
• Verschiedene Eingabetypen wie Tastatur, Screenreader, Touch und Maus
• Beliebige Sprache und Lese-/Schreibmodus

Lerninhalte

In diesem Codelab erfahren Sie mehr über moderne Webfunktionen, mit denen Sie ein benutzeradaptives Formular erstellen können. Nach Abschluss können Sie:

• Helles und dunkles Design erstellen
• Animierte und barrierefreie Formulare erstellen
• Responsives Layout für Formulare
• Relative Einheiten und logische Properties verwenden

In diesem Codelab geht es um nutzeradaptive Oberflächen. Auf irrelevante Konzepte wird nicht genauer eingegangen und entsprechende Codeblöcke können Sie einfach kopieren und einfügen.

Voraussetzungen

• Google Chrome 89 oder höher oder Ihr bevorzugter Browser

2. Einrichten

Code abrufen

Alles, was Sie für dieses Projekt benötigen, befindet sich in einem GitHub-Repository. Um loszulegen, müssen Sie den Code abrufen und in Ihrer bevorzugten Entwicklungsumgebung öffnen. Alternativ können Sie diesen Codepen forken und von dort aus arbeiten.

Empfohlen: Codepen verwenden

1. Öffnen Sie im Browser einen neuen Tab.
2. Rufen Sie https://codepen.io/argyleink/pen/abBMeeq auf.
3. Wenn Sie kein Konto haben, erstellen Sie eines, um die Arbeit zu speichern.
4. Klicken Sie auf Fork.

Alternative: Lokal arbeiten

Wenn Sie den Code herunterladen und lokal bearbeiten möchten, benötigen Sie Node.js Version 12 oder höher sowie einen eingerichteten und einsatzbereiten Code-Editor.

Git verwenden

1. Rufen Sie https://github.com/argyleink/Google-IO-2021-Workshop_User-Adaptive-Interfaces auf.
2. Klonen Sie das Repository in einen Ordner.
3. Der Standardzweig ist beginning.

Dateien verwenden

Quellcode herunterladen

1. Entpacken Sie die heruntergeladene ZIP-Datei in einen Ordner.

Projekt ausführen

Verwenden Sie das Projektverzeichnis, das in einem der oben genannten Schritte erstellt wurde, und gehen Sie dann so vor:

1. Führen Sie npm install aus, um die Abhängigkeiten zu installieren, die zum Ausführen des Servers erforderlich sind.
2. Führen Sie npm start aus, um den Server auf Port 3000 zu starten.
3. Öffnen Sie im Browser einen neuen Tab.
4. Rufen Sie http://localhost:3000 auf.

HTML

In dieser Lektion werden die Aspekte des HTML behandelt, die für die nutzeradaptive Interaktivität erforderlich sind. In diesem Workshop liegt der Schwerpunkt auf Preisvergleichsportalen. Wenn Sie noch keine Erfahrung mit dem Erstellen von Formularen oder Websites haben, sollten Sie sich den bereitgestellten HTML-Code ansehen. Die Auswahl von HTML-Elementen kann in Bezug auf Barrierefreiheit und Layout entscheidend sein.

Wenn Sie bereit sind, ist dies das Grundgerüst, das Sie in eine dynamische und adaptive Benutzeroberfläche umwandeln werden.

3. Adaptive Interaktionen

Git-Branch: beginning

Am Ende dieses Abschnitts wird sich Ihr Einstellungsformular anpassen, um:

• Gamepad + Tastatur
• Maus + Touch
• Screenreader oder ähnliche assistive Technologie

Attribute für den HTML-Code

Das im Quellcode bereitgestellte HTML ist ein guter Ausgangspunkt, da bereits semantische Elemente ausgewählt wurden, um die Formulareingaben zu gruppieren, zu sortieren und zu kennzeichnen.

Formulare sind oft ein wichtiger Interaktionspunkt für ein Unternehmen. Daher ist es wichtig, dass sich das Formular an die vielen Arten von Eingaben anpassen kann, die im Web möglich sind. So ist es beispielsweise wichtig, dass ein Formular auf Mobilgeräten per Touchscreen bedient werden kann. In diesem Abschnitt geht es darum, die Nutzbarkeit der adaptiven Eingabe zu gewährleisten, bevor Sie sich mit Layout und Stil befassen.

Eingaben gruppieren

Das <fieldset>-Element im HTML-Code dient zum Gruppieren ähnlicher Eingaben und Steuerelemente. Ihr Formular enthält zwei Gruppen: eine für die Lautstärke und eine für Benachrichtigungen. Das ist wichtig für die Nutzerfreundlichkeit, da so ganze Abschnitte übersprungen werden können.

Elemente anordnen

Die Reihenfolge der Elemente ist logisch. Das ist wichtig für die Nutzerfreundlichkeit, damit die Reihenfolge der visuellen Elemente für Gamepad, Tastatur oder Screenreader-Technologien gleich oder ähnlich ist.

Tastaturinteraktion

Webnutzer sind es gewohnt, mit der Tabulatortaste durch Formulare zu navigieren. Das übernimmt der Browser, wenn Sie die erwarteten HTML-Elemente bereitstellen. Wenn Sie Elemente wie <button>, <input>, <h2> und <label> verwenden, werden diese automatisch zu Tastatur- oder Screenreader-Zielen.

Im Video oben wird gezeigt, wie Sie mit der Tabulatortaste und den Pfeiltasten durch die Benutzeroberfläche navigieren und Änderungen vornehmen können. Der blaue Rahmen liegt jedoch sehr eng an den Eingabeelementen an. Fügen Sie die folgenden Stile hinzu, um dieser Interaktion etwas mehr Spielraum zu geben.

style.css

input {
  outline-offset: 5px;
}

Das können Sie versuchen

1. Sehen Sie sich die in index.html verwendeten HTML-Elemente an.
2. Klicken Sie im Browser auf die Demoseite.
3. Drücken Sie die Tasten tab und shift+tab, um den Fokus auf die Elemente im Formular zu verschieben.
4. Mit der Tastatur können Sie die Werte der Schieberegler und Kästchen ändern.
5. Verbinden Sie einen Bluetooth-Gamepad-Controller und bewegen Sie den Fokus des Elements durch das Formular.

Mausinteraktion

Webnutzer sind es gewohnt, mit Formularen per Maus zu interagieren. Versuchen Sie, die Maus im Formular zu verwenden. Schieberegler und Kästchen funktionieren, aber es gibt noch Verbesserungspotenzial. Die Kästchen sind für einen Mausklick recht klein.

Hier erfahren Sie, wie Sie zwei Funktionen für die Nutzerfreundlichkeit erhalten, wenn Sie Ihre Labels und deren Eingaben verknüpfen.

Erstens gibt es Optionen, mit denen Nutzer interagieren können, und zweitens ist das Label mit einer Maus viel einfacher anzuklicken als ein kleines Quadrat.

Die zweite Funktion besteht darin, genau zu wissen, für welche Eingabe ein Label vorgesehen ist. Ohne CSS ist es derzeit recht schwierig, zu bestimmen, welches Label zu welcher Checkbox gehört, sofern Sie keine Attribute angeben.

Diese explizite Verbindung verbessert auch die Bedienung für Screenreader, die im nächsten Abschnitt behandelt werden.

Nicht zugeordnet:Es gibt keine Attribute, die die Elemente verbinden.

<input type="checkbox">
<label>...</label>

Zugeordnet:Attribute, die die Elemente miteinander verbinden

<input type="checkbox" id="voice-notifications" name="voice-notifications">
<label for="voice-notifications">...</label>

Im bereitgestellten HTML-Code sind bereits alle Eingaben und Labels zugeordnet. Wenn das Konzept neu für Sie ist, sollten Sie sich genauer damit befassen.

Das können Sie versuchen

1. Bewegen Sie den Mauszeiger auf ein Label. Das Kästchen wird dann hervorgehoben.
2. Untersuchen Sie ein Label-Element mit den Chrome-Entwicklertools, um die klickbare Fläche zu visualisieren, mit der das Kästchen ausgewählt werden kann.

Interaktion mit Screenreadern

Assistive Technologien können mit diesem Formular interagieren und mit einigen HTML-Attributen kann die Nutzerfreundlichkeit verbessert werden.

Für Nutzer, die das aktuelle Formular mit einem Screenreader in Chrome aufrufen, gibt es einen unnötigen Stopp beim <picture>-Element (nicht Chrome-spezifisch). Ein Nutzer mit einem Screenreader verwendet diesen wahrscheinlich aufgrund einer Sehbehinderung. Daher ist es nicht hilfreich, wenn der Screenreader bei einem Bild anhält. Sie können Elemente mit einem Attribut vor Screenreadern verbergen.

index.html

<picture aria-hidden="true">

Screenreader überspringen das rein visuelle Element jetzt.

Das Slider-Element input[type="range"] hat ein spezielles ARIA-Attribut: aria-labelledby="media-volume". Dies bietet spezielle Anweisungen für den Screenreader, um die Nutzerfreundlichkeit zu verbessern.

Das können Sie versuchen

1. Verwenden Sie die Screenreader-Technologie Ihres Betriebssystems, um den Fokus durch das Formular zu bewegen.
2. Laden Sie eine Screenreader-Software herunter und probieren Sie sie mit dem Formular aus.

4. Adaptive Layouts

Git-Branch: layouts

Am Ende dieses Abschnitts wird die Seite „Einstellungen“:

• Abstandssystem mit benutzerdefinierten Eigenschaften und nutzerrelativen Einheiten erstellen
• CSS-Grid für flexible, responsive Ausrichtung und Abstände verwenden
• Logische Eigenschaften für international angepasste Layouts verwenden
• Media-Queries schreiben, um zwischen kompakten und geräumigen Layouts zu wechseln

Abstand

Ein Schlüssel für ein ansprechendes Layout ist eine begrenzte Auswahl an Abstandsoptionen. So können Inhalte auf natürliche Weise aufeinander abgestimmt werden.

Benutzerdefinierte Eigenschaften

Dieser Workshop basiert auf sieben benutzerdefinierten Attributgrößen.

• Fügen Sie Folgendes oben in style.css ein:

style.css

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

Die Benennung orientiert sich an der Sprache, die Menschen untereinander verwenden, um den Raum zu beschreiben. Außerdem verwenden Sie rem-Einheiten ausschließlich für lesbare Größenangaben in ganzen Einheiten, die sich anpassen und die Einstellungen des Nutzers berücksichtigen.

Seitenstile

Als Nächstes müssen Sie einige Dokumentstile festlegen, Ränder aus Elementen entfernen und die Schriftart auf eine ansprechende Sans-Serif-Schriftart festlegen.

• Fügen Sie style.css Folgendes hinzu:

style.css

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;  
  padding-block-start: var(--space-xs);
  padding-block-end: var(--space-xs);
}

Das ist das erste Mal, dass Sie die benutzerdefinierten Eigenschaften für den Abstand verwenden. Damit beginnt Ihre Reise durchs All.

Typografie

Die Schriftart für dieses Layout ist adaptiv. Mit dem Keyword system-ui wird die Schriftart verwendet, die vom Betriebssystem des Nutzers als optimale Schriftart für die Benutzeroberfläche festgelegt wurde.

body {
  font-family: system-ui, sans-serif;
}

h1,h2,h3 { 
  font-weight: 500;
}

small {
  line-height: 1.5;
}

Die Formatierungen für h1, h2 und h3 sind geringfügig und stilistisch. Das small-Element benötigt jedoch das zusätzliche line-height für den Fall, dass der Text umgebrochen wird. Andernfalls ist es zu eng.

Logische Eigenschaften

Beachten Sie, dass für padding in body logische Eigenschaften (block-start, block-end) verwendet werden, um die Seite anzugeben. Logische Eigenschaften werden im weiteren Verlauf des Codelabs häufig verwendet. Wie bei einer rem-Einheit werden sie an den Nutzer angepasst. Dieses Layout kann in eine andere Sprache übersetzt und an die natürliche Schreibweise und Dokumentrichtung angepasst werden, die der Nutzer in seiner Muttersprache gewohnt ist. Logische Eigenschaften ermöglichen dies mit nur einer Definition von Abstand, Richtung oder Ausrichtung.

Grid und Flexbox sind bereits flussbezogen. Das bedeutet, dass die für eine Sprache geschriebenen Stile kontextbezogen sind und für andere Sprachen entsprechend angewendet werden. Adaptive Ausrichtung: Der Inhalt wird entsprechend der Ausrichtung des Dokuments dargestellt.

Mit logischen Eigenschaften können Sie mehr Nutzer erreichen und müssen weniger Stile schreiben.

CSS-Rasterlayouts

Die CSS-Eigenschaft grid ist ein leistungsstarkes Layout-Tool mit vielen Funktionen für komplexe Aufgaben. Sie erstellen einige einfache Rasterlayouts und ein komplexes Layout. Sie arbeiten auch von außen nach innen, von Makro- zu Mikrolayouts. Ihre benutzerdefinierten Abstandseigenschaften werden nicht nur für Padding- oder Margin-Werte, sondern auch für Spaltengrößen, Grenzradien und mehr verwendet.

Hier sehen Sie einen Screenshot der Chrome-Entwicklertools, in denen alle CSS-Rasterlayouts gleichzeitig überlagert werden:

1. Fügen Sie style.css die folgenden Stile hinzu:

<main>

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);
}

Standardmäßig wird jedes untergeordnete Element in eine eigene Zeile eingefügt. Das ist ideal, um Elemente zu stapeln. Außerdem wird gap verwendet. Zuvor haben Sie margin: 0 für alle Elemente mit dem Selektor * festgelegt. Das ist jetzt wichtig, da Sie gap für den Abstand verwenden. Gap ist nicht nur ein einzelner Ort, an dem der Abstand in einem Container verwaltet wird, sondern auch der relative Fluss.

<form>

form {
  max-width: 89vw;
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  align-items: flex-start;
  grid-template-columns: 
    repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
}

Dies ist das schwierigste Rasterlayout des Designs, aber es bietet auch den spannendsten responsiven Aspekt:

• max-width stellt einen Wert für den Layoutalgorithmus bereit, der bei der Entscheidung über die Größe verwendet wird.
• gap verwendet benutzerdefinierte Properties und übergibt ein anderes row-gap als column-gap.
• align-items ist auf flex-start gesetzt, damit die Höhe der Elemente nicht gestreckt wird.
• grid-template-columns hat eine komplexe Syntax, aber das Ziel ist einfach: Spalten sollen 35ch breit und nie weniger als 10ch breit sein. Inhalte sollen in Spalten platziert werden, wenn Platz ist. Andernfalls sind Zeilen eine gute Alternative.

2. Testen Sie, ob sich die Größe des Browserfensters ändern lässt. Sehen Sie zu, wie das Formular in einem kleinen Viewport in Zeilen umgebrochen wird, aber in neue Spalten fließt, wenn Platz ist. Es passt sich ohne Media-Queries an. Diese Strategie für responsive Stile ohne Media-Queries ist besonders nützlich für Komponenten oder inhaltsorientierte Layouts.

<section>

section {
  display: grid;
  gap: var(--space-md);
}

Jeder Abschnitt sollte ein Raster aus Zeilen mit mittlerem Abstand zwischen den untergeordneten Elementen sein.

<header>

header {
  display: grid;
  gap: var(--space-xxs);
}

Jeder Header sollte ein Raster aus Zeilen mit sehr geringem Abstand zwischen untergeordneten Elementen sein.

<fieldset>

fieldset {
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--space-sm);
  overflow: hidden;
}

Dieses Layout ist für die Darstellung als Karte und die Gruppierung von Eingaben verantwortlich. overflow: hidden und gap: 1px werden deutlicher, wenn Sie im nächsten Abschnitt Farbe hinzufügen.

.fieldset-item

.fieldset-item {
  display: grid;
  grid-template-columns: var(--space-lg) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

In diesem Layout werden das Symbol und das Kästchen mit den zugehörigen Labels und Steuerelementen zentriert. In der ersten Spalte der Rastervorlage, var(--space-lg), wird eine Spalte erstellt, die breiter als das Symbol ist. So kann ein untergeordnetes Element zentriert werden.

In diesem Layout sehen Sie, wie viele Designentscheidungen bereits in den benutzerdefinierten Eigenschaften getroffen wurden. Abstand, Lücken und Spalten wurden alle innerhalb der Harmonie des Systems mit Werten dimensioniert, die Sie bereits definiert haben.

.fieldset-item <picture>

.fieldset-item > picture {
  block-size: var(--space-xl);
  inline-size: var(--space-xl);
  clip-path: circle(50%);
  display: inline-grid;
  place-content: center;
}

Dieses Layout ist für die Einstellungen, die Größe des Symbolkreises, das Erstellen einer Kreisform und das Zentrieren eines Bildes darin verantwortlich.

<picture> & [checkbox] alignment

.fieldset-item > :is(picture, input[type="checkbox"]) {
  place-self: center;
}

Bei diesem Layout wird die Zentrierung auf Bild- und Kästchenelemente beschränkt, indem der :is-Pseudoselektor verwendet wird.

3. Ersetzen Sie den Selektor picture > svg durch .fieldset-item svg:

.fieldset-item <svg>

.fieldset-item svg {
  block-size: var(--space-md);
}

Damit wird die SVG-Symbolgröße auf einen Wert aus dem Größensystem festgelegt.

.sm-stack

.sm-stack {
  display: grid;
  gap: var(--space-xs);
}

Diese Hilfsklasse wird für die Checkbox-Label-Elemente verwendet, um den Hilfetext für die Checkbox zu formatieren.

input[type="checkbox"]

input[type="checkbox"] {
  inline-size: var(--space-sm);
  block-size: var(--space-sm);
}

Diese Stile vergrößern das Kontrollkästchen mithilfe von Werten aus unserem Abstandsset.

Das können Sie versuchen

1. Öffnen Sie die Chrome-Entwicklertools und suchen Sie im Bereich Elemente nach Grid-Badges im HTML-Code. Klicken Sie darauf, um die Debugging-Tools zu aktivieren.
2. Öffnen Sie die Chrome-Entwicklertools und bewegen Sie den Mauszeiger auf eine Lücke im Bereich Stile.
3. Öffnen Sie die Chrome-Entwicklertools, rufen Sie den Bereich Styles auf und wechseln Sie von Styles zu Layouts. Sehen Sie sich diesen Bereich an, indem Sie die Einstellungen umschalten und Layouts aktivieren.

Media-Anfragen

Mit dem folgenden CSS werden die Stile basierend auf der Größe und Ausrichtung des Darstellungsbereichs angepasst, um den Abstand oder die Anordnung optimal an den Kontext des Darstellungsbereichs anzupassen.

Hinweis:Das CSS für jeden Abschnitt sollte nach dem Selector hinzugefügt werden, den es in style.css ändert.

<main>

@media (min-width: 540px) {
  main {
    padding: var(--space-lg);
  }
}

@media (min-width: 800px) {
  main {
    padding: var(--space-xl);
  }
}

Diese beiden Media-Queries sorgen für main mehr Padding, da mehr Platz im Viewport verfügbar ist. Das bedeutet, dass es mit einer kompakten, kleinen Menge an Padding beginnt, aber immer geräumiger wird, je mehr Platz zur Verfügung steht.

<form>

form {
  --repeat: auto-fit;
  grid-template-columns: 
    repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
}

@media (orientation: landscape) and (min-width: 640px) {
  form {
    --repeat: 2;
  }
}

Das Formular war mit auto-fit bereits responsiv in Bezug auf die Größe des Darstellungsbereichs. Beim Testen auf einem Mobilgerät werden die beiden Formulargruppen jedoch nicht nebeneinander angezeigt, wenn das Gerät ins Querformat gedreht wird. Passen Sie das Layout mit einer orientation-Media-Query und einer Überprüfung der Darstellungsbereichsbreite an diesen Kontext an. Wenn das Gerät im Querformat ausgerichtet und mindestens 640 Pixel breit ist, können Sie zwei Spalten erzwingen, indem Sie die benutzerdefinierte Eigenschaft --repeat in eine Zahl anstelle des Schlüsselworts auto-fit ändern.

.fieldset-item

@media (min-width: 540px) {
  .fieldset-item {
    grid-template-columns: var(--space-xxl) 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-xl) var(--space-md) 0;
  }
}

Diese Media-Query ist eine weitere Erweiterung des Abstands, wenn mehr Platz im Darstellungsbereich verfügbar ist. Die erste Spalte wird durch die Verwendung einer größeren benutzerdefinierten Eigenschaft (var(--space-xxl)) in der Vorlage erweitert. Das Padding wird auch für größere benutzerdefinierte Eigenschaften erhöht.

Das können Sie versuchen

1. Vergrößern und verkleinern Sie das Browserfenster und beobachten Sie, wie sich der verfügbare Platz anpasst.
2. Vorschau auf einem Mobilgerät ansehen
3. Vorschau auf einem Mobilgerät im Querformat ansehen

5. Adaptive Farbe

Git-Branch: colors

Am Ende dieses Abschnitts wird Ihr Einstellungsformular:

• Anpassen an dunkle und helle Farbvorlieben
• Ein Farbschema, das aus einem Marken-Hexcode abgeleitet wurde
• Barrierefreie Farben verwenden

HSL

Im nächsten Abschnitt erstellen Sie ein Farbsystem mit HSL, um ein helles und ein dunkles Design zu erstellen. Es basiert auf diesem Kernkonzept in CSS: calc().

HSL steht für Farbton, Sättigung und Helligkeit. Der Farbton ist ein Winkel, wie ein Punkt auf einer Uhr, während Sättigung und Helligkeit Prozentsätze sind. calc() kann Berechnungen mit Prozentzahlen und Winkeln durchführen. Sie können in CSS Berechnungen für Helligkeit und Sättigung für diese Prozentsätze durchführen. Wenn Sie Berechnungen für Farbkanäle mit benutzerdefinierten Eigenschaften kombinieren, erhalten Sie ein modernes, dynamisches Farbschema, bei dem Varianten aus einer Grundfarbe berechnet werden. So müssen Sie nicht unzählige Farben im Code verwalten.

Benutzerdefinierte Eigenschaften

In diesem Abschnitt erstellen Sie eine Reihe von benutzerdefinierten Eigenschaften, die Sie im Rest Ihrer Stile verwenden können. Ähnlich wie beim Festlegen des Abstands im :root-Tag fügen Sie nun Farben hinzu.

Angenommen, die Markenfarbe Ihrer App ist #0af. Ihre erste Aufgabe ist es, diesen Hex-Farbcode in einen HSL-Farbcode zu konvertieren: hsl(200 100% 50%). Bei dieser Umrechnung werden die Farbkanäle Ihrer Marke in HSL angezeigt. Mit calc() können Sie verschiedene unterstützende Markenfarben berechnen.

Hinweis:Diese App bevorzugt ein dunkles Farbschema und passt sich dann an ein helles Design an. Das ist wichtig, da das erste Farbschema ein dunkles Design ist.

Jeder der folgenden Codeblöcke in diesem Abschnitt sollte in denselben :root-Selektor eingefügt werden.

Markenkanäle

:root {
  --hue: 200;
  --saturation: 100%;
  --lightness: 50%;
}

Die drei HSL-Channels wurden extrahiert und in eigenen benutzerdefinierten Eigenschaften platziert.

1. Verwenden Sie alle drei Eigenschaften unverändert und stellen Sie die Markenfarbe nach.

Marke

:root {
  --brand: hsl(
    var(--hue) 
    calc(var(--saturation) / 2)
    var(--lightness) 
  );
}

Da Ihr Farbschema standardmäßig dunkel ist, sollten Sie Farben für die Verwendung auf dunklen Oberflächen entsättigen, da sie sonst für das Auge zu intensiv wirken oder nicht zugänglich sein können. Um die Sättigung Ihrer Markenfarbe zu verringern, verwenden Sie den Farbton und die Helligkeit unverändert, halbieren aber die Sättigung mit einer Division: calc(var(--saturation) / 2). Die Farbe Ihrer Marke ist jetzt zwar passend, aber für die Verwendung entsättigt.

Text

:root {
  --text1: hsl(var(--hue) 15% 85%);
  --text2: hsl(var(--hue) 15% 65%);
}

Für den Lesetext in unserem dunklen Design verwenden Sie den Markenfarbton als Grundlage, aber daraus werden fast weiße Farben erstellt. Viele Nutzer werden den Text für weiß halten, obwohl er eigentlich sehr hellblau ist. Wenn Sie sich an den Farbton halten, können Sie für ein harmonisches Design sorgen. --text1 ist zu 85% weiß und --text2 zu 65% weiß. Beide haben eine sehr geringe Sättigung.

2. Nachdem Sie den Code in Ihr Projekt eingefügt haben, öffnen Sie die Chrome-Entwicklertools und ändern Sie die Kanalwerte. Hier können Sie ausprobieren, wie sich HSL und die einzelnen Kanäle gegenseitig beeinflussen. Vielleicht möchtest du mehr oder weniger Sättigung.

Plattform/Oberfläche

:root {
  --surface1: hsl(var(--hue) 10% 10%);
  --surface2: hsl(var(--hue) 10% 15%);
  --surface3: hsl(var(--hue) 5% 20%);
  --surface4: hsl(var(--hue) 5% 25%);
}

Der Text ist sehr hell, da Oberflächen im Dark Mode dunkel sind. Während für Textfarben hohe Helligkeitswerte (85% und höher) verwendet wurden, werden für Oberflächen niedrigere Werte (30% und niedriger) verwendet. Ein gesunder Abstand zwischen den Helligkeitsbereichen von Oberfläche und Text trägt dazu bei, dass die Farben für Nutzer gut lesbar sind.

3. Die Farben beginnen mit dem dunkelsten Grau mit 10% Helligkeit und 10% Sättigung und werden dann mit zunehmender Helligkeit entsättigt. Jede neue Oberfläche ist 5% leichter als die vorherige. Auch die Sättigung wird auf den helleren Oberflächen etwas reduziert. Versuchen Sie, alle Oberflächen auf 10% Sättigung einzustellen. Gefällt es dir mehr oder weniger?

Helles Design

Nachdem Sie eine Reihe von Text- und Oberflächenfarben für das dunkle Design festgelegt haben, ist es an der Zeit, das helle Design anzupassen. Dazu aktualisieren Sie die benutzerdefinierten Farbeigenschaften in einer prefers-color-scheme-Media-Anfrage.

Sie verwenden dieselbe Technik, um einen großen Unterschied zwischen den Helligkeitswerten von Oberflächen und Textfarben beizubehalten, damit die Farben gut kontrastieren.

Marke

@media (prefers-color-scheme: light) {
  :root {
    --brand: hsl(
      var(--hue) 
      var(--saturation)
      var(--lightness) 
    );
  }
}

Zuerst legen wir die Markenfarbe fest. Die Sättigung muss wiederhergestellt werden.

Text

@media (prefers-color-scheme: light) {
  :root {
    --text1: hsl(
      var(--hue) 
      var(--saturation)
      10% 
    );

    --text2: hsl(
      var(--hue) 
      calc(var(--saturation) / 2)
      30%
    );
  }
}

Ähnlich wie beim dunklen Design mit sehr hellblauen Textfarben sind die Textfarben beim hellen Design sehr dunkelblau. Wenn Sie 10% und 30% als Helligkeitswerte für die HSL-Farbe sehen, sollten Sie wissen, dass diese Farben dunkel sind.

Oberfläche

@media (prefers-color-scheme: light) {
  :root {
    --surface1: hsl(var(--hue) 20% 90%);
    --surface2: hsl(var(--hue) 10% 99%);
    --surface3: hsl(var(--hue) 10% 96%);
    --surface4: hsl(var(--hue) 10% 85%);
  }
}

Diese Oberflächenfarben sind die ersten, die Muster durchbrechen. Was bisher ziemlich vernünftig und linear erschien, ist jetzt nicht mehr der Fall. Das Schöne daran ist, dass Sie hier im Code mit HSL-Farbkombinationen für das helle Design experimentieren und Helligkeit und Sättigung anpassen können, um ein schönes helles Farbschema zu erstellen, das nicht zu kühl oder blau ist.

Farbsystem verwenden

Nachdem die Farben definiert wurden, können Sie sie verwenden. Sie haben eine auffällige Akzentfarbe für Ihre Marke, zwei Textfarben und vier Oberflächenfarben.

• Suchen Sie für die folgenden Codeabschnitte den entsprechenden Selektor und fügen Sie den Farb-CSS-Code dem vorhandenen Codeblock hinzu.

<body>

body {
  background: var(--surface1);
  color: var(--text1);
}

Die primären Farben der Seite sind die ersten Oberflächen- und Textfarben, die Sie erstellt haben. Dadurch wird auch der Standardkontrast auf das Maximum gesetzt. Das Umschalten zwischen Hell und Dunkel kann jetzt getestet werden.

<fieldset>

fieldset {
  border: 1px solid var(--surface4);
  background: var(--surface4);
}

Das ist das kartenähnliche Element Ihres Designs. Der 1‑Pixel-Rahmen und der 1‑Pixel-Abstand haben dieselbe Farbe und stellen die Oberfläche hinter den einzelnen .fieldset-item dar. So entsteht eine schöne visuelle Harmonie, die sich leicht aufrechterhalten lässt.

.fieldset-item

.fieldset-item {
  background: var(--surface3);
}

Jede Formulareingabe befindet sich auf einer eigenen Oberfläche. Hoffentlich sehen Sie, wie diese zusammenkommen und wie die Helligkeitsvariationen übereinander liegen.

.fieldset-item > picture

.fieldset-item > picture {
  background: var(--surface4);
}

Dies ist eine stilistische Entscheidung, um die Kreisform um das Symbol herum zu präsentieren. Im nächsten Abschnitt wird deutlich, warum.

.fieldset-item svg

.fieldset-item svg {
  fill: var(--text2);
}

Für die Symbole im Formular ist der Alt-Text --text2 festgelegt. Wenn ausgefüllte Symbole etwas heller als Text sind, wirken sie nicht zu schwer.

.fieldset-item:focus-within svg

.fieldset-item:focus-within svg {
  fill: var(--brand);
}

Dieser Selector wählt das Eingabecontainerelement aus, wenn mit einer der Eingaben darin interagiert wird, und richtet sich auf das SVG, um es mit dem Akzent Ihrer Marke hervorzuheben. So wird das Formular nutzerfreundlicher, da beim Interagieren mit Eingaben die entsprechenden Symbole hervorgehoben werden.

<small>

small {
  color: var(--text2);
}

Es ist kleiner Text. Im Vergleich zu Überschriften und Absätzen (primärer Inhalt) sollte sie etwas dezenter sein.

Dunkle Formularsteuerelemente

:root {
  color-scheme: dark light;
}

Dieser letzte Schritt teilt dem Browser mit, dass diese Seite sowohl das dunkle als auch das helle Design unterstützt. Der Browser belohnt uns mit dunklen Formularsteuerelementen.

6. Adaptive Animation

Git-Branch: animations

Am Ende dieses Abschnitts wird die Seite „Einstellungen“:

• Anpassen an die Bewegungspräferenzen des Nutzers
• Auf Nutzerinteraktionen reagieren

Weniger Bewegung im Vergleich zu keiner Bewegung

Die im Betriebssystem gefundenen Nutzereinstellungen für Bewegung bieten keinen Wert für „Keine Animation“. Die Option ist „Bewegung reduzieren“. Überblendungsanimationen, Farbwechsel und andere Effekte sind auch für Nutzer, die reduzierte Bewegungen bevorzugen, weiterhin wünschenswert.

Auf dieser Einstellungsseite gibt es nicht viel Bewegung auf dem Bildschirm. Die Bewegung ist eher ein Skalierungseffekt, als ob sich das Element auf den Nutzer zubewegt. Es ist so einfach, Ihren CSS-Code an die reduzierte Bewegung anzupassen, dass Sie die Skalierungsübergänge reduzieren.

Interaktionsstile

<fieldset>

fieldset {
  transition: box-shadow .3s ease;
}

fieldset:focus-within {
  box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}

Wenn ein Nutzer mit den Eingaben eines der kartenähnlichen <fieldset>-Elemente interagiert, wird ein Lifting-Effekt hinzugefügt. Die Benutzeroberfläche schiebt ein Element nach vorn, damit sich der Nutzer darauf konzentrieren kann, während die kontextbezogene Formulargruppe auf ihn zukommt.

.fieldset-item

.fieldset-item {
  transition: background .2s ease;
}

.fieldset-item:focus-within {
  background: var(--surface2);
}

Wenn der Nutzer mit einer Eingabe interagiert, ändert sich der Hintergrund der jeweiligen Ebene in eine hervorgehobene Oberflächenfarbe. Das ist eine weitere unterstützende Funktion der Benutzeroberfläche, die die Aufmerksamkeit des Nutzers auf sich zieht und signalisiert, dass die Eingabe empfangen wird. In den meisten Fällen müssen Farbübergänge nicht reduziert werden.

.fieldset-item > picture

@media (prefers-reduced-motion: no-preference) {
  .fieldset-item > picture {
    clip-path: circle(40%);
    transition: clip-path .3s ease;
  }

  .fieldset-item:focus-within picture {
    clip-path: circle(50%);
  }
}

Hier ist eine clip-path-Animation, die Sie nur verwenden, wenn der Nutzer keine Einstellungen für reduzierte Bewegungen festgelegt hat. Mit dem ersten Selektor und den zugehörigen Stilen wird der Kreis-Beschneidungspfad um 10% verkleinert und es werden einige Übergangsparameter festgelegt. Der zweite Selektor und Stil wartet darauf, dass Nutzer mit einer Eingabe interagieren, und skaliert dann den Kreis des Symbols. Ein subtiler, aber schöner Effekt, wenn er passt.

7. Glückwunsch

Git-Branch: complete

Sie haben erfolgreich eine nutzeradaptive Benutzeroberfläche erstellt.

Sie kennen jetzt die wichtigsten Schritte, die erforderlich sind, um Benutzeroberflächen zu erstellen, die sich an verschiedene Nutzerszenarien und Einstellungen anpassen.