Neu in Chrome 111

Adriana Jara

Dazu sollten Sie Folgendes wissen:

  • Mit der View Transitions API können Sie ansprechende Übergänge in Ihrer Single-Page-App erstellen.
  • Mit der Unterstützung für CSS Color Level 4 bringen Sie Farben auf das nächste Level.
  • Im Bereich „Stil“ finden Sie neue Tools, mit denen Sie die neuen Farbfunktionen optimal nutzen können.
  • Und es gibt noch viel mehr.

Mein Name ist Adriana Jara. Sehen wir uns nun an, was es bei Chrome 111 für Entwickler Neues gibt.

Transitions API ansehen

Das Erstellen flüssiger Übergänge im Web ist eine komplexe Aufgabe. Mit der View Transitions API wird das Erstellen von ausgefeilten Übergängen vereinfacht, indem Ansichten von Ansichten erstellt werden und das DOM ohne Überschneidungen zwischen den Zuständen geändert werden kann.

Übergänge, die mit der View Transition API erstellt wurden. Demo-Website testen – Chrome 111 oder höher erforderlich.

Die Standardansichtsüberblendung ist ein Cross-Fade. Das folgende Snippet implementiert diese Funktion.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Wenn .startViewTransition() aufgerufen wird, erfasst die API den aktuellen Status der Seite.

Danach wird callback aufgerufen, das an .startViewTransition() übergeben wurde. Dort wird das DOM geändert. Anschließend erfasst die API den neuen Status der Seite.

Die API wurde für Single-Page-Apps (SPAs) eingeführt, aber es wird auch an der Unterstützung anderer Modelle gearbeitet.

Diese API hat viele Details. Weitere Informationen finden Sie in unserem Artikel mit Beispielen und Details oder in der Dokumentation zu Ansichtsübergängen auf MDN.

CSS-Farbebene 4.

Mit CSS-Farbebene 4 unterstützt CSS jetzt hochauflösende Displays, wobei Farben aus HD-Gamuts angegeben werden und gleichzeitig Farbräume mit Spezialisierungen angeboten werden.

Kurz gesagt bedeutet das, dass 50% mehr Farben zur Auswahl stehen! Sie dachten, 16 Millionen Farben klingen nach einer Menge. Das dachte ich mir auch.

Eine Reihe von Bildern zeigt den Übergang zwischen breiten und schmalen Farbräumen, um die Farbbrillanz und ihre Auswirkungen zu veranschaulichen.
Selber ausprobieren

Die Implementierung umfasst die Funktion color(). Sie kann für jeden Farbraum verwendet werden, in dem Farben mit R-, G- und B-Kanälen angegeben werden. color() nimmt zuerst einen Farbraumparameter, dann eine Reihe von Kanalwerten für RGB und optional einen Alphawert entgegen.

Hier sind einige Beispiele für die Verwendung der Farbfunktion mit verschiedenen Farbräumen.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

In diesem Artikel finden Sie weitere Informationen dazu, wie Sie die Vorteile von HD-Farben mithilfe von CSS in vollem Umfang nutzen können.

Neue Farb-DevTools

Die Devtools bieten neue Funktionen zur Unterstützung der CSS-Farbebene 4.

Der Bereich Stile unterstützt jetzt die 12 neuen Farbräume und 7 neuen Farbräume, die in der Spezifikation beschrieben sind. Hier sind Beispiele für CSS-Farbdefinitionen mit color(), lch(), oklab() und color-mix().

Beispiele für CSS-Farbdefinitionen

Wenn Sie color-mix() verwenden, mit dem Sie einen Prozentsatz einer Farbe in eine andere einmischen können, können Sie die endgültige Farbausgabe im Bereich Berechnet ansehen. Das Ergebnis der Farbmischung wird im Bereich „Berechnet“ angezeigt.

Außerdem unterstützt die Farbauswahl alle neuen Farbräume mit mehr Funktionen. Klicken Sie beispielsweise auf das Farbmuster von „color(display-p3 1 0 1)“. Außerdem wurde eine Linie für die Farbraumgrenze hinzugefügt, die zwischen dem sRGB- und dem Display-P3-Farbraum unterscheidet, um den Farbraum der ausgewählten Farbe besser nachvollziehen zu können. Eine Farbraumgrenzlinie.

Die Farbauswahl unterstützt auch die Umwandlung von Farben zwischen Farbformaten.

Farben zwischen Farbformaten konvertieren

In diesem Beitrag finden Sie weitere Informationen zum Debuggen von Farben und anderen neuen Funktionen in den DevTools.

…und vieles mehr

Natürlich gibt es noch viele weitere.

Weitere Informationen

Hier werden nur einige wichtige Highlights behandelt. Unter den folgenden Links finden Sie weitere Informationen zu Änderungen in Chrome 111.

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich bin Adriana Jara. Sobald Chrome 112 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.