Web-Styling der nächsten Generation

Informieren Sie sich über einige der spannenden Funktionen des modernen CSS-Codes.

Adam Argyle

Una Kravets

In CSS gibt es derzeit eine ganze Reihe spannender Dinge – und viele davon werden bereits in den heutigen Browsern unterstützt. In unserem Vortrag auf der CDS 2019, den Sie unten sehen können, gehen wir auf einige neue und künftige Funktionen ein, die unserer Ansicht nach Aufmerksamkeit erregen sollten.

In diesem Beitrag geht es vorrangig um die Funktionen, die ihr bereits nutzen könnt. Verpasse also nicht die Gelegenheit, um ausführlicher über neue Funktionen wie Houdini zu sprechen. Auf der CSS@CDS-Seite finden Sie außerdem Demos zu allen besprochenen Funktionen.

Inhalt

• Scroll-Snap
• :focus-within
• Medienabfragen – Stufe 5
• Logische Eigenschaften
• position: sticky
• backdrop-filter
• :is()
• gap
• Preisvergleichsportal Houdini
• Überlauf

Scroll-Snap

Mit Scroll Snap können Sie Andockpunkte definieren, wenn der Nutzer vertikal, horizontal oder beides durch Ihren Inhalt scrollt. Sie bietet integrierte Trägheit beim Scrollen sowie eine Verlangsamung und ermöglicht eine Touchbedienung.

Mit diesem Beispielcode wird das horizontale Scrollen in einem <section>-Element eingerichtet, wobei die Snappunkte an den linken Seiten der untergeordneten <picture>-Elemente ausgerichtet sind:

section {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

section > picture {
  scroll-snap-align: start;
}

So funktionierts:

• Für das übergeordnete <section>-Element:
  • overflow-x ist auf auto gesetzt, um horizontales Scrollen zu ermöglichen.
  • overscroll-behavior-x ist auf contain gesetzt, um zu verhindern, dass übergeordnete Elemente gescrollt werden, wenn der Nutzer die Grenzen des Scrollbereichs des <section>-Elements erreicht. (Dies ist für das Andocken nicht unbedingt erforderlich, aber in der Regel eine gute Idee.)
  • scroll-snap-type ist für das horizontale Andocken auf x und mandatory festgelegt, damit der Darstellungsbereich immer am nächsten Andockpunkt angedockt wird.
• In den untergeordneten <picture>-Elementen wird scroll-snap-align mit „Start“ festgelegt. Dadurch werden die Andockpunkte auf der linken Seite jedes Bildes festgelegt (vorausgesetzt, direction ist auf ltr gesetzt).

Und hier ist eine Live-Demo:

Sie können sich auch die Demos zum vertikalen Scroll-Snap und zum Matrix-Scroll-Snap ansehen.

:focus-within

:focus-within befasst sich mit einem seit Langem bestehenden Problem mit der Barrierefreiheit: Es gibt viele Fälle, in denen sich der Fokus auf ein untergeordnetes Element auf die Darstellung eines übergeordneten Elements auswirken sollte, damit die Benutzeroberfläche für Nutzer von Hilfstechnologien zugänglich ist.

Wenn Sie beispielsweise ein Dropdown-Menü mit mehreren Elementen haben, sollte das Menü sichtbar bleiben, während eines der Elemente im Fokus ist. Andernfalls wird das Menü für Tastaturnutzer ausgeblendet.

:focus-within weist den Browser an, einen Stil anzuwenden, wenn der Fokus auf einem untergeordneten Element eines angegebenen Elements liegt. Kehren Sie zurück zum Menübeispiel: Indem Sie :focus-within für das Menüelement festlegen, können Sie dafür sorgen, dass es sichtbar bleibt, wenn ein Menüelement im Fokus ist:

.menu:focus-within {
  display: block;
  opacity: 1;
  visibility: visible;
}

Gehen Sie in der Demo unten mit der Tabulatortaste durch die fokussierbaren Elemente. Die Menüs bleiben sichtbar, wenn Sie den Fokus auf die Menüelemente legen:

Medienabfragen Stufe 5

Neue Medienabfragen bieten uns leistungsstarke Möglichkeiten, die Nutzererfahrung unserer Apps an die Geräteeinstellungen der Nutzer anzupassen. Im Grunde dient der Browser als Proxy für Einstellungen auf Systemebene, auf die wir in unserem CSS mit der prefers-*-Gruppe von Medienabfragen antworten können:

Hier sind die neuen Abfragen, von denen wir denken, dass sie für Entwickler am interessantesten sind:

• bevorzugt-reduzierte-Bewegung
• bevorzugt-Farbschema
• bevorzugt einen Kontrast
• bevorzugt-reduzierte-Transparenz
• erzwungene Farben
• invertierte Farben

Diese Suchanfragen sind ein großer Gewinn für die Barrierefreiheit. Zuvor konnten wir beispielsweise nicht wissen, ob ein Nutzer sein Betriebssystem auf den Modus mit hohem Kontrast eingestellt hatte. Wenn Sie für eine Webanwendung einen Modus mit hohem Kontrast einrichten wollten, der Ihrem Unternehmen treu geblieben ist, mussten die Nutzer ihn über die Benutzeroberfläche Ihrer App auswählen. Jetzt können Sie die Einstellung mit hohem Kontrast im Betriebssystem mit prefers-contrast erkennen.

Eine spannende Implikation dieser Medienabfragen ist, dass wir Designs für mehrere Kombinationen von Nutzerpräferenzen auf Systemebene entwickeln können, um das breite Spektrum an Präferenzen der Nutzenden und Anforderungen an die Barrierefreiheit zu erfüllen. Wenn Nutzer einen dunklen Modus mit hohem Kontrast in schlecht beleuchteten Umgebungen wünschen, können Sie das tun.

Für Adam ist es wichtig, dass „verringerte Bewegung bevorzugt“ nicht als „keine Bewegung“ implementiert wird. Die Nutzenden sagen, dass sie weniger Bewegung bevorzugen, nicht, dass sie keine Animationen wünschen. Er behauptet, dass eine reduzierte Bewegung keine Bewegung ist. Im folgenden Beispiel wird eine Überblendungsanimation verwendet, wenn der Nutzer eine reduzierte Bewegung bevorzugt:

Logische Eigenschaften

Logische Eigenschaften lösen ein Problem, das im Zuge der Internationalisierung immer mehr an Sichtbarkeit gewonnen hat. Viele Layout-Eigenschaften wie margin und padding setzen eine Sprache voraus, die von oben nach unten und von links nach rechts gelesen wird.

Beim Entwerfen von Seiten für mehrere Sprachen mit unterschiedlichen Schreibmodi mussten Entwickler alle diese Eigenschaften individuell für mehrere Elemente anpassen, was schnell zu einem Albtraum für die Verwaltbarkeit wurde.

Mit logischen Eigenschaften können Sie die Layoutintegrität über Übersetzungs- und Schreibmodi hinweg aufrechterhalten. Sie werden dynamisch anhand der semantischen Reihenfolge der Inhalte aktualisiert, nicht anhand ihrer räumlichen Anordnung. Bei logischen Eigenschaften hat jedes Element zwei Dimensionen:

• Die Dimension Block ist senkrecht zum Textfluss in einer Zeile. (Auf Englisch ist block-size dasselbe wie height.)
• Die Dimension inline ist parallel zum Textfluss in einer Zeile. (Auf Englisch ist inline-size dasselbe wie width.)

Diese Dimensionsnamen gelten für alle logischen Layouteigenschaften. Auf Englisch ist beispielsweise block-start mit top und inline-end mit right identisch.

Mit logischen Eigenschaften können Sie Ihr Layout automatisch für andere Sprachen aktualisieren, indem Sie einfach die Eigenschaften writing-mode und direction für Ihre Seite ändern, anstatt Dutzende von Layouteigenschaften für einzelne Elemente zu aktualisieren.

In der folgenden Demo sehen Sie, wie logische Eigenschaften funktionieren, indem Sie die writing-mode-Eigenschaft des <body>-Elements auf andere Werte setzen:

position: sticky

Ein Element mit position: sticky bleibt im Blockfluss, bis es aus dem Bildschirm hinausgeht. Ab diesem Punkt stoppt es das Scrollen mit dem Rest der Seite und bleibt an der Position, die durch den top-Wert des Elements angegeben wird. Der diesem Element zugewiesene Bereich bleibt im Ablauf und das Element kehrt zu diesem zurück, wenn der Nutzer wieder nach oben scrollt.

Durch die fixierte Positionierung können Sie viele nützliche Effekte erzielen, für die bisher JavaScript erforderlich war. Um Ihnen einige der Möglichkeiten aufzuzeigen, haben wir mehrere Demos erstellt. In jeder Demo wird weitgehend der gleiche CSS-Code verwendet und das HTML-Markup wird nur geringfügig angepasst, um jeden Effekt zu erzeugen.

Fixierter Stapel

In dieser Demo verwenden alle fixierten Elemente denselben Container. Das bedeutet, dass sich jedes fixierte Element über das vorherige gleitet, wenn die Nutzenden nach unten scrollen. Die fixierten Elemente haben dieselbe fixierte Position.

Fixierte Folie

Die fixierten Elemente sind hier „Cusins“. (Das heißt, ihre Eltern sind Geschwister.) Wenn ein haftendes Element die Untergrenze seines Containers erreicht, bewegt es sich zusammen mit dem Container nach oben, wodurch der Eindruck entsteht, dass niedrigere haftende Elemente nach oben schieben. Mit anderen Worten: Sie scheinen um die feste Position zu konkurrieren.

Fixiertes Desperado

Wie bei Sticky Slide sind die fixierten Elemente in dieser Demo ähnlich. Sie wurden jedoch in Containern mit einem zweispaltigen Rasterlayout platziert.

backdrop-filter

Mit der Eigenschaft backdrop-filter können Sie grafische Effekte auf den Bereich hinter einem Element anwenden, nicht auf das Element selbst. Dadurch ergeben sich viele coole Effekte, die zuvor nur mit komplizierten CSS- und JavaScript-Hacks mit einer einzigen CSS-Zeile realisierbar waren.

In dieser Demo wird beispielsweise backdrop-filter verwendet, um eine Unkenntlichmachung im Betriebssystemstil zu erzielen:

Wir haben bereits einen großartigen Beitrag über backdrop-filter erstellt, dort findest du weitere Informationen.

:is()

Die Pseudoklasse :is() ist zwar über zehn Jahre alt, wird aber nicht so oft genutzt, wie wir es für angemessen halten. Als Argument wird eine durch Kommas getrennte Liste von Selektoren verwendet und alle Selektoren in dieser Liste werden abgeglichen. Diese Flexibilität macht sie unglaublich praktisch und kann die Menge an Preisvergleichsportalen, die Sie versenden, erheblich reduzieren.

Beispiel:

button.focus,
button:focus {
  …
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  …
}

/* selects the same elements as the code above */
button:is(.focus, :focus) {
  …
}

article > :is(h1,h2,h3,h4,h5,h6) {
  …
}

gap

CSS-Rasterlayout verwendet seit einiger Zeit gap (vorher grid-gap). Indem der innere Abstand eines Containerelements anstelle des Abstands um untergeordnete Elemente angegeben wird, lassen sich mit gap viele häufig auftretende Layoutprobleme lösen. So müssen Sie sich beispielsweise bei Rändern bei untergeordneten Elementen keine Gedanken darüber machen, ob die Ränder bei untergeordneten Elementen zu unerwünschten Leerräumen an den Rändern eines beinhaltenden Elements führen:

Noch bessere Neuigkeiten: gap ist demnächst in der Flexbox verfügbar und bietet dieselben Vorteile wie bei Raster:

• Es gibt nur eine Deklaration für Leerzeichen.
• Sie müssen in Ihrem Projekt keine Konventionen dafür festlegen, welche untergeordneten Elemente die Abstände haben sollen – das enthaltende Element ist stattdessen Eigentümer des Abstands.
• Der Code ist leichter verständlich als ältere Strategien wie die lobotomisierte Eule.

Das folgende Video zeigt die Vorteile der Verwendung einer einzelnen gap-Eigenschaft für zwei Elemente, eines mit Rasterlayout und eines mit flexiblem Layout:

Derzeit unterstützt nur FireFox gap in flexiblen Layouts. Probieren Sie diese Demo aus, um zu sehen, wie es funktioniert:

Preisvergleichsportal Houdini

Houdini ist eine Reihe von Low-Level-APIs für das Rendering-Modul des Browsers, über die Sie dem Browser mitteilen können, wie benutzerdefinierter CSS-Code interpretiert werden soll. Sie erhalten also Zugriff auf das CSS-Objektmodell, mit dem Sie CSS über JavaScript erweitern können. Dies hat mehrere Vorteile:

• Es gibt Ihnen viel mehr Möglichkeiten, benutzerdefinierte CSS-Funktionen zu erstellen.
• Es ist einfacher, Rendering-Bedenken von der Anwendungslogik zu trennen.
• Es ist leistungsfähiger als das CSS-Polyfilling, das wir derzeit mit JavaScript verwenden, da der Browser keine Skripts mehr parsen und einen zweiten Rendering-Zyklus durchführen muss. Houdini-Code wird im ersten Rendering-Zyklus geparst.

Houdini ist ein übergeordneter Name für mehrere APIs. Weitere Informationen zu den Unternehmen und ihrem aktuellen Status finden Sie unter Is Houdini Ready Yet? (Ist Houdini bereits bereit?). In unserem Vortrag haben wir uns mit der Properties and Values API, der Paint API und dem Animation Worklet beschäftigt, da sie derzeit am häufigsten unterstützt werden. Wir könnten auch einen vollständigen Beitrag zu jeder dieser spannenden APIs posten, aber schauen Sie sich jetzt erst einmal unser Gespräch an, um einen Überblick und einige coole Demos zu erhalten, die einen Eindruck davon vermitteln, was Sie mit den APIs tun können.

Überlauf

Es gibt noch ein paar Dinge, über die wir sprechen wollten, aber keine Zeit hatten, sie ausführlich zu behandeln. Wir haben sie daher in einer kurzen Runde besprochen.⚡ Wenn du einige dieser Funktionen noch nicht kennst, sieh dir am besten den letzten Teil des Vortrags an.

• size: eine Eigenschaft, mit der Sie Höhe und Breite gleichzeitig festlegen können
• aspect-ratio: eine Eigenschaft, die ein Seitenverhältnis für Elemente festlegt, für die standardmäßig kein Seitenverhältnis festgelegt ist
• min(), max() und clamp(): Funktionen, mit denen Sie numerische Einschränkungen für alle CSS-Eigenschaften festlegen können, nicht nur für Breite und Höhe
• list-style-type ist eine bestehende Property, unterstützt aber bald einen größeren Wertebereich, einschließlich Emojis und SVGs.
• display: outer inner: Die display-Property akzeptiert bald zwei Parameter, mit denen Sie das äußere und innere Layout explizit angeben können, anstatt zusammengesetzte Keywords wie inline-flex zu verwenden.
• CSS-Regionen: Damit können Sie einen bestimmten, nicht rechteckigen Bereich ausfüllen, in den Inhalte hinein- und aus ihnen herausragen können.
• CSS-Module: JavaScript kann ein CSS-Modul anfordern und ein Rich-Objekt zurückerhalten, das sich einfach mit Vorgängen ausführen lässt.