Web-Styling der nächsten Generation

Informieren Sie sich über einige der spannenden Funktionen moderner CSS.

Adam Argyle

Una Kravets

In CSS gibt es gerade unzählige spannende Aufgaben. Viele von ihnen werden bereits von modernen Browsern unterstützt. Unseren Vortrag auf der CDS 2019, den Sie sich unten ansehen können, behandelt mehrere neue und kommende Funktionen, von denen wir dachten, dass sie Aufmerksamkeit erregen sollten.

In diesem Beitrag geht es um die Funktionen, die Sie bereits nutzen, Sehen Sie sich den Vortrag finden Sie ausführlichere Informationen zu neuen Funktionen wie Houdini. Außerdem finden Sie Demos zu allen Funktionen, die wir in der Seite "CSS@CDS".

Inhalt

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

Scroll-Snap

Mit Scroll-Snap lassen sich Ausrichtungspunkte definieren, wenn der Nutzer vertikal, horizontal oder beides durch den Content scrollt. Es verfügt über eine integrierte Scroll-Trägheit und Verzögerung sowie Touch-Gesten.

Mit diesem Beispielcode wird horizontales Scrollen in einem <section>-Element eingerichtet, wobei die Andockpunkte 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 <ph type="x-smartling-placeholder">
  </ph>
  • 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 normalerweise eine gute Idee.)
  • scroll-snap-type ist für das horizontale Andocken auf x und für mandatory festgelegt, damit der Darstellungsbereich immer auf den nächstgelegenen Ausrichtungspunkt ausgerichtet wird.
• Bei den untergeordneten <picture>-Elementen wird scroll-snap-align auf „start“ gesetzt. Dadurch werden die Ausrichtungspunkte auf der linken Seite jedes Bildes festgelegt (vorausgesetzt, direction ist auf ltr gesetzt).

Und hier ist eine Live-Demo:

Sie können sich auch Demos für das vertikale Scroll-Snap und das Matrix-Scroll-Snap ansehen.

:focus-within

:focus-within befasst sich mit einem langjährigen Problem mit der Barrierefreiheit: In vielen Fällen sollte sich das Fokussieren eines untergeordneten Elements auf die Darstellung eines übergeordneten Elements auswirken, damit die Benutzeroberfläche für Nutzer von Hilfstechnologien zugänglich ist.

Wenn Sie beispielsweise ein Drop-down-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 des angegebenen Elements liegt. Zurück zum Menübeispiel: Wenn 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;
}

Versuchen Sie, mit der Tabulatortaste durch die fokussierbaren Elemente in der Demo unten zu navigieren. 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 basierend auf den Gerätepräferenzen der Nutzer anzupassen. Grundsätzlich dient der Browser als Proxy für Einstellungen auf Systemebene, auf die wir in unserem CSS mithilfe der Gruppe prefers-* von Medienabfragen antworten können:

Hier sind die neuen Abfragen, von denen Entwickler glauben, dass sie am interessantesten sind:

• bevorzugt-geminderte-Bewegungen
• bevorzugt-Farbschema
• bevorzugt Kontrast
• bevorzugt-geringere-Transparenz
• forced-colors
• umgekehrte-Farben

Diese Suchanfragen sind ein großer Gewinn für die Barrierefreiheit. Bisher konnten wir beispielsweise nicht wissen, dass ein Nutzer für sein Betriebssystem einen Modus mit hohem Kontrast aktiviert hatte. Wenn Sie für eine Webanwendung einen Modus mit hohem Kontrast zur Verfügung stellen wollten, der Ihrer Marke treu blieb, mussten die Nutzer über die Benutzeroberfläche in Ihrer App dafür sorgen. Jetzt können Sie mit prefers-contrast die Einstellung für den hohen Kontrast im Betriebssystem erkennen.

Eine interessante Implikation dieser Medienabfragen besteht darin, dass wir ein Design für mehrere Kombinationen von Nutzerpräferenzen auf Systemebene entwickeln können, um die breite Palette von Nutzerpräferenzen und Anforderungen an die Barrierefreiheit zu berücksichtigen. Wenn Nutzende einen dunklen Modus mit hohem Kontrast in schlecht beleuchteten Umgebungen wünschen, können Sie dies tun!

Für Adam ist es wichtig, dass „verkleinerte Bewegungen“ bevorzugt werden. nicht als „keine Bewegung“ implementiert. Die Nutzenden geben an, dass sie weniger Bewegung bevorzugen und keine Animationen wünschen. Er behauptet, dass reduzierte Bewegung keine Bewegung ist. Das folgende Beispiel verwendet eine Überblenden-Animation, wenn der Nutzer reduzierte Bewegungen bevorzugt:

Logische Attribute

Logische Properties lösen ein Problem, das immer sichtbarer geworden ist, da immer mehr Entwickler mit der Internationalisierung beschäftigt sind. Viele Layouteigenschaften wie margin und padding gehen von einer Sprache aus, 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 für verschiedene Elemente individuell anpassen, was schnell zum Albtraum bei der Verwaltbarkeit wird.

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

• Die Dimension block ist senkrecht zum Textfluss in einer Zeile. (Auf Englisch ist block-size mit height identisch.)
• Die Dimension Inline ist parallel zum Textfluss in einer Zeile. (Auf Englisch ist inline-size mit width identisch.)

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

Mit logischen Eigenschaften kannst du dein Layout automatisch für andere Sprachen aktualisieren, indem du einfach die Eigenschaften writing-mode und direction für deine Seite änderst, anstatt Dutzende von Layouteigenschaften für einzelne Elemente zu aktualisieren.

In der folgenden Demo siehst du, wie logische Attribute funktionieren, indem du die writing-mode-Eigenschaft des <body>-Elements auf verschiedene Werte setzt:

position: sticky

Ein Element mit position: sticky bleibt im Blockablauf, bis es nicht mehr sichtbar ist. An dieser Stelle stoppt er das Scrollen mit dem Rest der Seite. und bleibt an der Position, die durch den Wert top des Elements angegeben wird. Der diesem Element zugewiesene Raum bleibt im Ablauf, und das Element kehrt dorthin zurück, wenn die Nutzenden wieder nach oben scrollen.

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

Fixierter Stack

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

Fixierte Folie

Hier sind die fixierten Elemente Cousins. (d. h., ihre Eltern sind Geschwister.) Wenn ein fixiertes Element die Untergrenze des Containers erreicht, bewegt es sich mit dem Container nach oben. Es entsteht der Eindruck, dass niedrigere haftende Elemente nach oben schieben. Mit anderen Worten: Sie scheinen um die feste Position zu konkurrieren.

Fixierte Desperado

Wie „Sticky Slide“ sind auch die fixierten Elemente in dieser Demo Cousins. 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, anstatt auf das Element selbst. Dadurch ergeben sich viele coole Effekte, die bisher nur mit komplizierten CSS- und JavaScript-Hacks durch eine einzige CSS-Zeile möglich waren.

In dieser Demo wird beispielsweise backdrop-filter verwendet, um eine Unkenntlichmachung im Stil des Betriebssystems zu erreichen:

Es gibt bereits einen tollen Beitrag zum Thema backdrop-filter. Dort findest du weitere Informationen.

:is()

Obwohl die Pseudoklasse :is() über zehn Jahre alt ist, wird sie immer noch nicht so viel genutzt, wie wir denken, dass sie es verdient. Sie verwendet eine durch Kommas getrennte Liste von Selektoren als Argument und gleicht alle Selektoren in dieser Liste ab. Diese Flexibilität macht die Funktion unglaublich praktisch und kann die Menge an CSS, 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

Das CSS-Rasterlayout verwendet seit einiger Zeit gap (vorher grid-gap). Durch die Angabe des internen Abstands eines enthaltenden Elements statt des Abstands um untergeordnete Elemente werden mit gap viele häufig auftretende Layoutprobleme gelöst. Bei Lücken müssen Sie beispielsweise nicht befürchten, dass Ränder an untergeordneten Elementen unerwünschten Leerraum an den Rändern eines enthaltenden Elements verursachen:

Und es gibt noch eine bessere Nachricht: gap kommt bald auch für die Flexbox und bietet damit dieselben Vorteile im Bereich Abstände wie das Raster:

• Es werden nicht viele, sondern nur eine Abstände deklariert.
• Sie müssen für Ihr Projekt keine Konventionen dafür aufstellen, welche untergeordneten Elemente über einen Abstand verfügen sollen. Stattdessen wird dem Element, das den Abstand enthält, der Abstand zugewiesen.
• Der Code ist leichter verständlich als ältere Strategien wie die lobotomisierte Eule.

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

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

CSS Houdini

Houdini besteht aus einer Reihe von untergeordneten APIs für das Rendering-Modul des Browsers, mit denen Sie festlegen können, wie benutzerdefinierter CSS-Code zu interpretieren ist. Mit anderen Worten: Sie erhalten Zugriff auf das CSS-Objektmodell, sodass 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-Angelegenheiten von Anwendungslogik zu trennen.
• Es ist leistungsfähiger als das CSS-Polyfilling, das wir derzeit mit JavaScript verwenden, da der Browser die Skripts nicht mehr parsen und einen zweiten Rendering-Zyklus ausführen muss. Der Houdini-Code wird im ersten Rendering-Zyklus geparst.

Houdini ist ein Sammelname für mehrere APIs. Weitere Informationen zu den Unternehmen und ihrem aktuellen Status finden Sie unter Is Houdini Ready Yet? (in englischer Sprache). In unserem Gespräch haben wir die Properties and Values API, die Paint API und das Animations-Worklet behandelt, da diese derzeit am häufigsten unterstützt werden. Wir könnten für jede dieser spannenden APIs einen vollständigen Beitrag veröffentlichen, aber in unserem Gespräch erhalten Sie erst einmal einen Überblick und einige coole Demos, die einen Eindruck davon vermitteln, was Sie mit den APIs machen können.

Überlauf

Es gibt noch ein paar Dinge, die wir besprechen wollten, aber wir hatten keine Zeit, sie genauer zu besprechen. Deshalb haben wir sie in einer kurzen Runde durchgegangen.⚡ Falls du von einigen dieser Funktionen noch nicht gehört hast, sieh dir unbedingt 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, die inhärent kein Seitenverhältnis haben.
• min(), max() und clamp(): Funktionen, mit denen Sie numerische Einschränkungen für beliebige 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: Für die Property display werden bald zwei Parameter akzeptiert, mit denen du das äußere und innere Layout explizit angeben kannst, anstatt zusammengesetzte Keywords wie inline-flex zu verwenden.
• CSS-Regionen: Damit füllen Sie einen bestimmten, nicht rechteckigen Bereich aus, in den und aus dem Content ein- und ausfließen kann.
• CSS-Module: JavaScript ist in der Lage, ein CSS-Modul anzufordern und ein komplexes Objekt zurückzugeben, mit dem Sie Operationen ganz einfach durchführen können.