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 von CSS-Farbebene 4 können Sie Farben auf ein neues Level bringen.
  • Im Bereich „Stil“ finden Sie neue Tools, mit denen Sie die neuen Farbfunktionen optimal nutzen können.
  • Und es gibt noch viel mehr.

Ich bin Adriana Jara. Sehen wir uns an, was es in Chrome 111 für Entwickler Neues gibt.

Transitions API ansehen

Das Erstellen flüssiger Übergänge im Web ist eine komplexe Aufgabe. Die View Transitions API soll das Erstellen ansprechender Übergänge vereinfachen, indem Ansichten als Snapshots erfasst und das DOM ohne Überschneidungen zwischen den Status 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: 50% mehr Farben zur Auswahl! Sie dachten, 16 Millionen Farben klingen nach einer Menge. Das dachte ich mir auch.

Eine Reihe von Bildern zeigt den Übergang zwischen einer breiten und einer schmalen Farbskala, 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 mithilfe von CSS die Vorteile von High-Definition-Farben voll ausschöpfen.

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 den Funktionen „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 viel mehr.

Weitere Informationen

Dies sind nur einige wichtige Highlights. Unter den folgenden Links finden Sie weitere Informationen zu den Ä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.