Makro- und Mikrolayout in einer neuen Ära des responsiven Webdesigns steuern.
Responsives Design heute
Wenn Sie heute den Begriff „responsives Design“ verwenden, denken Sie höchstwahrscheinlich an die Verwendung von Media-Queries, um das Layout zu ändern, wenn Sie ein Design von der Größe für Mobilgeräte über die Größe für Tablets bis hin zur Größe für Desktop-Computer anpassen.
Bald könnte diese Wahrnehmung von responsivem Design jedoch als so veraltet gelten wie die Verwendung von Tabellen für das Seitenlayout.
Viewport-basierte Media-Queries bieten Ihnen einige leistungsstarke Tools, aber es fehlt ihnen an Raffinesse. Sie können nicht auf Nutzeranforderungen reagieren und keine responsiven Stile in Komponenten einfügen.
Sie können globale Informationen zum Viewport verwenden, um Ihre Komponenten zu gestalten. Die Komponenten haben jedoch weiterhin keine eigenen Stile. Das funktioniert nicht, wenn unsere Designsysteme komponenten- und nicht seitenbasiert sind.
Die gute Nachricht ist, dass sich das Ökosystem verändert – und zwar ziemlich schnell. CSS entwickelt sich ständig weiter und eine neue Ära des responsiven Designs steht vor der Tür.
Das passiert etwa alle 10 Jahre. Vor 10 Jahren, etwa 2010 bis 2012, gab es mit Mobilgeräten und responsivem Design sowie der Einführung von CSS3 eine enorme Veränderung.
Das Ökosystem ist also wieder einmal bereit für einige ziemlich große Änderungen an CSS. Die Entwickler von Chrome und der Webplattform entwickeln Prototypen, erstellen Spezifikationen und beginnen mit der Implementierung für die nächste Generation von responsivem Design.
Zu diesen Updates gehören auf Nutzerpräferenzen basierende Media-Funktionen, Container-Abfragen und Media-Abfragen für neue Bildschirmtypen wie faltbare Bildschirme.
Reaktionsschnell
Mit den neuen Media-Funktionen für Nutzereinstellungen können Sie Web-Erlebnisse gestalten, die den spezifischen Vorlieben und Bedürfnissen der Nutzer entsprechen. Das bedeutet, dass Sie mit Media-Funktionen für Einstellungen die Nutzerfreundlichkeit an die Nutzer anpassen können.
Zu diesen Media-Funktionen für Nutzereinstellungen gehören:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Und vieles mehr
Funktionen für Einstellungen berücksichtigen die Einstellungen, die ein Nutzer in seinem Betriebssystem festgelegt hat, und tragen zu einer robusteren und personalisierten Weboberfläche bei, insbesondere für Nutzer mit Anforderungen an die Barrierefreiheit.
prefers-reduced-motion
Nutzer, die Betriebssystemeinstellungen für weniger Bewegung festgelegt haben, fordern bei der allgemeinen Nutzung ihres Computers weniger Animationen an. Daher ist es wahrscheinlich, dass sie einen auffälligen Intro-Bildschirm, eine Karten-Flip-Animation, einen komplexen Loader oder andere auffällige Animationen bei der Nutzung des Internets nicht zu schätzen wissen.
Mit prefers-reduced-motion können Sie Ihre Seiten so gestalten, dass sie auch bei reduzierter Bewegung gut aussehen. Für Nutzer, die diese Einstellung nicht aktiviert haben, können Sie die Bewegungseffekte optimieren.
Diese Karte enthält Informationen auf beiden Seiten. Bei der Standardversion mit reduzierter Bewegung wird die Information durch eine Überblendung angezeigt, bei der Version mit erhöhter Bewegung durch ein Umblättern.
„Prefers-reduced-motion“ sollte nicht „keine Bewegung“ bedeuten, da Bewegung so wichtig für die Vermittlung von Informationen im Internet ist. Bieten Sie stattdessen eine solide Basisfunktion, die Ihre Nutzer ohne unnötige Bewegungen führt, und verbessern Sie diese Funktion schrittweise für Nutzer ohne diese Anforderungen oder Einstellungen.
prefers-color-scheme
Eine weitere Media-Funktion für Einstellungen ist prefers-color-scheme. Mit dieser Funktion können Sie die Benutzeroberfläche an das vom Nutzer bevorzugte Design anpassen. Im Betriebssystem können Nutzer auf dem Computer oder Mobilgerät ein helles, dunkles oder automatisches Design festlegen, das sich je nach Tageszeit ändert.
Wenn Sie Ihre Seite mit benutzerdefinierten CSS-Eigenschaften einrichten, ist das Austauschen von Farbwerten ganz einfach. Sie können die Werte Ihres Farbdesigns, z. B. backgroundColor und textOnPrimary, schnell aktualisieren, damit sie sich dynamisch an das neue Design in der Media-Anfrage anpassen.
Um einige dieser Anfragen für Einstellungen einfacher zu testen, können Sie DevTools für die Emulation verwenden, anstatt jedes Mal die Systemeinstellungen zu öffnen.
Dunkles Design
Beim Design für ein dunkles Design geht es nicht nur darum, Hintergrund- und Textfarben umzukehren oder dunkle Scrollleisten zu verwenden. Es gibt einige Aspekte, die Sie möglicherweise nicht berücksichtigen. So kann es beispielsweise erforderlich sein, Farben auf einem dunklen Hintergrund zu entsättigen, um visuelle Unruhe zu reduzieren.
Anstatt Schatten zu verwenden, um Tiefe zu erzeugen und ein Element nach vorn zu rücken, können Sie auch Licht in der Hintergrundfarbe des Elements verwenden, um es nach vorn zu rücken. Das liegt daran, dass Schatten auf einem dunklen Hintergrund nicht so gut zur Geltung kommen.
Dunkle Designs bieten nicht nur eine individuellere Nutzererfahrung, sondern können auch die Akkulaufzeit bei AMOLED-Displays deutlich verbessern. Diese Displays sind in neueren High-End-Smartphones zu finden und werden auf Mobilgeräten immer beliebter.
Eine Android-Studie aus dem Jahr 2018 zum dunklen Design ergab, dass der Stromverbrauch je nach Bildschirmhelligkeit und Benutzeroberfläche um bis zu 60 % gesenkt werden konnte. Die Angabe von 60% basiert auf einem Vergleich des YouTube-Wiedergabebildschirms mit einem pausierten Video bei 100% Bildschirmhelligkeit mit einem dunklen Design für die App-Benutzeroberfläche im Vergleich zu einem hellen Design.
Sie sollten Ihren Nutzern immer ein dunkles Design anbieten, wenn möglich.
Reagiert auf den Container
Einer der spannendsten neuen Bereiche in CSS sind Container-Abfragen, die auch häufig als Element-Abfragen bezeichnet werden. Die Umstellung von seitenbasiertem auf containerbasiertes responsives Design wird das Design-Ökosystem grundlegend verändern.
Hier sehen Sie ein Beispiel für die leistungsstarken Funktionen, die Containerabfragen bieten. Sie können die Formatierung der einzelnen Kartenelemente anpassen, einschließlich der Linkliste, Schriftgrößen und des Gesamlayouts, basierend auf dem übergeordneten Container:
In diesem Beispiel sind zwei identische Komponenten mit zwei verschiedenen Containergrößen zu sehen, die beide Platz in einem Layout einnehmen, das mit CSS Grid erstellt wurde. Jede Komponente passt sich dem ihr zugewiesenen Platz an und wird entsprechend formatiert.
Diese Flexibilität ist mit Media-Queries allein nicht möglich.
Containerabfragen bieten einen viel dynamischeren Ansatz für responsives Design. Wenn Sie diese Kartenkomponente also in einer Seitenleiste, einem Hero-Bereich oder in einem Raster im Hauptteil einer Seite platzieren, sind die Informationen zur Reaktionsfähigkeit und die Größen der Komponente vom Container und nicht vom Darstellungsbereich abhängig.
Dazu ist die @-Regel @container erforderlich. Sie funktioniert ähnlich wie eine Media-Anfrage mit @media. Allerdings wird bei @container der übergeordnete Container anstelle des Viewports und des User-Agents nach Informationen durchsucht.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Legen Sie zuerst die Containment-Eigenschaft für das übergeordnete Element fest. Schreiben Sie dann eine @container-Abfrage, um die Elemente im Container basierend auf seiner Größe mit min-width oder max-width zu formatieren.
Im Code oben wird max-width verwendet und die Links werden auf display:none festgelegt. Außerdem wird die Schriftgröße für die Zeit verringert, wenn der Container weniger als 850px breit ist.
Karten für Containerabfragen
Auf dieser Demowebsite für Pflanzen sind alle Produktkarten, einschließlich der Karte im Hero-Bereich, der Seitenleiste mit den zuletzt angesehenen Artikeln und des Produktrasters, genau dieselbe Komponente mit demselben Markup.
Für dieses gesamte Layout werden keine Media-Queries verwendet, sondern nur Container-Queries. So kann jede Produktkarte in das richtige Layout verschoben werden, um den verfügbaren Platz zu füllen. Das Raster verwendet beispielsweise ein minmax-Spaltenlayout, damit die Elemente in ihren Bereich fließen und das Raster neu angeordnet wird, wenn der Bereich zu komprimiert ist (d. h. die Mindestgröße erreicht wurde).
.product {
container-type: inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}
Wenn im Raster mindestens 350px Platz ist, wird das Kartenlayout horizontal ausgerichtet, indem es auf display: flex gesetzt wird. Die Standard-Flex-Richtung ist „row“.
Bei weniger Platz werden die Produktkarten gestapelt. Jede Produktkarte wird selbst formatiert. Das wäre mit globalen Stilen allein nicht möglich.
Containerabfragen mit Media Queries kombinieren
Containerabfragen haben viele Anwendungsfälle, einer davon ist eine Kalenderkomponente. Mit Containerabfragen können Sie die Kalendertermine und andere Segmente basierend auf der verfügbaren Breite des übergeordneten Elements neu anordnen.
In diesem Democontainer werden Abfragen verwendet, um das Layout und den Stil von Datum und Wochentag im Kalender zu ändern. Außerdem werden die Ränder und die Schriftgröße der geplanten Termine angepasst, damit sie besser in den verfügbaren Platz passen.
Verwenden Sie dann eine Media-Query, um das gesamte Layout für kleinere Bildschirmgrößen zu verschieben. Dieses Beispiel zeigt, wie leistungsstark es ist, Media-Queries (Anpassen der globalen oder Makrostile) mit Container-Queries (Anpassen der untergeordneten Elemente des Containers und ihrer Mikrostile) zu kombinieren.
Wir können jetzt Makro- und Mikrolayouts in derselben UI-Komponente verwenden, um wirklich schöne, differenzierte Designentscheidungen zu treffen.
Containerabfragen heute verwenden
Diese Demos können jetzt in Chrome Canary hinter einem Flag gespielt werden. Rufen Sie about://flags in Canary auf und aktivieren Sie das Flag #enable-container-queries.
Dadurch wird die Unterstützung für die Werte @container, inline-size und block-size für die Property contain sowie die LayoutNG Grid-Implementierung aktiviert.
Das Flag aktiviert auch die entsprechenden Chrome-Entwicklertools. Containerabfragen in den DevTools untersuchen und Fehler beheben
Bereichsbezogene Stile
Wenn Sie Containerabfragen verwenden möchten, verwenden Sie bereichsbezogene Stile mit @scope, um die Reichweite Ihrer Selektoren einzuschränken.
Mit bereichsbezogenen Stilen können Sie Komponenten spezifisch gestalten, um Namenskonflikte zu vermeiden. Viele Frameworks und Plug-ins wie CSS-Module ermöglichen dies bereits. Mit Scoped Styles können Sie gekapselte Stile nativ für Komponenten mit lesbarem CSS schreiben, ohne das Markup anpassen zu müssen.
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
Mit der Bereichsfunktion können Sie „ringförmige“ Selektoren erstellen, bei denen Sie eine Ober- und Untergrenze angeben können. Selektoren, die in der @scope-Regel enthalten sind, werden innerhalb dieser Grenzen abgeglichen.
Ein Beispiel hierfür ist ein Tab-Bereich, in dem die Tabs die bereichsbezogenen Stile erhalten sollen, der Bereich in diesen Tabs jedoch nicht von diesen bereichsbezogenen Stilen betroffen sein soll.
An den Formfaktor angepasst
Das nächste Thema in unserem Gespräch über die neue Ära des responsiven Designs ist die Verschiebung der Formfaktoren und die wachsenden Möglichkeiten, für die wir als Web-Community entwickeln müssen (z. B. formverändernde Bildschirme oder virtuelle Realität).
Faltbare oder flexible Displays und das Design für die Bildschirmüberspannung sind Beispiele für Formfaktoränderungen, die wir heute sehen. Und Screen-Spanning ist eine weitere Spezifikation, an der gearbeitet wird, um diese neuen Formfaktoren und Anforderungen zu berücksichtigen.
Eine experimentelle Media-Anfrage für die Darstellung auf dem gesamten Bildschirm könnte hier helfen. Derzeit verhält es sich so: @media
(spanning: <type of fold>). Im Demobeispiel wird ein Rasterlayout mit zwei Spalten eingerichtet: Eine hat eine Breite von „--sidebar-width“, die standardmäßig 5 rem beträgt, und die andere ist 1fr. Wenn das Layout auf einem Dual-Screen-Gerät mit einer einzelnen vertikalen Faltung angezeigt wird, wird der Wert von --sidebar-width mit dem Umgebungswert der linken Faltung aktualisiert.
:root {
--sidebar-width: 5rem;
}
@media (spanning: single-fold-vertical) {
--sidebar-width: env(fold-left);
}
main {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}
So kann ein Layout erstellt werden, in dem die Seitenleiste (in diesem Fall die Navigation) den Bereich einer der Faltungen und die App-Benutzeroberfläche den Bereich der anderen Faltung ausfüllt. So wird eine „Falte“ in der Benutzeroberfläche verhindert.
Sie können faltbare Displays im Chrome-Entwicklertools-Emulator testen, um das Screen Spanning direkt im Browser zu debuggen und Prototypen zu erstellen.
Fazit
Die Entwicklung von UI-Designs, die über einen flachen Bildschirm hinausgehen, ist ein weiterer Grund, warum Containerabfragen und bereichsbezogene Stile so wichtig sind. Sie bieten die Möglichkeit, Komponentenstile von Seitenlayout, globalen Stilen und Nutzerstilen zu trennen, was ein robusteres responsives Design ermöglicht. Das bedeutet, dass Sie jetzt Makrolayouts mit seitenbasierten Media-Queries entwerfen können, einschließlich Nuancen, die sich über den Bildschirm erstrecken. Gleichzeitig können Sie Mikrolayouts mit Containerabfragen für die Komponenten verwenden und nutzerbezogene Media-Abfragen hinzufügen, um die Nutzererfahrung basierend auf den individuellen Einstellungen und Anforderungen anzupassen.
Das ist das neue Responsive.
Dabei werden Makro- und Mikrolayout kombiniert und zusätzlich die Nutzeranpassung und der Formfaktor berücksichtigt.
Jede dieser Änderungen allein würde eine erhebliche Umstellung der Art und Weise darstellen, wie wir für das Web entwickeln. Zusammen bedeuten sie jedoch eine wirklich große Veränderung in der Art und Weise, wie wir responsives Design konzipieren. Es ist an der Zeit, über die Größe des Viewports hinaus über responsives Design nachzudenken und all diese neuen Achsen für bessere, komponentenbasierte und benutzerdefinierte Erlebnisse zu berücksichtigen.
Die nächste Ära des responsiven Designs hat begonnen und Sie können sie bereits selbst erkunden.
web.dev/learnCSS
Wenn Sie Ihre CSS-Kenntnisse verbessern und vielleicht einige Grundlagen wiederholen möchten, hat mein Team einen brandneuen, völlig kostenlosen CSS-Kurs und eine Referenz auf web.dev erstellt. Sie können darauf über web.dev/learnCSS zugreifen.
Ich hoffe, Ihnen hat dieser Überblick über die nächste Ära des responsiven Designs und einige der damit verbundenen Primitiven gefallen. Ich bin gespannt, was das für die Zukunft des Webdesigns bedeutet.
Für uns als UI-Community bietet sich damit eine riesige Chance, komponentenbasierten Stil, neue Formfaktoren und nutzerorientierte Erlebnisse zu schaffen.