Willkommen zur zweiten Ausgabe von Chrome Dev Insider. Hier informieren wir Sie über Neuigkeiten und Interessantes aus der Community und von Chrome. In dieser neuen Folge geht es darum, wie wir unsere Arbeit angehen, und wir geben einen kurzen Überblick über einige der wichtigsten Updates, die Sie beachten sollten.
Ich bin Rachel Andrew, Content Lead für web.dev und developer.chrome.com im Chrome Developer Relations-Team. Ich arbeite seit über 20 Jahren im Web und konzentriere mich dabei auf offene Webstandards und CSS. Außerdem bin ich Mitglied der CSS Working Group.
Vor zwei Monaten haben wir die Google I/O abgeschlossen. Dort haben wir einige der wichtigsten Updates dazu vorgestellt, wie wir Entwickler dabei unterstützen, das Web schneller und leistungsfähiger zu machen und gleichzeitig Nutzerdaten zu schützen.
Eine der bemerkenswertesten Neuerungen (und wir freuen uns, dass die Community das bemerkt hat) ist die enorme Menge an Arbeit, die das Team in die Unterstützung von mehr CSS- und UI-Funktionen im Web steckt. In dieser Ausgabe von Chrome Dev Insider erfahren Sie, wer hinter dieser Arbeit steckt, wie wir CSS- und UI-Entwickler unterstützen und was als Nächstes ansteht. Deshalb freue ich mich sehr, diese Ausgabe des Insiders zu moderieren.
In den Nachrichten
Im ersten Chrome Dev Insider haben wir einige Updates zu den Initiativen Compat 2021 und Interop 2022 geteilt, bei denen Browseranbieter und Akteure des Ökosystems zusammenarbeiten, um mehr Funktionen für das Web zu entwickeln, die in allen Browsern unterstützt werden. Die Initiative konzentriert sich stark auf CSS, da Browserinkompatibilität eine der größten Herausforderungen für CSS-Entwickler ist.
Das ist für die meisten zwar nichts Neues, aber es ist trotzdem schön zu sehen, welche Fortschritte wir bereits bei Browsern erzielt haben.
Anfang letzten Monats kündigte Safari eine umfangreiche Veröffentlichung an: Safari 16.0 Beta enthält spannende Funktionen wie Container Queries, subgrid und einen Flexbox-Inspector. In den letzten Versionen von Firefox und Chrome wurden einige interessante Funktionen und Fehlerkorrekturen eingeführt. In meiner New to the Web Platform-Beitragsreihe berichte ich jeden Monat über die wichtigsten Neuerungen in stabilen und Beta-Browsern.
Insider-Informationen: Unterstützung für CSS- und UI-Entwickler
2022 war ein spannendes Jahr für Preisvergleichsportal-Funktionen. Wir möchten Ihnen daher einen Blick hinter die Kulissen ermöglichen. Ich habe mich mit Una Kravets, DevRel-Leiterin für Web-UI und Devtools, und Nicole Sullivan, unserer Produktmanagerin für Web-UI mit Schwerpunkt auf CSS- und HTML-APIs, unterhalten, um über die Unterstützung von UI-Entwicklern durch Chrome zu sprechen.
Beginnen wir mit euch beiden. Erzählt uns ein bisschen mehr über euch.
Nicole:Ich bin Produktmanagerin für die Web-UI in Chrome. Ich konzentriere mich speziell auf neue CSS- und HTML-APIs und auf Entwickler und Designer, die Benutzeroberflächen erstellen. Es ist ein spannendes Feld mit einigen wirklich wichtigen APIs wie Container Queries, Scope und (hoffentlich!) vertical rhythm.
Una:Ich leite die DevRel-Teams für Web‑UI und Entwicklertools. Wir konzentrieren uns darauf, UI-Entwickler auf der Webplattform zu unterstützen und ihnen die Tools zur Verfügung zu stellen, die sie für ihren Erfolg benötigen. Dazu gehören CSS-APIs und HTML-Komponenten sowie DevTools-Funktionen, mit denen Sie aktive Änderungen und Feedback sehen können.
Die Unterstützung von Chrome für UI-Entwickler hat in den letzten Jahren zugenommen. Warum hat es Ihrer Meinung nach so lange gedauert, bis es so weit war? Was waren die größten Herausforderungen?
Una:Wir mussten zeigen, wie wichtig diese Arbeit ist und warum sie Priorität haben sollte. Wir haben 2019 mit der MDN DNA-Umfrage begonnen, in der die Benutzeroberfläche als einer der größten Schwachpunkte der Plattform identifiziert wurde. Seitdem nutzen wir Daten als Leitfaden für das MDN und unsere eigenen internen Umfragen zur Entwicklerzufriedenheit. Das Ergebnis all dessen ist, dass wir eine stärkere Unterstützung durch die Führungsebene erhalten und die Entwicklungsarbeit an einigen der am häufigsten nachgefragten Entwicklerfunktionen im UI-Bereich priorisieren konnten, die auch den Großteil der Initiativen wie Compat 2021 und Interop 2022 ausmachen.
Nicole:Neben der Zustimmung der Führungskräfte mussten wir auch den richtigen Weg finden, diese APIs für Entwickler bereitzustellen. Als ich zu Chrome kam, habe ich das in einem Projekt namens Layered APIs (kurz LAPIs) falsch gemacht. LAPIs sollen Entwicklern eine Drop-in-Komponente bieten. Ich denke immer noch, dass das ein tolles Ergebnis war, aber wir haben viele Fehler gemacht. Wir haben uns zuerst auf Toast-Benachrichtigungen und eine virtuelle Liste konzentriert. Toasts sind kaum barrierefrei zu gestalten und virtuelle Listen gehören zu den Komponenten, die am schwierigsten zu implementieren sind. Wir hatten gute Absichten, aber das Projekt hat Entwicklern nicht geholfen. Deshalb haben wir es eingestellt. Es ist schwierig, auf die harte Tour zu lernen, aber jeder Fehler trägt zur Renaissance von CSS und HTML bei, die wir gerade erleben.
Sehen wir uns die LAPIs einmal etwas genauer an. Warum?
Nicole:Bei LAPIs wussten wir, dass wir für das Web eine Drop-in-Komponente für Entwickler brauchten, die sich näher an der Entwicklung nativer Benutzeroberflächen orientiert. Es war klar, dass die Entwickler durch die Notwendigkeit, das Rad immer wieder neu zu erfinden, ausgebremst wurden. Ich kann die Anzahl der Tabs, die ich in meiner Karriere erstellt habe, nicht zählen. Wir haben versucht, das Problem zu lösen, indem wir JavaScript mit dem Browser ausgeliefert haben, was sehr schwierig war. Niemand hatte zuvor JavaScript im Browser ausgeliefert und es war unklar, wie es mit dem C++-Code interagieren sollte, der die Rendering-Engine des Browsers antreibt. Wir haben auf andere Browseranbieter gehört (vielen Dank, Mozilla!) und sind von diesem Ansatz abgerückt. So konnten wir mit Open UI eine viel bessere Lösung finden. Durch die Verwendung von HTML und CSS erhalten wir flexible, deklarative Lösungen. Da es deklarativ ist, können wir Bedienungshilfen auf eine Weise einbauen, die mit JavaScript nicht so einfach möglich gewesen wäre. Ich bin wirklich gespannt, wie es weitergeht. Wir arbeiten daran, die wichtigen UI-Designmuster „selectmenu“, „popup“, „tooltip“, „nav“, „accordion“, „tabs“, „carousel“ und „toggle“ zu unterstützen.
Wir haben also viel gelernt. Ich weiß, dass es in diesem Bereich auch andere Initiativen gab, z. B. CSS Houdini. Was ist passiert?
Una:Ja, CSS Houdini ist ein weiteres Beispiel dafür, dass wir von der Community gelernt haben. Es gibt viele nützliche Houdini-Funktionen, aber viele waren zu niedrig, um eine breitere Akzeptanz und Unterstützung zu erreichen. Wir haben festgestellt, dass die Implementierung von Low-Level-APIs nicht unbedingt zu einer geringeren Reibung für Entwickler führt. Stattdessen hat die Konzentration auf übergeordnete Lösungen und Anforderungen dazu beigetragen, browserübergreifende Unterstützung und die notwendigen Landungen zu erreichen, um das Ökosystem voranzubringen. Den aktuellen Fortschritt können Sie unter https://ishoudinireadyyet.com/ verfolgen.
Apropos browserübergreifende Unterstützung: Initiativen wie Interop 2022 und Open UI scheinen der Community erhebliche positive Ergebnisse zu liefern. Was hören Sie von Entwicklern?
Una:Eine der größten Herausforderungen, die uns Entwickler nennen, ist, dass das Design in allen Browsern gleich aussehen soll. Wir haben dieses Problem angegangen, indem wir mit anderen Browseranbietern zusammengearbeitet haben, um einige der am häufigsten gewünschten Entwicklerfunktionen zu priorisieren und zu implementieren. Das Feedback, das wir von der Community erhalten haben, war überwiegend positiv. Außerdem konnten wir durch eine umfangreiche Umgestaltung namens RenderingNG einige dieser Funktionen viel leistungsfähiger umsetzen. Entwickler freuen sich, dass diese lang erwarteten Funktionen, nach denen sie seit Jahren gefragt haben, endlich in Arbeit sind und browserübergreifend eingeführt werden.
Nicole:Die Begeisterung in der Community ist spürbar. Sie können es sich auf Twitter ansehen. :)
Die Zusammenarbeit mit dem Ökosystem hat sich als entscheidend für jeden Erfolg erwiesen, den wir bei der Vereinfachung der Arbeit von Entwicklern erzielt haben. Ich weiß, dass Ihr Team dort viel Arbeit geleistet hat. Möchten Sie uns mehr dazu erzählen?
Nicole:Zuerst einmal bin ich immer wieder beeindruckt von den Projekten, die Entwickler im Web erstellen. Von der kleinsten Bibliothek bis hin zu umfassenden Frameworks – Entwickler erstellen beeindruckende Dinge. Es ist eine fantastische Community von Machern. Chrome unternimmt eine Reihe von Schritten, um besser mit diesen Projekten verbunden zu sein.
Vor einigen Jahren haben wir beispielsweise begonnen, mit JavaScript-Frameworks wie React und Angular zu arbeiten. Und Meta-Frameworks wie Next, Nuxt und Gatsby. Letztes Jahr haben wir damit begonnen, dasselbe mit UI-Tools und ‑Frameworks wie Sass, Bootstrap und Material zu tun. Ich hoffe, dass wir im kommenden Jahr mit GreenSock und anderen Tools zusammenarbeiten können, die Entwicklern das Leben erleichtern. Ich habe gerade einen Vortrag von Cassie Evans von GreenSock auf der Smashing Conference gesehen und bin jetzt total begeistert von der Zusammenarbeit mit Leuten aus der Animationsbranche.
Wo sehen wir also die größten Chancen für das Web-UI-Ökosystem?
Una:Was die großen Möglichkeiten angeht, haben wir meiner Meinung nach erst einen kleinen Teil dessen erreicht, was für anpassbare Weboberflächen möglich ist. Neue APIs wie Container-Abfragen und die CSS-Media-Funktionen für Nutzereinstellungen definieren die Art und Weise, wie Entwickler responsives Design betrachten, neu. Ich freue mich auch über die Möglichkeiten zur Zusammenarbeit, die es Entwicklern und Designern ermöglichen, mit den Nutzern ihrer Websites zusammenzuarbeiten.
Nicole, was steht als Nächstes auf der Roadmap für dein Team?
Nicole:Nicht alle Ideen führen zu einem Produkt, das auf den Markt kommt. Aber es gibt viele Dinge, die mich im Moment begeistern:
Una hat den ersten Punkt bereits angesprochen: Wir ermöglichen ein responsives, komponentenbasiertes Design. Es enthält Tools zum Entwerfen von Farbsystemen, damit Designer auf Nutzerpräferenzen wie den Dark Mode reagieren können. Im OKLCH-Farbraum bleibt die Helligkeit beispielsweise über alle Farbtöne hinweg konstant. Designer können von der Auswahl von Farben zum Entwerfen von Beziehungen zwischen Farben übergehen, ohne dass die Paletten am Ende trüb aussehen.
Wir arbeiten auch an einigen der am häufigsten nachgefragten APIs, z. B. Container-Abfragen, Kaskadenebenen, übergeordneter Selektor (:has), bereichsbezogene Stile und Verschachtelung. Entwickler benötigen sie, um flexible Designsysteme mit wiederverwendbaren Komponenten zu erstellen.
Auch das Scrollen verknüpfter Animationen ist ein interessantes Feld. Ich mag das Demo von Steve Gardner sehr. Er hat butterweiches Scrollen und coole Flugzeuganimationen, die beim Scrollen ausgelöst werden. Sie sind zwar unterhaltsam, aber es kann schwierig sein, sie richtig zu gestalten, insbesondere wenn man die Barrierefreiheit im Blick hat. Wir führen derzeit Nutzertests zur Barrierefreiheit für die Funktion durch.
Besonders freue ich mich auf die integrierten Steuerelemente für die Web-Benutzeroberfläche. Entwickler erstellen immer wieder dieselben Tabsets. Ich denke, der Browser kann helfen. Bei Open UI arbeiten wir an Komponenten wie „selectmenu“, „popup“, „tooltip“, „tabs“, „nav“, „accordion“ und „toggle“. Wir untersuchen, wie wir Barrierefreiheit in diese Browser-Grundlagen integrieren können, damit das Web im Laufe der Zeit standardmäßig barrierefrei wird. Entwickler können sich dann auf die komplexeren und differenzierteren Probleme konzentrieren, während die Grundlagen, z. B. wie Tabs funktionieren, vom Browser unterstützt werden können. Das ist wahrscheinlich einen eigenen Beitrag wert, deshalb höre ich jetzt auf.
Außerdem werden wir weiterhin in die Interoperabilität zwischen Browsern investieren. Die Zusammenarbeit mit den Teams von WebKit und Gecko war sehr angenehm und hat dazu beigetragen, die Entwicklererfahrung zu vereinheitlichen. Viele Entwickler haben sich diese Funktion gewünscht.
Und wenn Sie sie noch nicht ausprobiert haben: Die API für Übergänge mit gemeinsamen Elementen des Seamless Web-Teams wird die Art und Weise verändern, wie für das Web entwickelt wird. All diese subtilen Übergänge, die es Designern ermöglichen, ihre Designs im physischen Raum zu verorten, werden nicht nur möglich, sondern auch einfach sein. Jake Archibald hat eine tolle Demo erstellt.
Wenn alles gut läuft, werden wir uns dieses Jahr vielleicht sogar den vertikalen Rhythmus ansehen. Wir können auf LayoutNG aufbauen, was viele Funktionen ermöglicht.
Vielen Dank. Wir sind sicher, dass sich die gesamte Community, wie wir, über die erneuerte Geschwindigkeit der Verbesserungen und Funktionen freut, die in der Web-UI eingeführt werden. Es gibt noch viel zu lernen. Wo sollte man deiner Meinung nach anfangen?
Una:In unserer I/O-Session What's new for the web platform (Neues für die Webplattform) werden die Highlights vieler Funktionen behandelt, die dieses Jahr eingeführt werden. Adam Argyle hat außerdem einen tollen Artikel zu allen neuen und bevorstehenden CSS-Landing-Pages geschrieben. Ich würde mich jetzt erst einmal auf stabile Releases konzentrieren und die anderen Arbeiten im Blick behalten. Deine tolle Reihe Neu auf der Webplattform ist dafür genau richtig. Wenn Sie den web.dev-Newsletter abonnieren, erhalten Sie diese Inhalte auch in Ihrem Posteingang. Entwickler, die sich einbringen und bei all dem helfen möchten, können Open UI beitreten.
Wichtige anstehende Änderungen
Wir möchten Sie wie gewohnt über eine bevorstehende Änderung informieren, die Sie bei der Entwicklung Ihrer Weboberflächen berücksichtigen sollten.
„max-age“-Attribut für Cookies auf 400 Tage begrenzen
- Die Änderung:Wenn Cookies mit einem expliziten
Expires/Max-Age-Attribut gesetzt werden, wird der Wert jetzt auf maximal 400 Tage in der Zukunft begrenzt. Bisher gab es kein Limit und Cookies konnten noch mehrere Jahrtausende gültig sein. Ziel dieses Limits ist es, ein Gleichgewicht zwischen gängigen Nutzungsmustern und dem Schutz der Privatsphäre der Nutzer zu schaffen. Bei Websites, die häufiger als alle 400 Tage besucht werden, können Cookies aktualisiert werden, um die Kontinuität der Dienste zu gewährleisten. Nutzer können sich darauf verlassen, dass Cookies nicht über Jahrtausende hinweg in ihrem Browser verbleiben, wenn sie nicht verwendet werden. - Voraussichtlicher Zeitplan:Die Funktion wird in Chrome 104 eingeführt (stabil am 2. August 2022).
- Entwickler-CTA:Entwickler müssen Cookies möglicherweise häufiger als bisher aktualisieren, wenn Nutzer ihre Websites besuchen. Andernfalls werden Nutzer möglicherweise 400 Tage nach dem erstmaligen Festlegen des Cookies abgemeldet.
Ich hoffe, Ihnen hat diese Ausgabe des Chrome Dev Insider gefallen. Falls Sie ihn verpasst haben, finden Sie ihn hier. Wir freuen uns darauf, Ihnen im nächsten Quartal mehr zu berichten.
Bis dahin freuen wir uns auf Ihr Feedback zu dieser Ausgabe des Chrome Dev Insider und darauf, was wir verbessern können.
Wie hat dir diese Ausgabe von „The Chrome Dev Insider“ gefallen? Feedback geben