Ende letzten Jahres war der Interop 2023 zu Ende. Diese Bemühungen von Browseranbietern und anderen Parteien zielen darauf ab, ein interoperables Web zu schaffen und die Unterschiede zwischen den Browsern zu reduzieren, die Sie stolpern. In diesem Beitrag werden das Endergebnis und einige der Lieblingsfunktionen des Chrome-Teams vorgestellt.
Die Endergebnisse
Es ist toll, so viel Grün zu sehen. Vergleiche dies mit den Werten Anfang 2023. Wir haben einen großen Schritt gemacht und jeder Browser verzeichnet einen enormen Anstieg.
Worauf freuen wir uns?
Eine vollständige Liste der Schwerpunkte für 2023 finden Sie im Interop 2023-Dashboard. Einige Schwerpunkte wie :has(), Containerabfragen und das Attribut inert decken ein ganzes Feature ab. Andere, wie die Arbeit an Flexbox, haben sich mit einigen subtilen Testfehlern in einer vorhandenen browserübergreifenden Funktion befasst.
:has()
„Endlich ein übergeordneter Selektor für CSS! Diese Funktion wurde schon fast vom ersten Tag an angefordert. Es ist fantastisch, sie in allen Browsern zu haben. Daher müssen Entwickler weniger JavaScript ausführen, um diese Auswahl zu emulieren." – Thomas Steiner, Developer Relations Engineer für Chrome.
Die funktionale Pseudoklasse :has() war sehr aufregend, da sie eine Schlüsselanfrage von Entwicklern an die Plattform brachte. Damit erhalten Sie einen übergeordneten Selektor. Sie können ein Element basierend auf den darin enthaltenen Elementen auswählen. Sie kann jedoch für viel mehr verwendet werden. Wie im Abschnitt CSS-Code beschrieben, können Sie viel mehr als ein übergeordnetes Element auswählen. Auch seitliche Auswahlen sind möglich.
:has()-Demo: DockUna Kravets, Developer Relations Engineer im Chrome-Team, erklärt:
„Der :has()-Selektor ist eine der flexibelsten und leistungsfähigsten neuen CSS-Funktionen. Damit können Sie ein beliebiges übergeordnetes Element basierend auf Vorhandensein, Status oder sogar der Anzahl untergeordneter Elemente gestalten. Ein weiterer Vorteil ist jedoch, dass Sie ihn mit anderen Kombinatoren kombinieren können, um gleichgeordnete Stilelemente zu gestalten. Dadurch erhalten Sie ein ganz neues Maß an Stilsteuerung für Ihre Benutzeroberfläche. Es ist so eine flexible Funktion! Ich habe bereits eine Menge cooler Demos gesehen, bei denen man nicht mehr auf zusätzliche Skripte angewiesen ist, wenn man die Vorteile von :has() nutzt.“
Wie Philip Jägenstedt, ein Softwareentwickler für Chrome, erinnerte mich, war :has() die wichtigste Funktion, mit der Entwickler aufgrund mangelnder Unterstützung auf die Umfrage zu „State of CSS“ im Jahr 2023 hatten.
Wir sind also nicht die einzigen Leute, die sich über diese Möglichkeit freuen.
Sie können sich Una und Adam Argyle anhören, im CSS Podcast über has() sprechen und in diesen Beiträgen aus der Web-Community mehr über :has() erfahren.
- CSS-
:has()-Selektoren anhand von Beispielen kennenlernen - Scrollen mit
:has()sperren - Ein Anwendungsfall für CSS
:has()
Containerabfragen
2023 war ein tolles Jahr für Dinge, die zuvor als unmöglich erachtet wurden. Zusätzlich zu :has() erhält die Webplattform endlich browserübergreifende Unterstützung für Containerabfragen. Sie stellen seit 2011 Container- oder Elementabfragen bereit, nur ein Jahr nach der Einführung des Konzepts des responsiven Webdesigns. Jetzt ist sie da und in allen gängigen Browser-Engines verfügbar.
Una und Adam haben im CSS Podcast über Containerabfragen gesprochen. Una hat sie in einer Folge von „Designing the Browser“ vorgestellt. Die Community hat auch viele Tipps und Ideen geteilt.
Subgrid
Am liebsten wurde Subgrid in den Interop 2023 aufgenommen. Sie können damit ein Raster für ein übergeordnetes Element definieren und dann die Spurgrößen verwenden, die für dieses übergeordnete Element definiert sind, auf Rastern, die innerhalb dieses Hauptrasters verschachtelt sind. Dank der Arbeit der Webplattform-Entwickler von Microsoft Edge wurde Subgrid 2023 in allen großen Browser-Engines verfügbar, um Chrome zu verbessern und diese spannende Funktion für alle verfügbar zu machen.
Adriana Jara, Chrome Developer Relations Engineer,
„Ich bin furchtbar in Sachen Visualisierungen, Layouts, ein einheitliches Aussehen und die Anpassung an Bildschirme. Mit Raster und Subgrid lässt sich jedoch irgendwie ein Design erstellen, das für mehrere Bildschirmgrößen funktioniert und sich automatisch an den Inhalt anpasst! Es ist mein Favorit, weil es ein grundlegendes Anliegen abdeckt, um eine Website zu erstellen, die Nutzern eine angenehme Erfahrung ohne viel Fachwissen bietet.“
In einem Artikel über 12 Days of Web habe ich einige Anwendungsfälle für Subgrid zusammengefasst. Wie bei den anderen Funktionen in diesem Beitrag können Sie sich alles dazu in einer CSS-Podcastfolge anhören. Es gibt auch so viele Ressourcen im Web.
- Informationen zum CSS-Subraster
- Video: Einfache und einheitlichere Layouts mit Subgrid
- Inhalte mit CSS-Raster und Subgrid anordnen
Farbräume und Funktionen
Es war keine Überraschung, dass mir der Chrome-CSS-Entwickler Adam Argyle sagte, dass Farbräume und Funktionen seine Lieblingsfunktion sind,
„Auf Wiedersehen, Mathematik für den unangenehmen HSL-Kanalwert; Hello-Just-in-Time-Einzeiler für Farbvarianten. Die neuen Farbräume und -funktionen lösen nicht nur Probleme mit dem Farbworkflow, sie ermöglichen den Zugriff auf erweiterte, zuverlässigere und lebendigere Farben und Farbverläufe. Einige Funktionen freischalten, die man nicht lieben sollte – und gleichzeitig das Leben einfacher machen. Mit dem Interop-Aufmerksamwerden gewürzt, dann ist dieses Gericht ein farbenprächtiges leckeres Gericht.“
Adam hat einige hilfreiche Inhalte erstellt, um diese neuen Funktionen zu verstehen, z. B. den High Definition CSS-Farbleitfaden und gradient.style. Außerdem hat er über Farbfunktionen im CSS-Podcast gesprochen.
Es ist aufregend, diese Funktionen in allen gängigen Browser-Engines verfügbar zu haben. Weitere Informationen findest du in diesen tollen Artikeln.
Wir freuen uns auf den Interop 2024
Sobald Features interoperabel sind, werden sie Teil der neu verfügbaren Baseline. Spannend ist die Zahl neuer Features, die 2023 in diese Gruppe aufgenommen wurden – nicht zuletzt aufgrund der Arbeit aller Beteiligten im Interop 2023. Die ausgewählten Schwerpunkte für 2024 werden bald bekannt gegeben. Wir sind alle gespannt, wie sich die Webplattform in diesem Jahr noch weiter verbessern kann.