:has(), Subgrid und Responsive Video

Drei Neuerungen aus der Frontend-Welt, die sich im Praxiseinsatz bewährt haben — mit Beispielen aus echten Contao-Projekten.

Die :has()-Pseudoklasse

Mit :has() lassen sich ziemlich coole Sachen machen, für die bisher zusätzliche Klassen notwendig waren. Ein paar ganz einfache Beispiele findest du auf MDN. Hier ein Praxisbeispiel aus einem Contao-Projekt:

Im Footer wurde auf allen Seiten ein Block mit Kontaktmöglichkeiten ausgegeben (Anschrift und Standorte) — abgesehen von der Kontaktseite, denn dort wären die Informationen nur doppelt gewesen. Für die Gestaltung reicht diese Anweisung:

[id='footer']:has(.contact--footer) {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

Der Footer bekommt mehr Innenabstand, wenn das Element mit der Klasse .contact--footer vorhanden ist. Auf der Kontaktseite wird nur die Meta-Navigation für Impressum und Datenschutz ausgegeben — das Element fehlt, der Footer bekommt kein zusätzliches Padding.

Bisher musste man solche Fälle über eine zusätzliche Klasse lösen, entweder per zusätzlichem Seitenlayout oder per Klasse für die Seite (z. B. .no--contact). Dank :has() kann der Browser selbst entscheiden. Alle modernen Browser unterstützen die Pseudoklasse, Firefox seit Version 121.

Subgrid

Subgrid wird mittlerweile von den großen Browsern unterstützt (Browser-Support auf caniuse) — und kommt genau zur richtigen Zeit.

Praxisbeispiel: Bei einem großen Shop-Relaunch mit Contao richtet Subgrid unterschiedliche Produktinformationen innerhalb einer Produktliste aus. Durch die vielen Faktoren, die Einfluss auf ein Produkt nehmen — ein- oder mehrzeiliger Produktname, Preis, Rabatte, Warenbestand — war es vorher nahezu unmöglich, eine benutzerfreundliche Darstellung zu erzeugen, bei der zum Beispiel alle Preise auf einer Höhe liegen.

Für Browser ohne Subgrid-Support bleiben Grid und Flexbox als Fallback. Das sieht dann nicht ganz so schön aus, dürfte die betroffenen Nutzer:innen aber kaum stören — sie wissen ja nicht, wie es besser aussehen würde.

Zum Einstieg empfiehlt sich dieser Artikel im Smashing Magazine: CSS Grid Level 2: Here Comes Subgrid

Echte Responsive Videos

Kennst du das Problem? Du möchtest ein Video als Hintergrundvideo im Loop laufen lassen — aber es war lange nicht möglich, unterschiedliche Videos für unterschiedliche Viewports zu wählen. Bei Bildern geht das in Contao schon seit Jahren, bei Videos lief dagegen das gleiche HD-Video vom Desktop auch auf dem Smartphone.

Dank Scott Jehl ändert sich das: We're Bringing Responsive Video Back. Safari konnte es schon länger, Chrome und Firefox haben echte Responsive Videos mit Version 120 eingeführt.

Damit Contao die Funktion ebenfalls unterstützt, gibt es ein Feature-Ticket — Feedback und Ideen sind willkommen: Support for (Real) Responsive Video

Fortsetzung der Reihe: Popover-API und color-mix()