Willkommen bei der zweiten Ausgabe von Chrome Dev Insider. Hier informieren wir Sie über Neuigkeiten in der Community und bei Chrome. In dieser neuen Folge von Insider-Geschichten erfährst du, wie wir unsere Arbeit angehen, und wir werfen einen kurzen Blick auf einige der wichtigsten Updates, die du dir ansehen solltest.
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, mit Schwerpunkt auf offenen 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 Neuigkeiten vorgestellt, wie wir Entwickler dabei unterstützen, das Web schneller und leistungsfähiger zu machen und gleichzeitig die Daten der Nutzer zu schützen.
Eines der Dinge, die uns aufgefallen sind (und wir freuen uns, dass die Community das bemerkt hat), ist die enorme Arbeit, die das Team leistet, um mehr CSS- und UI-Funktionen im Web zu unterstützen. In dieser Ausgabe von Chrome Dev Insider werfen wir einen Blick hinter die Kulissen und erfahren, wer hinter dieser Arbeit steht, wie wir CSS- und UI-Entwickler unterstützen und was uns in Zukunft erwartet. Deshalb freue ich mich sehr, diese Ausgabe des Insider zu moderieren.
In den Nachrichten
In der ersten Ausgabe von Chrome Dev Insider haben wir einige Neuigkeiten zu den Initiativen Compat 2021 und Interop 2022 geteilt. Dabei arbeiten Browseranbieter und andere Akteure des Web-Ökosystems zusammen, um mehr Funktionen für das Web zu entwickeln, die von allen Browsern unterstützt werden. Der Schwerpunkt der Initiative liegt auf CSS, da die Browserinkompatibilität eine der größten Herausforderungen für CSS-Entwickler ist.
Das ist für die meisten vielleicht keine Neuigkeit, aber es ist spannend zu sehen, welche Fortschritte wir bereits in allen Browsern erzielt haben.
Anfang des letzten Monats wurde eine umfangreiche Safari-Version angekündigt: Safari 16.0 Beta mit spannenden Funktionen wie Containerabfragen, Subgrids und einem Flexbox-Inspektor. Die letzten Releases von Firefox und Chrome enthalten eine Reihe interessanter Funktionen und Fehlerkorrekturen. In meiner Reihe von Beiträgen Neuerungen auf der Webplattform beschreibe ich jeden Monat die wichtigsten Neuerungen in stabilen und Beta-Browsern.
Insiderinformationen: Unterstützung für CSS- und UI-Entwickler
2022 war ein spannendes Jahr für CSS-Funktionen. Daher möchten wir Sie hinter die Kulissen der Entwicklung blicken lassen. Ich habe mich mit Una Kravets, der DevRel-Leiterin für Web-UI und DevTools, und Nicole Sullivan, unserer Product Managerin für Web-UI mit Schwerpunkt auf CSS- und HTML-APIs, über die Entwicklung von Chrome im Hinblick auf die Unterstützung von UI-Entwicklern unterhalten.
Beginnen wir mit Ihnen beiden. Können Sie uns etwas mehr über sich erzählen?
Nicole:Ich bin die Produktmanagerin für die Web-Benutzeroberfläche von Chrome. Ich konzentriere mich dabei speziell auf neue CSS- und HTML-APIs sowie auf Entwickler und Designer, die UIs erstellen. Es ist ein spannendes Gebiet mit einigen wirklich wichtigen APIs wie Containerabfragen, Scope und (hoffentlich!) vertikaler Rhythmus.
Una:Ich leite die DevRel-Teams für die Web-UI und die DevTools. Wir konzentrieren uns darauf, UI-Entwickler auf der Webplattform zu unterstützen und dafür zu sorgen, dass sie die Tools haben, 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.
Der Support von Chrome für UI-Entwickler hat in den letzten Jahren an Fahrt aufgenommen. Warum hat es Ihrer Meinung nach so lange gedauert? Was waren die größten Herausforderungen?
Una: Wir mussten einige Arbeit leisten, um zu zeigen, wie wichtig diese Arbeit war und warum sie Priorität haben sollte. Wir haben mit der MDN DNA-Umfrage 2019 begonnen, in der die Benutzeroberfläche als einer der größten Probleme auf der Plattform identifiziert wurde. Seitdem nutzen wir Daten als Leitfaden für die MDN und unsere eigenen internen Umfragen zur Zufriedenheit von Entwicklern. Das Ergebnis war, dass wir mehr Unterstützung von der Führungsebene erhalten und die Entwicklungsarbeit auf einige der am häufigsten nachgefragten Entwicklerfunktionen im UI-Bereich priorisieren konnten, die auch den Schwerpunkt von Initiativen wie Compat 2021 und Interop 2022 bilden.
Nicole: Neben der Zustimmung der Führungsebene mussten wir auch herausfinden, wie wir diese APIs den Entwicklern zugänglich machen. Als ich zu Chrome kam, habe ich das in einem Projekt namens Layered APIs (kurz LAPIs) vermasselt. LAPIs sollten Entwicklern die Möglichkeit bieten, Komponenten einfach einzufügen. 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 lassen sich fast unmöglich barrierefrei gestalten und eine virtuelle Liste ist eine der schwierigsten Komponenten, die richtig umgesetzt werden muss. Unsere Absichten waren gut, 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.
Sehen wir uns LAPIs etwas genauer an. Warum?
Nicole: Wir wussten, dass für LAPIs im Web eine Drop-in-Komponente für Entwickler erforderlich ist, die dem Erstellen nativer UIs näher kommt. Es war klar, dass das Rad neu zu erfinden, die Entwickler zurückhielt. Ich kann gar nicht zählen, wie viele Tabs ich in meiner Karriere erstellt habe. Wir haben versucht, das Problem zu lösen, indem wir JavaScript mit dem Browser ausgeliefert haben. Das war sehr schwierig. Niemand hatte zuvor JavaScript im Browser bereitgestellt und es war nicht klar, wie es mit dem C++-Code interagieren sollte, der die Rendering-Engine des Browsers antreibt. Wir haben uns das Feedback anderer Browseranbieter angehört (vielen Dank, Mozilla!) und diesen Ansatz verworfen. 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 die Barrierefreiheit auf eine Weise einbinden, die mit JavaScript nicht so einfach möglich wäre. Ich bin sehr gespannt, wie es weitergeht. Wir arbeiten daran, Auswahlmenüs, Pop-ups, Kurzinfos, Navigationselemente, Akkordeons, Tabs, Karussells und Ein-/Aus-Schaltflächen zu unterstützen, die wichtige UI-Designmuster sind.
Wir haben also viel gelernt. Und ich weiß, dass es in diesem Bereich noch andere Initiativen gab, z. B. CSS Houdini. Was ist die Geschichte?
Una: Ja, CSS Houdini ist ein weiterer Ort, an dem 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 erhalten. Uns wurde klar, dass die Implementierung von Low-Level-APIs nicht unbedingt die Komplexität für Entwickler reduzierte. Stattdessen hat sich das Team auf Lösungen und Anforderungen auf höherer Ebene konzentriert, um browserübergreifende Unterstützung und die Landingpages zu erhalten, die erforderlich sind, um im Ökosystem etwas zu bewirken. Aktuelle Informationen zu den Fortschritten findest du unter https://ishoudinireadyyet.com.
Apropos browserübergreifender Support: Initiativen wie Interop 2022 und Open UI scheinen für die Community erhebliche positive Ergebnisse zu erzielen. Was sagen Entwickler dazu?
Una:Eine der größten Herausforderungen, die wir von Entwicklern hören, ist es, „das Design für alle Browser einheitlich zu gestalten“. Wir haben uns mit anderen Browseranbietern zusammengetan, um einige der am häufigsten nachgefragten Entwicklerfunktionen zu priorisieren und einzuführen. Das Feedback der Community war überwältigend positiv. Außerdem haben wir durch eine umfangreiche Neuarchitektur namens RenderingNG die Leistung einiger dieser Funktionen deutlich verbessert. Entwickler freuen sich, dass an diesen lang ersehnten Funktionen, die sie seit Jahren fordern, endlich gearbeitet wird und sie plattformübergreifend verfügbar sein werden.
Nicole:Die Vorfreude in der Community ist spürbar. Sie finden sie auf Twitter. :)
Die Zusammenarbeit mit dem Ökosystem hat sich als entscheidend für unseren Erfolg erwiesen, um Entwicklern das Leben zu erleichtern. Ich weiß, dass Ihr Team dort viel Arbeit geleistet hat. Können Sie mir ein paar Details dazu nennen?
Nicole:Erstens bin ich immer wieder beeindruckt von den Projekten, die Entwickler im Web erstellen. Von der kleinsten Bibliothek bis hin zu vollständigen Frameworks entwickeln Entwickler erstaunliche Dinge. Es ist eine fantastische Community von Makern. Und Chrome wird in Zukunft noch stärker mit diesen Projekten verbunden sein.
Vor einigen Jahren haben wir beispielsweise damit begonnen, JavaScript-Frameworks wie React und Angular zu verwenden. Und Metaframeworks 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 das Leben von Entwicklern erleichtern. Ich habe gerade Cassie Evans von GreenSock auf der Smashing Conference gehört und bin jetzt richtig heiß darauf, mit Leuten aus der Animationsbranche zusammenzuarbeiten.
Wo sehen wir also die größten Chancen für das Web-UI-Ökosystem?
Una:Ich glaube, dass wir in Bezug auf große Chancen erst am Anfang dessen stehen, was mit personalisierten Webinhalten möglich ist. Neue APIs wie Containerabfragen und die CSS-Medienfunktionen für Nutzereinstellungen verändern die Art und Weise, wie Entwickler responsives Design betrachten. Ich freue mich auch über die Möglichkeiten für kollaboratives Design, die es Entwicklern und Designern ermöglichen, gemeinsam mit den Nutzern ihrer Websites zu arbeiten.
Und Nicole, was steht als Nächstes auf der Roadmap Ihres Teams?
Nicole: Nicht alle explorativen Datenanalysen führen zu einem Produkt, aber es gibt viele Dinge, auf die ich mich im Moment freue:
Una hat bereits das erste erwähnt: Wir ermöglichen ein responsives, komponentenbasiertes Design. Es enthält Tools zum Entwerfen von Farbsystemen, damit Designer auf Nutzerpräferenzen wie den dunklen Modus reagieren können. Im OKLCH-Farbraum bleibt die Helligkeit beispielsweise bei allen Farbtönen gleich. Designer können von der Auswahl von Farben zur Gestaltung von Beziehungen zwischen Farben übergehen, ohne am Ende mit trüb wirkenden Paletten zu enden.
Außerdem arbeiten wir an einigen der am häufigsten nachgefragten APIs, z. B. Containerabfragen, Abfolgeebenen, übergeordneten Auswahlen (:has), stilen mit Gültigkeitsbereich und Verschachtelung. Entwickler benötigen diese, um flexible Designsysteme mit wiederverwendbaren Komponenten zu erstellen.
Scroll-Animationen sind ein weiterer interessanter Bereich. Mir gefällt die Demo von Steve Gardner. Er hat ein 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 im Hinblick auf Barrierefreiheit. Deshalb führen wir derzeit Nutzertests für die Barrierefreiheit der Funktion durch.
Was mich persönlich am meisten begeistert, sind die integrierten Steuerelemente für die Web-Benutzeroberfläche. Entwickler erstellen immer wieder dasselbe Tab-Set. Ich denke, der Browser kann dabei helfen. Bei Open UI arbeiten wir an Komponenten wie Auswahlmenü, Pop-up, Kurzinfo, Tabs, Navigation, Akkordeon und Ein-/Aus-Schaltfläche. Wir prüfen, wie sich die Barrierefreiheit in diese Browser-Grundelemente einbinden lässt, damit das Web im Laufe der Zeit standardmäßig barrierefrei wird. Entwickler können sich dann auf die komplexeren und nuancierteren Probleme konzentrieren, während die Grundlagen wie das Öffnen von Tabs vom Browser unterstützt werden. Das würde wahrscheinlich einen eigenen Beitrag erfordern, deshalb höre ich hier erst einmal auf.
Außerdem investieren wir weiter in die Interoperabilität zwischen Browsern. Es war toll, mit den Teams von WebKit und Gecko zusammenzuarbeiten, um die Entwicklerfreundlichkeit zu verbessern. Viele Entwickler haben uns mitgeteilt, dass sie sich diese Funktion wünschen.
Und falls Sie es noch nicht gesehen haben: Die Shared Element Transitions API des Seamless Web-Teams wird die Art und Weise verändern, wie Webdesign gestaltet wird. All diese subtilen Übergänge, mit denen Designer ihre Designs im physischen Raum orientieren können, werden nicht nur möglich, sondern auch einfach sein. Jake Archibald hat eine gute Demo.
Wenn die Standards gut laufen, werden wir uns dieses Jahr vielleicht auch den vertikalen Rhythmus ansehen. Wir können auf LayoutNG aufbauen, was viele Funktionen ermöglicht.
Vielen Dank. Ich bin sicher, dass die gesamte Community wie wir auf die neuen Verbesserungen und Funktionen der Web-UI gespannt ist. Es gibt noch viel zu lernen. Wo sollte man also anfangen?
Una:In der I/O-Sitzung Neuerungen für die Webplattform werden die Highlights vieler Funktionen vorgestellt, die in diesem Jahr eingeführt werden. Adam Argyle hat auch einen tollen Artikel zu allen neuen und anstehenden Google Shopping-Landingpages verfasst. Ich würde mich vorerst auf stabile Releases konzentrieren und mir einfach bewusst sein, welche anderen Aufgaben anstehen. Die tolle Reihe Neu auf der Webplattform ist dafür sehr empfehlenswert. Wenn Sie den web.dev-Newsletter abonnieren, erhalten Sie diese Inhalte auch in Ihren Posteingang. Wenn Sie sich engagieren und bei all diesen Dingen mithelfen möchten, ist die Teilnahme an Open UI eine der besten Möglichkeiten, diese Arbeit zu unterstützen.
Wichtige anstehende Updates
Wie gewohnt möchten wir Sie über eine bevorstehende Änderung informieren, die Sie bei der Entwicklung Ihrer Websites berücksichtigen sollten.
Maximalalter für Cookies auf 400 Tage begrenzen
- Änderung:Wenn Cookies mit einem expliziten
Expires/Max-Age-Attribut festgelegt werden, ist der Wert jetzt auf maximal 400 Tage in der Zukunft begrenzt. Bisher gab es keine Begrenzung und Cookies konnten mehrere Jahrtausende in der Zukunft ablaufen. Mit dieser Einschränkung möchten wir ein Gleichgewicht zwischen gängigen Nutzungsmustern und dem Schutz der Privatsphäre der Nutzer finden. Bei jeder Website, die häufiger als alle 400 Tage besucht wird, können Cookies aktualisiert werden, um die Dienstkontinuität zu gewährleisten. Nutzer können sich darauf verlassen, dass Cookies nicht jahrtausendelang ungenutzt in ihrem Browser verbleiben. - Geschätzter Zeitplan:Verfügbar in Chrome 104 (stabile Version vom 2. August 2022).
- CTA für Entwickler:Entwickler müssen Cookies möglicherweise häufiger als zuvor proaktiv aktualisieren, wenn Nutzer ihre Websites besuchen. Andernfalls werden Nutzer möglicherweise 400 Tage nach dem Setzen des Cookies abgemeldet.
Ich hoffe, Ihnen hat diese Ausgabe des Chrome Dev Insider gefallen. Falls Sie ihn verpasst haben, finden Sie ihn hier noch einmal. Wir freuen uns, dir im nächsten Quartal weitere Neuigkeiten präsentieren zu können.
Bis dahin: Teilen Sie uns mit, was Sie von dieser Ausgabe des Chrome Dev Insider halten und wie wir sie verbessern können.
Wie hat Ihnen diese Ausgabe von The Chrome Dev Insider gefallen? Feedback geben