Die Interop 2023 ist Ende des letzten Jahres zu Ende. Diese Bemühungen des Browsers Anbieter und andere Parteien möchten ein besser interoperables Web mit weniger Unterschiede zwischen Browsern und Sie werden verärgert. In diesem Beitrag werden die Endergebnisse und einige der Lieblingsfunktionen des Chrome-Teams.
Die Endergebnisse
<ph type="x-smartling-placeholder">
Es ist toll, so viel Grün zu sehen. Vergleichen Sie das mit den Werten Anfang 2023. Browser einen enormen Anstieg des Optimierungsfaktors verzeichnen.
Worüber freuen wir uns?
Eine vollständige Liste der Schwerpunkte für 2023 finden Sie auf dem Interop 2023-Dashboard. Einige Schwerpunkte, z. B. :has(),
Containerabfragen und das Attribut inert decken ein ganzes Element ab. Andere,
zum Beispiel bei der Arbeit an der Flexbox
und mit einigen kleinen Testfehlern in einem
vorhandenen browserübergreifenden Funktion nutzen können.
:has()
„Endlich ein übergeordneter Selektor für CSS! Dies wurde fast vom ersten Tag an gefordert. Schließlich ist es fantastisch, dass es in allen Browsern verfügbar ist. Es bedeutet, dass Entwickler weniger JavaScript ausführen müssen, um diesen Selektor zu emulieren.“ – Thomas Steiner, Developer Relations Engineer bei Chrome
Die funktionale Pseudoklasse war begeistert.
:has(), da sie eine Schlüsselanfrage von Entwicklern an die Plattform gesendet hat. Es
gibt es einen übergeordneten Selektor. Sie können ein Element basierend auf Dingen auswählen,
darin enthalten sind. Es kann jedoch noch viel mehr verwendet werden. Wie unter Mit CSS umschlossen erläutert, können Sie
und sogar eine seitliche Auswahl treffen.
: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 jedes übergeordnete Element basierend auf dem Vorhandensein, dem Status oder der Anzahl untergeordneter Elemente gestalten. Aber was noch viel mehr ist, ist, dass Sie es mit anderen Kombinatoren kombinieren können, um Geschwister zu gestalten und so eine völlig neue Art der Stilkontrolle über Ihre Benutzeroberfläche zu erhalten. Es ist eine so flexible Funktion! Ich habe bereits eine Menge cooler Demos gesehen, die die Notwendigkeit von zusätzlichen Skripts reduzieren, wenn sie die Möglichkeiten von :has() nutzen.“
Philip Jägenstedt, ein Softwareentwickler für Chrome, erinnerte mich daran, dass :has()
die Hauptfunktion, mit der Entwickler Probleme hatten, weil sie auf Nachfrage nicht unterstützt wurden
„State of CSS Survey“ aus dem Jahr 2023 durchgeführt.
Wir sind also nicht die einzigen Personen,
die diese Funktion anbieten.
Sie können sich Una und Adam Argyle anhören, im CSS Podcast über has() sprechen und dann mehr über
:has() aus diesen Beiträgen aus der Web-Community.
- CSS-
:has()-Selektor anhand von Beispielen kennenlernen - Scrollen wird mit
:has()gesperrt - Ein Anwendungsfall für Preisvergleichsportal
:has()
Containerabfragen
2023 war ein tolles Jahr für Dinge, die einst für unmöglich galten. In
Neben :has() gewann die Webplattform endlich
browserübergreifende Unterstützung für
Containerabfragen. Sie haben Container- (oder Element-)Abfragen gestellt, seit
2011, nur ein Jahr nach der Einführung des Konzepts des responsiven Designs. Jetzt
sie ist jetzt verfügbar und in allen gängigen Browser-Engines verfügbar.
Una und Adam haben Containerabfragen im Preisvergleichsportal-Podcast besprochen. und Una stellte sie in einer Folge von Designs im Browser Die Community teilt außerdem viele Tipps und Ideen.
Unternetz
Subgrid gefällt mir am Interop 2023. Damit können Sie ein Raster auf einer übergeordneten Element und verwenden Sie dann die Track-Größen, die für dieses übergeordnete Element definiert sind, auf Raster, die in diesem Hauptraster verschachtelt sind. Dank der Arbeit von Microsoft Edge Plattformentwickler: Subgrid ist 2023 in allen großen Browser-Engines verfügbar. um die Punktzahl für Chrome zu verbessern diese spannende Funktion allen Nutzern zur Verfügung.
Chrome Developer Relations Engineer Adriana Jara hat mir erzählt, wie Grid- und Subgrid- eine tolle Benutzeroberfläche zu erstellen,
„Ich bin schrecklich mit Bildern, Layouts, einem einheitlichen Look und der Anpassung an Bildschirme. Mit dem Raster und dem Raster ist jedoch irgendwie ein Design möglich, das für mehrere Bildschirmgrößen funktioniert und sich automatisch an Inhalte anpasst! Es ist mein Favorit, weil es ein grundlegendes Bedürfnis erfüllt, eine Website zu erstellen, die den Nutzenden auch ohne jede Menge Fachwissen eine angemessene Erfahrung bietet.“
Ich habe in einem Artikel zu 12 Days of Web und auch für die anderen Funktionen einige Anwendungsfälle für Subgrid beschrieben. In diesem Beitrag können Sie sich eine Preisvergleichsportal-Podcastfolge mit allen Informationen dazu anhören. Außerdem gibt es so viele Ressourcen im Web.
- Informationen zum CSS-Subgrid
- Video: Einfache und einheitliche Layouts mit Subgrid
- Inhalte mit CSS-Raster und -Subraster präsentieren
Farbräume und Funktionen
Es war nicht überraschend, dass Adam Argyle, der CSS-Entwickler von Chrome, zu mir sagte, dass Farbräume und Funktionen war seine Lieblingsfunktion,
„Goodbye peinlich HSL channel value variable math; Hallo Einzeiler zur Just-in-Time-Farbvariante. Die neuen Farbräume und Funktionen lösen nicht nur Probleme mit dem Farbworkflow, sie bieten auch Zugriff auf erweiterte, zuverlässigere und lebendigere Farben und Farbverläufe. So kannst du einige Fähigkeiten freischalten und gleichzeitig deinen Alltag erleichtern. Mit dieser Interop-Spritze schmeckt dieses Gericht bunt.“
Adam hat einige großartige Inhalte erstellt, die Ihnen helfen, Funktionen wie den High Definition CSS Color Guide und gradient.style, und es geht um Farbfunktionen im CSS Podcast.
Diese Funktionen stehen in allen gängigen Browser-Engines zur Verfügung. Weitere Informationen findest du in diesen tollen Artikeln.
Wir freuen uns auf den Interop 2024
Sobald Funktionen interoperabel sind, werden sie Teil Baseline: Jetzt verfügbar. Es ist spannend zu sehen, wie viele neue Elemente, die im Jahr 2023 in diese Gruppe aufgenommen wurden. Dies ist zum Großteil aufgrund des die Arbeit aller am Interop 2023 Beteiligten. Das wird demnächst bekannt gegeben. Schwerpunkte für 2024 auswählen. Wir sind gespannt, die Webplattform in diesem Jahr viel besser werden kann.