Willkommen bei der zweiten Ausgabe von Chrome Dev Insider. Hier erfahren Sie, was es Neues in der Community und hier bei Chrome gibt. Dies ist eine neue Folge mit Insider-Geschichten darüber, wie wir unsere Arbeit angehen. Außerdem erhältst du einen kurzen Überblick über einige der wichtigsten Neuigkeiten, die du beachten solltest.
Ich bin Rachel Andrew, Content Lead für web.dev und developer.chrome.com im Chrome Developer Relations-Team. Ich arbeite seit über zwanzig Jahren im Web mit dem Schwerpunkt auf offenen Webstandards und Preisvergleichsportalen und bin Mitglied der Arbeitsgruppe für Preisvergleichsportale.
Vor zwei Monaten haben wir die Google I/O beendet. Dort haben wir einige der wichtigsten Updates darüber geteilt, wie wir Entwickler dabei unterstützen, das Web schneller und leistungsfähiger zu machen und gleichzeitig Nutzerdaten zu schützen.
Besonders auffällig ist, dass das Team derzeit viel Arbeit zur Unterstützung weiterer CSS- und UI-Funktionen im Web leistet – und wir freuen uns, dass die Community darauf aufmerksam geworden ist. In dieser Ausgabe von Chrome Dev Insider erfahren Sie, wer hinter dieser Arbeit steckt, wie wir CSS- und UI-Entwickler unterstützen und was die Zukunft bringt. Deshalb freue ich mich sehr, diese Ausgabe von Insider zu veranstalten.
In den Nachrichten
Im ersten Chrome Dev Insider haben wir einige Updates zu Initiativen von Compat 2021 und Interop 2022 veröffentlicht, bei denen Browseranbieter und Akteure der Plattform zusammenarbeiten, um weitere Webfunktionen bereitzustellen, die in allen Browsern unterstützt werden. Bei der Initiative liegt der Schwerpunkt auf CSS, da Browserinkompatibilität eine der größten Herausforderungen für CSS-Entwickler ist.
Auch wenn dies für die meisten Nutzer nichts Neues ist, sind wir aufregend, die Fortschritte zu sehen, die wir bei den Browsern gemacht haben.
Anfang letzten Monats haben wir für Safari eine Bumper-Version mit der Betaversion von Safari 16.0 angekündigt, die spannende Funktionen wie Containerabfragen, Subgrid und einen Flexbox-Inspector enthält. Die neuesten Versionen von Firefox und Chrome beinhalten eine Reihe interessanter Funktionen und Fehlerkorrekturen. In meiner Reihe neuer Webplattformen erläutere ich jeden Monat die wesentlichen Aspekte von stabilen und Beta-Browsern.
Insiderwissen: CSS- und UI-Entwickler unterstützen
2022 wird ein aufregendes Jahr für CSS-Funktionen. Wir dachten daher, dass es eine gute Gelegenheit ist, einen Blick hinter die Kulissen zu werfen. Ich habe mich mit Una Kravets, DevRel Lead for Web UI and Devtools, und Nicole Sullivan, unserem Product Manager für Web UI, mit dem Schwerpunkt auf CSS und HTML APIs unterhalten, um über den Weg von Chrome zur Unterstützung von UI-Entwicklern zu sprechen.
Beginnen wir mit euch beiden. Erzähl uns ein bisschen mehr über dich.
Nicole:Ich bin Produktmanager 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 werden derzeit einige wirklich wichtige APIs wie Containerabfragen, Umfang und (hoffentlich!) vertikaler Rhythmus veröffentlicht.
Una:Ich leite das DevRel-Team für Web-UI und DevTools. Wir konzentrieren uns darauf, UI-Engineers auf der Webplattform zu unterstützen und sicherzustellen, dass sie über die Tools verfügen, die sie für ihren Erfolg benötigen. Dazu gehören CSS APIs und HTML-Komponenten sowie Entwicklertools, mit denen aktive Änderungen und Feedback angezeigt werden können.
Der Support für UI-Entwickler in Chrome hat in den letzten Jahren stark zugenommen. Warum hat es deiner Meinung nach so lange gedauert, bis hierher zu kommen? Was waren die größten Herausforderungen?
Una:Wir mussten einige Schritte ausführen, um zu zeigen, wie wichtig diese Arbeit war und warum sie Priorität haben sollte. Wir begannen 2019 mit der MDN DNA-Umfrage, bei der wir die Benutzeroberfläche als einige der größten Probleme auf der Plattform identifizierten. Seitdem nutzen wir Daten als Leitfaden im MDN und in unseren eigenen internen Umfragen zur Entwicklerzufriedenheit. Dank all dieser Maßnahmen konnten wir die Unterstützung der Führungskräfte gewinnen und die Entwicklung einiger der am häufigsten nachgefragten Entwicklerfunktionen im UI-Bereich priorisieren, die auch den Großteil des Schwerpunkts für Initiativen wie Compat 2021 und Interop 2022 bilden.
Nicole:Wir mussten nicht nur die Führungskräfte unterstützen, sondern auch den richtigen Weg finden, um diese APIs den Entwicklern zur Verfügung zu stellen. Als ich Chrome das erste Mal verwendet habe, habe ich das in einem Projekt namens Layered APIs (oder kurz LAPIs) durcheinander gebracht. LAPIs zielt darauf ab, Entwicklern eine einfache Komponente zu ermöglichen. Ich bin immer noch der Meinung, dass das ein tolles Ergebnis war, aber wir haben viele Fehler gemacht! Wir haben uns zuerst auf Toast Notifications und eine Virtual List konzentriert. Toasts sind fast unmöglich zugänglich und eine virtuelle Liste ist eine der am schwierigsten zu verstehenden Komponenten. Unsere Absichten waren gut, aber es hat den Entwicklern nicht weitergeholfen. Deshalb haben wir das Projekt eingestellt. Es ist schwierig, das auf schwere Art zu erlernen, aber jeder Fehler beflügelt die Renaissance von CSS und HTML.
Sehen wir uns LAPIs etwas genauer an. Warum?
Nicole:Wir wussten, dass das Web für LAPIs eine Drop-in-Komponente brauchte, um eine native Benutzeroberfläche zu erstellen. Und es war klar, dass die Neudefinition des Rades die Entwickler aufhalten würde. Ich kann gar nicht zählen, wie viele Tabs ich im Laufe meiner Karriere erstellt habe! Dennoch haben wir versucht, dieses Problem zu lösen, indem wir JavaScript im Browser versenden, was sehr schwierig war. Bisher war noch kein JavaScript-Code im Browser enthalten und es war nicht klar, wie es mit dem C++-Code interagieren sollte, der das Rendering-Modul des Browsers nutzt. Wir haben uns auch andere Browseranbieter angeschaut (vielen Dank, Mozilla!) und haben diesen Ansatz abgeschwächt, sodass wir mit Open UI eine viel bessere Lösung gefunden haben. Durch den Einsatz von HTML und CSS erhalten wir flexible, deklarative Lösungen. Da es deklarativ ist, können wir die Barrierefreiheit auf eine Weise einbauen, die mit JavaScript nicht so einfach wäre. Ich bin wirklich gespannt, wo alles weitergeht. Wir arbeiten derzeit an der Unterstützung von Auswahlmenüs, Pop-ups, Kurzinfos, Navigationselementen, Akkordeons, Tabs, Karussells und Ein-/Aus-Schaltflächen. Diese sind wichtige Designmuster für die Benutzeroberfläche.
Wir haben viel gelernt. Und ich weiß, dass es auch andere Initiativen in diesem Bereich gab, wie zum Beispiel CSS Houdini. Wie lautet die Geschichte?
Una:Ja, CSS Houdini ist ein weiterer Ort, an dem wir von der Community gelernt haben. Es gibt eine Menge nützlicher Houdini-Funktionen, aber viele waren zu niedrig, um eine breitere Akzeptanz und Unterstützung zu erreichen. Uns wurde klar, dass die Implementierung von Low-Level-APIs die Probleme für Entwickler nicht unbedingt verringern konnte. Stattdessen konnten wir durch die Konzentration auf übergeordnete Lösungen und Anforderungen browserübergreifend Unterstützung erzielen und das Ökosystem weiter voranbringen. Wir verfolgen derzeit den Fortschritt unter https://ishoudinireadyyet.com.
Was die browserübergreifende Unterstützung angeht: Initiativen wie Interop 2022 und Open UI scheinen deutlich positive Ergebnisse für die Community zu liefern. Was hören Sie von den Entwicklern?
Una:Einer der größten Probleme, den wir von Entwicklern hören, ist, dass das Design in allen Browsern gleich funktioniert. Wir haben dieses Problem in Angriff genommen, indem wir mit anderen Browser-Anbietern gearbeitet haben, um einige der am häufigsten gewünschten Entwicklerfunktionen zu priorisieren und auf den Markt zu bringen. Außerdem war das Feedback der Community ausgesprochen positiv. Außerdem ist es durch eine umfangreiche Umstrukturierung namens RenderingNG möglich geworden, einige dieser Elemente deutlich leistungsfähiger zu gestalten. Die Entwickler sind begeistert, dass diese lang erwarteten Funktionen, die sie sich seit Jahren gewünscht haben, endlich auch browserübergreifend erarbeitet werden.
Nicole:Die Aufregung in der Community ist spürbar. Sie ist auf Twitter zu sehen. :)
Die Zusammenarbeit mit der Plattform hat sich als entscheidender Faktor für unsere Erfolge erwiesen, die Entwicklern das Leben erleichtern. Ich weiß, dass Ihr Team dort viel gearbeitet hat. Möchtest du uns ein paar Details nennen?
Nicole:Ich bin immer wieder beeindruckend über die Projekte, die Entwickler im Web realisieren. Von der kleinsten Bibliothek bis hin zu einer Vielzahl von Frameworks – Entwickler erstellen erstaunliche Dinge. Es ist eine fantastische Community von Herstellern. Chrome unternimmt eine Reihe von Maßnahmen, um eine engere Verbindung zu diesen Projekten herzustellen.
Vor einigen Jahren haben wir beispielsweise damit begonnen, mit JavaScript-Frameworks wie React und Angular zu arbeiten. Und Meta-Frameworks wie Next, Nuxt und Gatsby. Letztes Jahr haben wir damit begonnen, Ähnliches mit UI-Tools und Frameworks wie Sass, Bootstrap und Material zu machen. Ich hoffe, dass wir dieses Jahr mit GreenSock und anderen Tools zusammenarbeiten können, die Entwicklern das Leben erleichtern. Ich habe gerade Cassie Evans von GreenSock bei der Smashing Conference gesehen und es hat mich wirklich begeistert, mit Leuten im Animationsbereich zu arbeiten.
Wo sehen wir also die größten Chancen für die Web-UI?
Una:Ich glaube, wir kratzen dabei an der Oberfläche dessen, was für anpassbare Websites möglich ist. Neue APIs wie Containerabfragen und die CSS-Medienfunktionen für Nutzereinstellungen definieren die Art und Weise, wie Entwickler responsives Design betrachten. Ich bin auch begeistert von den kollaborativen Designerfahrungen, die es Entwickelnden und Designschaffenden ermöglichen, mit den Nutzenden, die ihre Websites besuchen, eng zusammenarbeiten zu können.
Und Nicole, was steht für Ihr Team als Nächstes an?
Nicole:Nicht alle explorativen Datenanalysen sind lieferbar, aber es gibt viele Dinge, die mich im Moment besonders begeistern:
Una hat bereits kurz erwähnt, dass wir jetzt responsives, komponentenbasiertes Design ermöglichen. Sie enthält Tools zum Entwerfen von Farbsystemen, damit Designschaffende auf Nutzungspräferenzen wie den dunklen Modus reagieren können. Der Farbraum OKLCH sorgt beispielsweise dafür, dass die Helligkeit über alle Farbtöne hinweg konsistent ist. Designschaffende können von der Auswahl von Farben zum Entwerfen von Beziehungen zwischen Farben wechseln, ohne am Ende mit schlammigen Paletten zu enden!
Außerdem arbeiten wir an einigen der meistgefragten APIs wie Containerabfragen, Kaskadierungsebenen, übergeordnetem Selektor (:has), Bereichsstile und Verschachtelung. Entwickelnde brauchen diese, damit sie flexible Designsysteme voller wiederverwendbarer Komponenten erstellen können.
Auch Animationen, die durch Scrollen verlinkt sind, können Spaß machen. Mir gefällt die Demo von Steve Gardner sehr gut. Er hat ein butteriges flüssiges Scrollen und coole Flugzeuganimationen, die beim Scrollen ausgelöst werden. Das macht zwar Spaß, kann aber schwierig sein, insbesondere im Hinblick auf die Barrierefreiheit. Deshalb führen wir jetzt Nutzertests zur Barrierefreiheit der Funktion durch.
Was ich persönlich am meisten begeistert, sind die integrierten Web-UI-Steuerelemente. Entwickler erstellen immer wieder dasselbe Tabset. 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 untersuchen, wie es aussehen würde, wenn diese Bedienungshilfen in diese Browser-Primitive eingebunden werden, damit das Web im Laufe der Zeit standardmäßig zugänglich werden könnte. Die Entwickler können sich dann auf die komplexeren und differenzierteren Probleme konzentrieren, während die Grundlagen, wie die Registerkarten-Tabs, vom Browser unterstützt werden können. Dafür wird wahrscheinlich ein eigener Beitrag benötigt, also höre ich das erst mal auf!
Außerdem werden wir weiter in die Interoperabilität zwischen Browsern investieren. Es war toll, mit den Leuten bei WebKit und Gecko zusammenzuarbeiten, um die Entwicklungsumgebung einheitlicher zu gestalten. Viele Entwickler haben uns immer wieder mitgeteilt, dass sie sich das wünschen.
Und falls Sie es noch nicht ausprobiert haben, wird die Shared Element Transitions API des Teams für nahtlose Webentwicklung die Art und Weise verändern, wie die Nutzer das Web gestalten. All diese subtilen kleinen Übergänge, die es Designschaffenden ermöglichen, ihre Designs im physischen Raum auszurichten, werden nicht nur möglich, sondern einfach sein. Jake Archibald hat eine großartige Demo.
Wenn die Standards gut laufen, könnten wir dieses Jahr sogar auf den vertikalen Rhythmus achten! Wir können auf LayoutNG aufbauen, das so viele Funktionen bietet.
Vielen Dank. Ich bin mir sicher, dass sich die gesamte Community, wie wir, sehr über das rasante Tempo der Verbesserungen und Funktionen freut, die in der Welt der Web-UI eingeführt werden. Es gibt immer noch viel zu lernen. Wo sollte man mit der Reise beginnen?
Una: Auf der I/O-Session What's New for the Web Platform werden die Highlights vieler Funktionen behandelt, die dieses Jahr eingeführt werden. Adam Argyle hat auch einen tollen Artikel zu allen neuen und bevorstehenden Preisvergleichsportal-Landingpages verfasst. Ich würde mich regelmäßig auf stabile Releases konzentrieren und auf die anderen Arbeitsschritte im Anschluss für die Pipeline achten. Dann empfehlen wir Ihnen die Reihe Neu auf der Web-Plattform. Wenn Sie den web.dev-Newsletter abonnieren, erhalten Entwickler auch diese Inhalte im Posteingang. Und für Entwickler, die sich dabei beteiligen und dabei helfen möchten, ist die Teilnahme an Open UI eine der besten Möglichkeiten, diese Arbeit zu unterstützen.
Wichtige anstehende Updates
Wir halten uns an unsere Tradition, um euch über eine bevorstehende Änderung zu informieren, die ihr bei der Gestaltung eurer Website berücksichtigen solltet.
Höchstalter für Cookies auf 400 Tage beschränken
- Aktualisierung: Wenn Cookies mit einem expliziten
Expires/Max-Age-Attribut gesetzt werden, darf der Wert jetzt maximal 400 Tage in der Zukunft liegen. Bisher gab es keine Begrenzung und Cookies konnten mehrere Jahrtausende in der Zukunft ablaufen. Mit dieser Beschränkung soll ein ausgewogenes Verhältnis zwischen gängigen Nutzungsmustern und der Wahrung des Datenschutzes für Nutzer erreicht werden. Jede Website, die häufiger als alle 400 Tage besucht wird, kann Cookies aktualisieren, um den Dienst ohne Unterbrechung weiter zu nutzen. Nutzer können sich darauf verlassen, dass Cookies nicht seit Jahrtausenden ohne Verwendung in ihrem Browser verbleiben. - Voraussichtlicher Zeitplan:Versand in Chrome 104 (stabil ab dem 2. August 2022).
- Entwickler-CTA: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 der ersten Platzierung des Cookies abgemeldet.
Wir hoffen, dass Ihnen diese Ausgabe von Chrome Dev Insider gefallen hat. Solltest du sie verpasst haben, hier ist die erste. Wir freuen uns darauf, im nächsten Quartal weitere Funktionen vorzustellen.
Bis dahin würden wir uns freuen, wenn Sie uns Ihre Meinung zu dieser Ausgabe von Chrome Dev Insider mitteilen und was wir tun können, um sie noch besser zu machen.
Wie hat dir diese Ausgabe von „The Chrome Dev Insider“ gefallen? Feedback geben