Mit bevorzugten Medienabfragen benutzeradaptive Oberflächen erstellen

1. Hinweis

Nutzer haben heutzutage viele Einstellungen auf ihren Geräten festgelegt. Sie möchten, dass das Betriebssystem und die Apps so aussehen und sich so anfühlen, als wären sie ihre eigenen. Benutzeradaptive Oberflächen sind solche, die diese Einstellungen nutzen, um die User Experience zu verbessern, damit sich die Nutzer zu Hause fühlen und das Gefühl haben, dass es ihre eigene Oberfläche ist. Wenn dies richtig gemacht wird, merkt ein Nutzer möglicherweise gar nicht, dass sich die User Experience anpasst oder angepasst hat.

Nutzereinstellungen

Die Auswahl der Gerätehardware ist eine Präferenz, das Betriebssystem ist eine Auswahl, die Farben von Apps und Betriebssystemen sind Präferenzen und die Dokumentsprachen von Apps und Betriebssystemen sind Präferenzen. Die Anzahl der Einstellungen, die ein Nutzer hat, scheint nur zu wachsen. Eine Webseite kann nicht auf alles zugreifen, und das aus gutem Grund.

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

• Größe des Darstellungsbereichs für das Gerät
• Geräteausrichtung (Hochformat | Querformat)
• Schriftgröße
• Online/Offline
• Netzwerkqualität
• Farbschema (hell | dunkel)
• Animationen der Benutzeroberfläche (An | Reduziert)
• Eingabequalität (Maus | Touch | Eingabestift)
• Dokumentausrichtung und Schreibmodus (von links nach rechts, von oben nach unten usw.)
• Anzeigemodus (Vollbild | Eigenständig | Minimale Benutzeroberfläche | Browser)

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

• Reduzierte Daten / Lite-Modus
• Farbspektrum
• Kontrast (weniger | mehr | reduzieren)
• Farben (erzwingt die Farben des Nutzers auf der Seite)
• Transparenz (An | Reduziert)

Medienabfragen

CSS und das Web ermöglichen Anpassung und Responsivität durch Medienabfragen, eine deklarative Bedingung, die eine Reihe von Stilen enthält, wenn diese Bedingung erfüllt ist. Am häufigsten wird eine Bedingung für die Darstellungsgröße des Geräts verwendet: Wenn die Größe weniger als 800 Pixel beträgt, werden hier einige bessere Stile für diesen Fall aufgeführt.

Anpassung an den Nutzer

Eine nicht adaptive Benutzeroberfläche ändert sich nicht, wenn ein Nutzer sie besucht. Sie bietet im Wesentlichen allen Nutzern dieselbe Erfahrung, ohne dass Anpassungen möglich sind. Eine benutzeradaptive Oberfläche könnte fünf verschiedene Erscheinungsbilder und Stile für fünf verschiedene Nutzer haben. Die Funktionalität ist dieselbe, aber die Ästhetik wird besser wahrgenommen und die Benutzeroberfläche ist für Nutzer, die sie anpassen können, einfacher zu bedienen.

Voraussetzungen

• Kenntnisse in HTML und CSS
• Kenntnisse über Entwicklertools wie die Google Chrome-Entwicklertools

Aufgaben

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

• Die Farbschema-Präferenz des Systems, indem ein helles und ein dunkles Farbschema für die Formularsteuerelemente und die umgebenden UI-Elemente angeboten wird
• Die Bewegungseinstellungen des Systems durch verschiedene Arten von Animationen
• Kleine und große Darstellungsbereiche für Mobilgeräte und Computer
• Verschiedene Eingabetypen wie Tastatur, Screenreader, Touch und Maus
• Beliebige Sprache und Lese-/Schreibmodus

Lerninhalte

In diesem Codelab lernen Sie moderne Webfunktionen kennen, mit denen Sie ein benutzeradaptives Formular erstellen können. Nach Abschluss können Sie:

• Helle und dunkle Designs erstellen
• Animierte und barrierefreie Formulare erstellen
• Layout responsiver Formulare
• Verwenden Sie relative Einheiten und logische Properties.

In diesem Codelab geht es um adaptive Benutzeroberflächen. Auf Konzepte ohne besondere Relevanz wird nicht genauer eingegangen, entsprechende Codeblöcke können Sie einfach kopieren und einfügen.

Voraussetzungen

• Google Chrome 89 und höher oder Ihren bevorzugten Browser

2. Einrichten

Code abrufen

Alles, was Sie für dieses Projekt benötigen, befindet sich in einem GitHub-Repository. Rufen Sie zuerst den Code ab und öffnen Sie ihn in Ihrer bevorzugten Entwicklungsumgebung. 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 Ihre Arbeit zu speichern.
4. Klicken Sie auf Fork.

Alternative: Lokal arbeiten

Wenn Sie den Code herunterladen und lokal arbeiten möchten, benötigen Sie Node.js Version 12 oder höher und einen Code-Editor, der eingerichtet und einsatzbereit ist.

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 Sie in einem der obigen Schritte erstellt haben, 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.

Informationen zum HTML-Code

In dieser Lektion werden die Aspekte von HTML behandelt, die zur Unterstützung der nutzeradaptiven Interaktivität verwendet werden. Dieser Workshop konzentriert sich speziell auf CSS. Wenn Sie noch keine Erfahrung mit dem Erstellen von Formularen oder Websites haben, sollten Sie sich den bereitgestellten HTML-Code ansehen. Die Auswahl der HTML-Elemente kann für die Barrierefreiheit und das Layout entscheidend sein.

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

3. Adaptive Interaktionen

Git-Branch: beginning

Am Ende dieses Abschnitts wird Ihr Einstellungsformular angepasst an:

• Gamepad + Tastatur
• Maus + Touch
• Screenreader oder ähnliche Hilfstechnologie

Attribute für den HTML-Code

Der im Quellcode bereitgestellte HTML-Code ist ein guter Ausgangspunkt, da bereits semantische Elemente zum Gruppieren, Sortieren und Beschriften Ihrer Formulareingaben ausgewählt wurden.

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. Beispielsweise ist es wahrscheinlich wichtig, ein Formular zu haben, das auf Mobilgeräten per Touch-Bedienung verwendet werden kann. In diesem Abschnitt sorgen Sie vor dem Layout und dem Stil für die Nutzerfreundlichkeit der adaptiven Eingabe.

Gruppierungseingaben

Das <fieldset>-Element im HTML-Code dient dazu, ähnliche Eingaben und Steuerelemente zu gruppieren. In Ihrem Formular gibt es 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 Elemente sind in einer logischen Reihenfolge angeordnet. Das ist wichtig für die Nutzerfreundlichkeit, damit die visuelle Reihenfolge für Gamepad-, Tastatur- oder Screenreader-Technologien gleich oder ähnlich ist.

Tastaturinteraktion

Webnutzende sind es gewohnt, sich mit der Tabulatortaste durch Formulare zu bewegen. Glücklicherweise übernimmt der Browser dies, wenn Sie die erwarteten HTML-Elemente bereitstellen. Wenn Sie Elemente wie <button>, <input>, <h2> und <label> verwenden, werden diese automatisch zu Zielen für die Tastatur oder den Screenreader.

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 Umriss ist jedoch sehr eng um die Eingabeelemente herum. Fügen Sie die folgenden Stile hinzu, um dieser Interaktion etwas mehr Raum zu geben.

style.css

input {
  outline-offset: 5px;
}

Prompts zum Ausprobieren

1. Sehen Sie sich die HTML-Elemente an, die in index.html verwendet werden.
2. Klicken Sie in Ihrem Browser auf die Demoseite.
3. Drücken Sie die tab- und die shift+tab-Taste, um den Fokus auf die verschiedenen Elemente im Formular zu verschieben.
4. Verwenden Sie die Tastatur, um die Werte der Schieberegler und Kästchen zu ändern.
5. Verbinden Sie einen Bluetooth-Gamepad-Controller und bewegen Sie den Elementfokus durch das Formular.

Mausinteraktion

Webnutzer sind es gewohnt, mit der Maus mit Formularen zu interagieren. Versuchen Sie, das Formular mit der Maus zu bedienen. Schieberegler und Kästchen funktionieren, aber es geht noch besser. Diese Kästchen sind ziemlich klein, um sie mit der Maus anzuklicken.

Sehen Sie, wie Sie zwei Funktionen für die Nutzerfreundlichkeit erhalten, wenn Sie Ihre Labels und die zugehörigen Eingaben verbinden?

Die erste Funktion bietet Optionen für die Interaktion. Das Label ist mit der Maus viel einfacher anzusteuern als ein winziges Quadrat.

Die zweite Funktion ist, genau zu wissen, für welche Eingabe ein Label bestimmt ist. Ohne CSS ist es derzeit ziemlich schwierig, festzustellen, welches Label zu welchem Kästchen gehört, es sei denn, Sie geben einige Attribute an.

Diese explizite Verbindung verbessert auch die Nutzung von Screenreadern, die im nächsten Abschnitt behandelt werden.

Nicht verknüpft: Keine Attribute, die die Elemente verbinden.

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

Verknüpft: Attribute, die die Elemente 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 dieses Konzept neu für Sie ist, lohnt es sich, sich näher damit zu beschäftigen.

Prompts zum Ausprobieren

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

Interaktion mit Screenreadern

Hilfstechnologien können mit diesem Formular interagieren und mit ein paar HTML-Attributen die Nutzerfreundlichkeit verbessern.

Für Nutzer, die das aktuelle Formular mit einem Screenreader in Chrome verwenden, gibt es einen unnötigen Stopp beim <picture>-Element (nicht Chrome-spezifisch). Eine Person, die einen Screenreader verwendet, hat wahrscheinlich eine Sehbehinderung. Daher ist es nicht hilfreich, bei einem Bild anzuhalten. Sie können Elemente mit einem Attribut vor Screenreadern verbergen.

index.html

<picture aria-hidden="true">

Jetzt überspringen Screenreader das rein visuelle Element.

Das Schiebereglerelement 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.

Prompts zum Ausprobieren

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

4. Adaptive Layouts

Git-Branch: layouts

Am Ende dieses Abschnitts wird die Seite „Einstellungen“:

• Erstellen Sie ein Abstandssystem mit benutzerdefinierten Eigenschaften und verwenden Sie relative Einheiten.
• CSS Grid für flexible, responsive Ausrichtung und Abstände schreiben
• Logische Properties für international anpassbare Layouts verwenden
• Medienabfragen schreiben, um zwischen kompakten und großzügigen Layouts zu wechseln

Abstand

Der Schlüssel zu einem guten Layout ist eine begrenzte Auswahl an Abstandsoptionen. So können Inhalte natürlich ausgerichtet und harmonisch dargestellt werden.

Benutzerdefinierte Eigenschaften

Dieser Workshop baut auf sieben benutzerdefinierten Eigenschaftsgrößen auf.

• Fügen Sie diese 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 ist nah an der Formulierung, die die Leute untereinander verwenden würden, um den Raum zu beschreiben. Außerdem verwenden Sie rem-Einheiten ausschließlich für lesbare ganze Einheiten, die sich anpassen und die Präferenz des Nutzers berücksichtigen.

Seitenstile

Als Nächstes müssen Sie einige Dokumentstile festlegen, die Ränder von Elementen entfernen und die Schriftart auf eine schöne serifenlose 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 Ihre erste Verwendung der benutzerdefinierten Eigenschaften für Abstände. Damit beginnt Ihre Reise durchs All.

Typografie

Die Schriftart für dieses Layout ist adaptiv. Das Keyword system-ui verwendet die Schriftart, die das Betriebssystem des Nutzers als optimale Schriftart für die Benutzeroberfläche festgelegt hat.

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

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

small {
  line-height: 1.5;
}

Die Stile 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 umbrochen wird. Andernfalls ist es zu eng.

Logische Attribute

Beachten Sie, dass für padding auf 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 ein rem-Gerät passen sie sich an den Nutzer an. Dieses Layout kann in eine andere Sprache übersetzt und auf die natürliche Schreib- und Dokumentrichtung eingestellt werden, die der Nutzer in seiner Muttersprache gewohnt ist. Logische Properties ermöglichen die Unterstützung dafür mit nur einer Definition von Abstand, Richtung oder Ausrichtung.

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

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

CSS-Grid-Layouts

Die CSS-Eigenschaft grid ist ein leistungsstarkes Layout-Tool mit vielen Funktionen für komplexe Aufgaben. Sie erstellen ein paar einfache Rasterlayouts und ein komplexes Layout. Sie arbeiten sich von außen nach innen vor, von Makro- zu Mikrolayouts. Ihre benutzerdefinierten Eigenschaften für Abstände werden nicht nur für Padding- oder Margin-Werte, sondern auch für Spaltengrößen, Rahmenradien und mehr wichtig.

Hier ist ein Screenshot der Chrome-Entwicklertools, die alle CSS-Rasterlayouts gleichzeitig überlagern:

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 einer eigenen Zeile platziert. Das ist ideal, um Elemente zu stapeln. Außerdem bietet es den Vorteil, dass gap verwendet wird. Zuvor haben Sie margin: 0 für alle Elemente mit dem Selektor * festgelegt. Das ist jetzt wichtig, da Sie gap für die Abstände verwenden. Mit „Lücke“ können Sie nicht nur den Abstand in einem Container verwalten, sondern auch den Abstand relativ zum 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 komplizierteste Rasterlayout des Designs, aber es ist für den spannendsten responsiven Aspekt verantwortlich:

• max-width stellt einen Wert für den Layoutalgorithmus bereit, der verwendet wird, um zu entscheiden, wie groß es sein kann.
• gap verwendet benutzerdefinierte Eigenschaften und übergibt einen anderen row-gap als column-gap.
• align-items ist auf flex-start festgelegt, damit die Höhe der Elemente nicht gestreckt wird.
• grid-template-columns hat eine komplexe Syntax, aber das Ziel ist einfach: Die Spalten sollen 35ch breit und nie weniger als 10ch sein. Wenn Platz ist, sollen die Elemente in Spalten angeordnet werden, andernfalls sind Zeilen in Ordnung.

2. Testen Sie die Größenänderung des Browsers. In einem kleinen Darstellungsbereich wird das Formular in Zeilen minimiert. Wenn jedoch Platz vorhanden ist, wird es in neuen Spalten angezeigt. Es passt sich also an, ohne dass Medienabfragen erforderlich sind. Diese Strategie von responsiven Stilen ohne Media-Abfragen 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 kleinem Abstand zwischen den untergeordneten Elementen sein.

<fieldset>

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

Dieses Layout ist für die Erstellung einer kartenähnlichen Darstellung und die Gruppierung von Eingaben verantwortlich. overflow: hidden und gap: 1px werden im nächsten Abschnitt deutlicher, wenn Sie 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);
}

Dieses Layout ist dafür verantwortlich, das Symbol und das Kästchen mit den zugehörigen Labels und Steuerelementen zu zentrieren. Die erste Spalte der Rastervorlage, var(--space-lg), erstellt eine Spalte, die breiter als das Symbol ist, sodass ein untergeordnetes Element darin zentriert werden kann.

Dieses Layout zeigt, wie viele Designentscheidungen bereits in den benutzerdefinierten Eigenschaften getroffen wurden. Padding, Lücken und eine Spalte wurden alle im Einklang mit dem System dimensioniert, indem Werte verwendet wurden, 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, die Erstellung einer Kreisform und die Zentrierung eines Bildes darin verantwortlich.

<picture> und [checkbox] – Ausrichtung

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

In diesem Layout wird die Zentrierung mithilfe des Pseudoselektors :is auf Bild- und Kästchenelemente beschränkt.

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

.fieldset-item <svg>

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

Dadurch wird die Größe des SVG-Symbols auf einen Wert aus dem Größensystem festgelegt.

.sm-stack

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

Diese Hilfsklasse ist für die Label-Elemente des Kästchens vorgesehen, um den Hilfetext für das Kästchen zu platzieren.

input[type="checkbox"]

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

Diese Stile vergrößern ein Kästchen mithilfe von Werten aus unserem Abstandssatz.

Prompts zum Ausprobieren

1. Öffnen Sie die Chrome-Entwicklertools und suchen Sie im Bereich Elemente im HTML-Code nach Grid-Badges. Klicken Sie darauf, um die Debugging-Tools zu aktivieren.
2. Öffnen Sie die Chrome-Entwicklertools und bewegen Sie den Mauszeiger im Bereich Stile auf eine Lücke.
3. Öffnen Sie die Chrome-Entwicklertools, rufen Sie den Bereich Stile auf und wechseln Sie von Stile zu Layouts. In diesem Bereich können Sie die Einstellungen ändern und Layouts aktivieren.

Medienabfragen

Mit dem folgenden CSS werden die Stile je nach Größe und Ausrichtung des Darstellungsbereichs angepasst, um den Abstand oder die Anordnung für den Darstellungsbereich zu optimieren.

Hinweis: Das CSS für jeden Abschnitt sollte nach dem Selektor 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 Medienabfragen fügen main mehr Padding hinzu, da mehr Platz im Darstellungsbereich verfügbar ist. Das bedeutet, dass es mit einem kompakten, kleinen Padding beginnt, aber immer mehr Platz einnimmt, wenn mehr Platz verfügbar ist.

<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 bereits mit auto-fit an die Größe des Darstellungsbereichs angepasst. Beim Testen auf einem Mobilgerät werden die beiden Formulargruppen jedoch nicht nebeneinander angezeigt, wenn das Gerät ins Querformat gedreht wird. Passen Sie sich mit einer orientation-Medienabfrage und einer Prüfung der Breite des Darstellungsbereichs an diesen Querformatkontext an. Wenn das Gerät im Querformat und mindestens 640 Pixel breit ist, erzwingen Sie zwei Spalten, indem Sie die benutzerdefinierte Eigenschaft --repeat auf eine Zahl anstelle des Schlüsselworts auto-fit festlegen.

.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 Medienabfrage ist eine weitere Erweiterung des Abstands, wenn mehr Platz im Darstellungsbereich verfügbar ist. In der Rastervorlage wird die erste Spalte mithilfe einer größeren benutzerdefinierten Eigenschaft (var(--space-xxl)) erweitert. Das Padding wird auch auf größere benutzerdefinierte Eigenschaften übertragen.

Prompts zum Ausprobieren

1. Vergrößern und verkleinern Sie das Browserfenster und beobachten Sie, wie sich der Space 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:

• Anpassung an die Farbpräferenzen für den dunklen und hellen Modus
• Ein Farbschema haben, das von einem Hex-Farbcode der Marke abgeleitet ist
• Barrierefreie Farben haben

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 Hue, Saturation und Lightness (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 Prozentsätzen 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 Farbkanalberechnungen mit benutzerdefinierten Eigenschaften kombinieren, erhalten Sie ein modernes, dynamisches Farbschema, bei dem Varianten aus einer Grundfarbe berechnet werden. So müssen Sie nicht mehr unzählige Farben im Code verwalten.

Benutzerdefinierte Eigenschaften

In diesem Abschnitt erstellen Sie eine Reihe benutzerdefinierter Eigenschaften, die Sie in den restlichen Stilen verwenden können. Ähnlich wie beim Abstandssatz, den Sie zuvor im :root-Tag erstellt haben, fügen Sie Farben hinzu.

Angenommen, die Markenfarbe Ihrer App ist #0af. Ihre erste Aufgabe besteht darin, den Hex-Farbcode hsl(200 100% 50%) in einen HSL-Farbwert umzuwandeln. Diese Umwandlung zeigt die Farbkanäle Ihrer Marke in HSL, die Sie calc() verwenden können, um verschiedene unterstützende Markenfarben zu berechnen.

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

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-Kanäle wurden extrahiert und in eigenen benutzerdefinierten Eigenschaften platziert.

1. Verwenden Sie alle drei Properties unverändert und erstellen Sie die Markenfarbe neu.

Marke

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

Da Ihr Farbschema standardmäßig dunkel ist, empfiehlt es sich, die Farben für die Verwendung auf dunklen Oberflächen zu entsättigen. Andernfalls können sie für das Auge flimmern oder unzugänglich sein. Wenn Sie die Sättigung Ihrer Markenfarbe verringern möchten, verwenden Sie den Farbton und die Helligkeit unverändert, halbieren aber die Sättigung mit einer Division: calc(var(--saturation) / 2). Jetzt passt die Markenfarbe zum Design, ist 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 Basis, erstellen daraus aber fast weiße Farben. Viele Nutzer werden denken, dass der Text weiß ist, obwohl er eigentlich sehr hellblau ist. Wenn Sie innerhalb eines Farbtons bleiben, können Sie ein harmonisches Design schaffen. --text1 hat einen Weißanteil von 85 % und --text2 von 65 %. Beide haben eine sehr geringe Sättigung.

2. Nachdem Sie den Code zu Ihrem Projekt hinzugefügt haben, öffnen Sie die Chrome-Entwicklertools und ändern Sie diese Kanalwerte. Sehen Sie sich an, wie HSL und die zugehörigen Kanäle miteinander interagieren. Vielleicht bevorzugst 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 die Oberflächen im dunklen Modus dunkel sind. Wenn Textfarben hohe Helligkeitswerte (85 % und höher) hatten, werden für Oberflächen niedrigere Werte (30 % und niedriger) verwendet. Ein ausreichender Abstand zwischen den Helligkeitsbereichen von Oberfläche und Text trägt dazu bei, dass die Farben für Nutzer gut lesbar sind.

3. Beachten Sie, dass die Farben beim dunkelsten Grau mit 10 % Helligkeit und 10 % Sättigung beginnen und dann mit zunehmender Helligkeit entsättigt werden. Jede neue Oberfläche ist 5 % leichter als die vorherige. Die Sättigung wird in den helleren Bereichen ebenfalls etwas verringert. Versuchen Sie, die Sättigung aller Oberflächen auf 10 % zu setzen. Gefällt es Ihnen besser oder schlechter?

Helles Design

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

Sie verwenden dieselbe Technik, um einen großen Unterschied in den Helligkeitswerten zwischen Ihren 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 die Markenfarbe. Die Sättigung muss wieder auf die volle Stärke gebracht 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, bei dem die Textfarben sehr hellblau waren, sind die Textfarben beim hellen Design sehr dunkelblau. Die Helligkeitswerte von 10 % und 30 % für die HSL-Farbe sollten Ihnen signalisieren, 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 hinfällig. Das Schöne ist, dass Sie hier im Code mit HSL-Farbkombinationen für das helle Design experimentieren und die 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 sind, können Sie sie verwenden. Sie haben eine schöne, auffällige Akzentfarbe für die Marke, zwei Textfarben und vier Oberflächenfarben.

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

<body>

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

Die Primärfarben der Seite sind die ersten Oberflächen- und Textfarben, die Sie erstellt haben. Dadurch wird auch der Standardkontrast auf das Maximum gesetzt. Jetzt kann das Umschalten zwischen hellem und dunklem Design getestet werden.

<fieldset>

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

Dies ist das kartenähnliche Element Ihres Designs. Der 1 Pixel breite Rahmen und die 1 Pixel breite Lücke haben dieselbe Farbe und stellen die Oberfläche hinter jedem .fieldset-item dar. Das sorgt für eine schöne visuelle Harmonie und ist leicht zu pflegen.

.fieldset-item

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

Jede Formulareingabe befindet sich auf einer eigenen Oberfläche. Hoffentlich können Sie erkennen, wie diese zusammenpassen und wie die Variationen der Helligkeit sich überlagern.

.fieldset-item > picture

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

Dies ist eine stilistische Entscheidung, um die Kreisform um das Symbol hervorzuheben. Warum das so ist, wird deutlich, wenn Sie im nächsten Abschnitt Interaktionen hinzufügen.

.fieldset-item svg

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

Die Symbole im Formular sind so eingestellt, dass der Alt-Text --text2 verwendet wird. Designs, bei denen ausgefüllte Symbole etwas heller als der Text sind, wirken nicht zu schwer.

.fieldset-item:focus-within svg

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

Dieser Selektor stimmt mit dem Eingabecontainerelement überein, wenn mit einer der Eingaben darin interagiert wird, und zielt auf die SVG ab, um sie mit Ihrem Markenakzent hervorzuheben. Das sorgt für ein gutes UX-Feedback des Formulars, bei dem die Interaktion mit Eingaben die relevanten Symbole hervorhebt.

<small>

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

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

Dunkle Formularsteuerelemente

:root {
  color-scheme: dark light;
}

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

6. Adaptive Animation

Git-Branch: animations

Am Ende dieses Abschnitts wird die Seite „Einstellungen“:

• Anpassung an die Bewegungseinstellungen des Nutzers
• Auf Nutzerinteraktionen reagieren

Weniger Bewegung im Vergleich zu keiner Bewegung

Die im Betriebssystem gefundene Nutzereinstellung für Bewegungen bietet keinen Wert für „Keine Animation“. Die Option „Bewegungen reduzieren“ Überblendungsanimationen, Farbübergänge und andere Effekte sind für Nutzer, die weniger Bewegung bevorzugen, weiterhin wünschenswert.

Auf dieser Einstellungsseite gibt es nicht viele Bewegungen auf dem Bildschirm. Die Bewegung ist eher ein Skalierungseffekt, als würde sich das Element auf die Nutzenden zubewegen. Es ist so einfach, den 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 Hebeeffekt hinzugefügt. Die Benutzeroberfläche schiebt ein Element nach vorn, sodass sich der Nutzer besser darauf konzentrieren kann, während die kontextbezogene Formulargruppe in den Vordergrund rückt.

.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 Elementebene in eine hervorgehobene Oberflächenfarbe. Dies ist eine weitere unterstützende Funktion der Benutzeroberfläche, die die Aufmerksamkeit des Nutzers auf sich zieht und signalisiert, dass die Eingabe empfangen wird. Farbübergänge müssen in den meisten Fällen 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 Bewegung festgelegt hat. Der erste Selektor und die ersten Stile verkleinern den Kreis-Clip-Pfad um 10 % und legen einige Übergangsparameter fest. Der zweite Selektor und Stil wartet darauf, dass Nutzer mit einer Eingabe interagieren, und vergrößert dann den Kreis des Symbols. Ein subtiler, aber schöner Effekt, wenn alles in Ordnung ist.

7. Glückwunsch

Git-Branch: complete

Glückwunsch, Sie haben eine nutzeradaptive Oberfläche erstellt.

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