3 Dinge, die mein Frontend-Entwickler Herz höher schlagen lassen
Moin!
In den letzten Wochen habe ich 3 Dinge gelernt bzw. entdeckt, die ich – obwohl sie noch nicht alle fertig sind – unbedingt mit dir teilen möchte. Also los geht's:
1. Richtige Responsive Videos
Kennst du das Problem? Du möchtest ein Video als Hintergrundvideo im Loop laufen lassen. Das Problem: Bisher war es nicht möglich, unterschiedliche Videos für unterschiedliche Viewports zu wählen. Bei Bildern geht das (in Contao) ja schon seit mehreren Jahren.
Bei Videos ging das bisher leider nicht, d.h. das gleiche HD-Video für den Desktop wurde auch auf dem Smartphone verwendet. Doch dank Scott Jehl ändert sich das nun: We're Bringing Responsive Video Back.
Safari konnte das schon länger, aber nun ziehen auch Chrome und Firefox nach, die echte Responsive Videos mit Version 120 einführen wollen.
In der Hoffnung, dass Contao die Funktion ebenfalls zeitnah einführen wird, habe ich bereits ein Ticket erstellt. Feedback und Ideen sind sicherlich willkommen: Support for (Real) Responsive Video
2. Die :has() CSS pseudo-class
Gefühlt gibt es die :has() Pseudo Klasse schon länger, aber aufmerksam wurde ich erst im Herbst 2022 darauf. Und seit diesem Sommer setze ich :has() auch aktiv in Kundenprojekten ein – obwohl der Firefox den Selektor noch nicht offiziell unterstützt.
Du fragst dich, was man mit :has() machen kann?
Ziemlich coole Sachen, für die bisher zusätzliche Klassen notwendig waren. Ein paar gaaanz einfache Beispiele findest du hier. Aber die Flaschenpost ist ja ein Newsletter für Contao, also hier noch ein Beispiel, wie ich die :has() Pseudo Klasse eingesetzt habe:
Bei einer kürzlich umgesetzten Website wurde im Footer auf allen Seiten ein Block mit Kontaktmöglichkeiten ausgegeben (also Anschrift und Standorte) – abgesehen von der Kontaktseite. Denn dort wären die Informationen einfach nur doppelt gewesen.
Für die Gestaltung des Footers mit Kontaktmöglichkeiten habe ich folgende Anweisung verwendet
[id='footer']:has(.contact--footer) {
padding-top: 2rem;
padding-bottom: 2rem;
}
und so dem Footer mehr Innenabstand gegeben, wenn das Element mit der Klasse .contact--footer vorhanden ist. Auf der Kontaktseite hingegen wird nur die Meta-Navigation für Impressum und Datenschutz ausgegeben. Da dort das Element fehlt, bekommt der Footer hier kein zusätzliches Padding.
Bisher habe ich solche Fälle immer über eine zusätzliche Klasse gelöst – entweder über ein zusätzliches Seitenlayout oder über eine Klasse für die Seite (z.B. .no--contact). Dank :has() kann der Browser nun selbst entscheiden.
Und was ist mit dem fehlenden Support für den Firefox? Der soll nun ebenfalls noch in diesem Jahr kommen (wohl kurz vor Weihnachten, mit Version 121). Bis dahin gäbe es zum Beispiel die Möglichkeit, mit einem Polyfill zu arbeiten.
3. Subgrid
Irgendwie habe ich gar nicht mitbekommen, dass Subgrid mittlerweile von den großen Browsern unterstützt wird. Laut caniuse liegt der Support bei knapp 80%.
Wow! Das kam genau zur richtigen Zeit.
Denn bei einem großen Shop-Relaunch mit Contao nutze ich nun Subgrid, um unterschiedliche Produktinformationen innerhalb einer Produktliste auszurichten.
Hier war es durch die vielen Faktoren, die Einfluss auf ein Produkt nehmen können – Produktname (einzeilig oder mehrzeilig), Preis, Rabatte, Warenbestand – nahezu unmöglich, eine benutzerfreundliche Darstellung zu erzeugen (bei der zum Beispiel alle Preise auf einer Höhe sind, zum besseren Vergleich).
Für Browser, die noch kein Subgrid unterstützen, setze ich weiterhin auf Grid und Flexbox. Das sieht dann zwar nicht ganz schön aus, dürfte aber dennoch die betroffenen Nutzer nicht weiter stören (denn sie wissen ja nicht, wie es besser aussehen würde).
Falls du dich noch nicht mit Subgrid beschäftigt hast, dann schau dir am besten mal diesen Artikel bei Smashing Magazine an: CSS Grid Level 2: Here Comes Subgrid
~~~
Gibt es Funktionen und Technologien, die dich momentan begeistern? Lass es mich gerne wissen, indem du auf diese Mail antwortest.
Viele Grüße,
Dennis
PS: Teil 3 zu Überschriften in Contao ist nicht vergessen. Es dauert nur noch ein bisschen. Du kannst den aktuellen Stand der Entwicklung nun auch auf Github verfolgen.