Makro- und Mikrolayout in einer neuen Ära des responsiven Webdesigns steuern.
Responsives Design heute
Wenn Sie heute den Begriff „responsives Design“ verwenden, denken Sie wahrscheinlich daran, Medienabfragen zu verwenden, um das Layout zu ändern, wenn Sie die Größe eines Designs von der Mobilgeräte- über die Tablet- bis hin zur Desktopgröße anpassen.
Aber bald wird diese Auffassung von responsivem Design möglicherweise genauso veraltet sein wie die Verwendung von Tabellen für das Seitenlayout.
Darstellungsbereichsbasierte Medienabfragen bieten einige leistungsstarke Tools, aber es fehlt ihnen an Feinheiten. Sie können nicht auf Nutzeranforderungen reagieren und keine responsiven Stile in Komponenten einfügen.
Sie können globale Darstellungsbereichsinformationen verwenden, um Ihre Komponenten zu gestalten. Sie sind jedoch nicht Eigentümer ihrer Stile. Das funktioniert nicht, wenn unsere Designsysteme komponenten- und nicht seitenbasiert sind.
Die gute Nachricht ist, dass sich das Umfeld ändert, und zwar ziemlich schnell. CSS entwickelt sich weiter und eine neue Ära des responsiven Designs steht vor der Tür.
Das passiert etwa alle 10 Jahre. Vor 10 Jahren, etwa 2010–2012, gab es eine große Veränderung mit mobilem und responsivem Design und der Einführung von CSS3.
Das Ökosystem ist also bereit für einige ziemlich große Änderungen am CSS. Die Entwickler bei Chrome und auf der gesamten Webplattform erstellen Prototypen, Spezifikationen und beginnen mit der Implementierung für die nächste Ära des responsiven Designs.
Diese Updates umfassen Medienfunktionen, die auf Nutzereinstellungen basieren, Containerabfragen und Medienabfragen für neue Bildschirmtypen wie faltbare Bildschirme.
Reagiert auf den Nutzer
Mit den neuen Medienfunktionen für Nutzereinstellungen können Sie Webinhalte so gestalten, dass sie den spezifischen Einstellungen und Anforderungen der Nutzer entsprechen. Das bedeutet, dass Sie mit den Medienfunktionen für Einstellungen die Nutzererfahrung an die Erfahrungen Ihrer Nutzer anpassen können.
Zu diesen Medienfunktionen für Nutzereinstellungen gehören:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Und vieles mehr
Präferenzfunktionen greifen die Einstellungen auf, die ein Nutzer in seinem Betriebssystem festgelegt hat, und tragen dazu bei, ein robusteres und personalisierteres Weberlebnis zu schaffen, insbesondere für Nutzer mit Anforderungen an die Barrierefreiheit.
prefers-reduced-motion
Nutzer, die in den Betriebssystemeinstellungen die Option Bewegung reduzieren festgelegt haben, möchten im Allgemeinen weniger Animationen sehen, wenn sie ihren Computer verwenden. Daher ist es wahrscheinlich, dass sie einen auffälligen Intro-Bildschirm, eine Animation zum Umdrehen von Karten, einen komplexen Loader oder andere auffällige Animationen bei der Nutzung des Webs nicht schätzen würden.
Mit prefers-reduced-motion können Sie Ihre Seiten so gestalten, dass sie auch mit reduzierter Bewegung funktionieren, und gleichzeitig eine bewegungsoptimierte Version für Nutzer erstellen, die diese Einstellung nicht aktiviert haben.
Diese Karte enthält Informationen auf beiden Seiten. Die Standarddarstellung mit reduzierter Bewegung ist eine Überblendung, um diese Informationen anzuzeigen, während die Darstellung mit Bewegung ein Umdrehen der Karte ist.
„prefers-reduced-motion“ sollte nicht „keine Bewegung“ bedeuten, da Bewegung für die Vermittlung von Informationen im Internet so wichtig ist. Biete stattdessen eine solide Grundlage, die Nutzer ohne unnötige Bewegungen durch die App führt, und verbessere diese Erfahrung schrittweise für Nutzer ohne diese Anforderungen oder Präferenzen in Bezug auf die Barrierefreiheit.
prefers-color-scheme
Ein weiteres Medien-Feature für Einstellungen ist prefers-color-scheme. Mit dieser Funktion können Sie die Benutzeroberfläche an das vom Nutzer bevorzugte Design anpassen. In ihrem Betriebssystem, ob auf dem Computer oder auf einem Mobilgerät, können Nutzer eine Einstellung für helle, dunkle oder automatische Designs festlegen, die sich je nach Tageszeit ändern.
Wenn Sie Ihre Seite mit benutzerdefinierten CSS-Eigenschaften einrichten, ist das Austauschen von Farbwerten ganz einfach. Sie können die Werte Ihres Farbschemas, z. B. backgroundColor und textOnPrimary, schnell aktualisieren, um sie innerhalb der Medienabfrage dynamisch an das neue Design anzupassen.
Damit Sie einige dieser Präferenzabfragen leichter testen können, können Sie die DevTools für die Emulation verwenden, anstatt jedes Mal die Systemeinstellungen zu öffnen.
Design für das dunkle Design
Beim Entwerfen eines dunklen Designs geht es nicht nur darum, Hintergrund- und Textfarben oder dunkle Bildlaufleisten zu invertieren. Es gibt einige Aspekte, die Sie vielleicht nicht bedacht haben. Beispielsweise müssen Sie möglicherweise Farben auf einem dunklen Hintergrund entsättigen, um visuelle Vibrationen zu reduzieren.
Anstatt Schatten zu verwenden, um Tiefe zu erzeugen und ein Element hervorzuheben, können Sie auch die Hintergrundfarbe des Elements aufhellen, um es hervorzuheben. 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-Bildschirmen erheblich verbessern. Diese Displays werden in neueren High-End-Smartphones verbaut und sind bei Mobilgeräten immer beliebter.
Eine Android-Studie aus dem Jahr 2018 zu dunklen Designs ergab, dass je nach Bildschirmhelligkeit und Benutzeroberfläche bis zu 60 % weniger Strom verbraucht wird. Der Wert von 60 % wurde durch den Vergleich des YouTube-Wiedergabebildschirms mit einem pausierten Video bei 100 % Bildschirmhelligkeit mit dem dunklen Design für die App-Benutzeroberfläche im Vergleich zu einem hellen Design ermittelt.
Du solltest deinen Nutzern nach Möglichkeit immer ein dunkles Design anbieten.
An den Container anpassbar
Einer der spannendsten neuen Bereiche in CSS sind Containerabfragen, die auch häufig als Elementabfragen bezeichnet werden. Die Umstellung von seitenbasiertem auf containerbasiertes responsives Design wird die Designlandschaft maßgeblich verändern.
Hier ist ein Beispiel für die leistungsstarken Funktionen, die Containerabfragen bieten. Sie können alle Stile des Kartenelements bearbeiten, einschließlich der Linkliste, der Schriftgrößen und des allgemeinen Layouts, basierend auf dem übergeordneten Container:
In diesem Beispiel sehen Sie zwei identische Komponenten mit zwei verschiedenen Containergrößen, die beide Platz in einem mit CSS Grid erstellten Layout einnehmen. Jede Komponente passt sich an den 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 in einer Seitenleiste, einem Hero-Bereich oder in einem Raster im Hauptteil einer Seite platzieren, enthält die Komponente selbst die responsiven Informationen und passt sich der Größe des Containers an, nicht der des Darstellungsbereichs.
Dazu ist die At-Regel @container erforderlich. Das funktioniert ähnlich wie eine Medienabfrage mit @media, aber @container fragt den übergeordneten Container nach Informationen ab, nicht den Darstellungsbereich und den User-Agent.
.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 anhand ihrer Größe mit min-width oder max-width zu gestalten.
Im obigen Code wird max-width verwendet und die Links werden auf display:none gesetzt. Außerdem wird die Schriftgröße der Zeit verringert, wenn der Container weniger als 850px breit ist.
Containerabfragekarten
Auf dieser Demo-Website für Pflanzen sind alle Produktkarten, einschließlich der im Hero-Bereich, der Seitenleiste mit zuletzt angesehenen Artikeln und des Produktraster, genau dieselbe Komponente mit demselben Markup.
Für dieses gesamte Layout werden keine Medienabfragen verwendet, sondern nur Containerabfragen. So kann jede Produktkarte in das richtige Layout verschoben werden, um den Platz auszufüllen. Das Raster verwendet beispielsweise ein Minmax-Spaltenlayout, damit die Elemente in den verfügbaren Platz fließen und das Raster neu angeordnet wird, wenn dieser Platz zu klein 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, indem es auf display: flex gesetzt wird, was eine Standard-Flex-Richtung von „row“ hat.
Wenn weniger Platz vorhanden ist, werden die Produktkarten gestapelt. Jede Produktkarte wird selbst formatiert, was mit globalen Stilen allein nicht möglich wäre.
Containerabfragen mit Medienabfragen kombinieren
Containerabfragen haben viele Anwendungsfälle, z. B. 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 wird das Layout und der Stil des Datums und des Wochentags des Kalenders geändert. Außerdem werden die Ränder und die Schriftgröße der geplanten Termine angepasst, damit sie besser in den Bereich passen.
Verwenden Sie dann eine Medienabfrage, um das gesamte Layout für kleinere Bildschirmgrößen anzupassen. Dieses Beispiel zeigt, wie leistungsstark es ist, Medienabfragen (Anpassung der globalen oder Makrostile) mit Containerabfragen (Anpassung der untergeordneten Elemente des Containers und ihrer Mikrostile) zu kombinieren.
Wir können also Makro- und Mikrolayouts innerhalb derselben UI-Komponente betrachten, um einige wirklich schöne, nuancierte Designentscheidungen zu treffen.
Containerabfragen heute verwenden
Diese Demos können jetzt in Chrome Canary hinter einem Flag ausprobiert werden. Rufen Sie in Canary about://flags 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 das Attribut contain und die LayoutNG-Grid-Implementierung aktiviert.
Das Flag aktiviert auch die entsprechenden Chrome-Entwicklertools-Funktionen. Containerabfragen in den Entwicklertools prüfen und Fehler beheben
Bereichsbezogene Stile
Wenn Sie Containerabfragen erweitern möchten, verwenden Sie bereichsbezogene Stile mit @scope, um die Reichweite Ihrer Selektoren einzuschränken.
Mit bereichsbezogenen Stilen können Sie komponentenbezogene Stile erstellen, um Namenskonflikte zu vermeiden. Das ist etwas, das viele Frameworks und Plug-ins wie CSS-Module bereits in Frameworks ermöglichen. Mit bereichsbezogenen Stilen 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 Bereichsdefinition können Sie „donut-förmige“ Selektoren erstellen, bei denen Sie eine Ober- und eine Untergrenze angeben können. Selektoren, die in der Regel @scope enthalten sind, werden innerhalb dieser Limits abgeglichen.
Ein Beispiel hierfür wäre ein Tab-Bereich, bei dem die Tabs die bereichsbezogenen Stile erhalten sollen, der Bereich innerhalb dieser Tabs jedoch nicht von diesen bereichsbezogenen Stilen betroffen sein soll.
Reagiert auf den Formfaktor
Das nächste Thema in unserem Gespräch über die neue Ära des responsiven Designs ist die Veränderung der Formfaktoren und die wachsenden Möglichkeiten, für die wir als Web-Community Designs entwickeln müssen (z. B. formveränderliche Bildschirme oder Virtual Reality).
Faltbare oder flexible Bildschirme und das Design für die Bildschirmaufteilung sind ein Beispiel dafür, wie sich der Formfaktor heute verändert. Und die Bildschirmaufteilung ist eine weitere Spezifikation, an der gearbeitet wird, um diese neuen Formfaktoren und Anforderungen abzudecken.
Eine experimentelle Medienabfrage für die Bildschirmaufteilung könnte hier hilfreich sein. Derzeit verhält es sich so: @media
(spanning: <type of fold>). In der Demo wird ein Rasterlayout mit zwei Spalten eingerichtet: Eine hat die Breite --sidebar-width, die standardmäßig 5rem beträgt, und die andere ist 1fr. Wenn das Layout auf einem Dual-Screen mit einem einzelnen vertikalen Falz angezeigt wird, wird der Wert von --sidebar-width mit dem Umgebungswert des linken Falzes 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;
}
Dadurch wird ein Layout ermöglicht, bei dem die Seitenleiste, in diesem Fall die Navigation, den Platz eines der Falze einnimmt, während die App-Benutzeroberfläche den anderen einnimmt. So wird ein „Knick“ in der Benutzeroberfläche vermieden.
Du kannst faltbare Displays im Chrome-Entwicklertools-Emulator testen, um das Debugging und Prototyping von bildschirmübergreifenden Inhalten direkt im Browser zu vereinfachen.
Fazit
Die Erkundung des UI-Designs über einen flachen Bildschirm hinaus ist ein weiterer Grund, warum Containerabfragen und bereichsbezogene Stile so wichtig sind. Sie bieten die Möglichkeit, Komponentenstile von Seitenlayout und globalen Stilen sowie Nutzerstilen zu trennen, was ein robusteres responsives Design ermöglicht. Das bedeutet, dass Sie jetzt Makrolayouts mit seitenbasierten Medienabfragen entwerfen können, einschließlich bildschirmübergreifender Nuancen. Gleichzeitig werden Mikrolayouts mit Containerabfragen für die Komponenten verwendet und nutzerpräferenzbasierte Medienabfragen hinzugefügt, um die Nutzererfahrung an die individuellen Präferenzen und Anforderungen anzupassen.
Das ist das neue Responsive.
Es kombiniert Makro- und Mikrolayout und berücksichtigt außerdem die Anpassung durch den Nutzer und den Formfaktor.
Jede dieser Änderungen allein würde eine erhebliche Veränderung der Art und Weise bedeuten, 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 überhaupt konzipieren. Es ist an der Zeit, responsives Design über die Größe des Darstellungsbereichs hinaus zu betrachten und alle diese neuen Achsen für bessere komponentenbasierte und personalisierte 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 ihr eure CSS-Kenntnisse verbessern und vielleicht einige Grundlagen wiederholen möchtet, könnt ihr euch den brandneuen, völlig kostenlosen CSS-Kurs und die Referenz auf web.dev ansehen, die mein Team gerade veröffentlicht hat. Ihr findet sie unter web.dev/learnCSS.
Ich hoffe, Ihnen hat dieser Überblick über die nächste Ära des responsiven Designs und einige der damit verbundenen Primitiven gefallen. Ich hoffe auch, dass Sie genauso gespannt sind wie ich, was das für die Zukunft des Webdesigns bedeutet.
Das eröffnet uns als UI-Community eine riesige Chance, komponentenbasierte Stile und neue Formfaktoren zu nutzen und auf Nutzer reagierende Erlebnisse zu schaffen.