Neu in Chrome 111

Adriana Jara

Dazu sollten Sie Folgendes wissen:

  • Mit der View Transitions API können Sie ausgefeilte Übergänge in Ihrer Single-Page-App erstellen.
  • Bringen Sie Farben auf die nächste Stufe – mit Unterstützung für CSS-Farbstufe 4.
  • Im Stilsteuerfeld finden Sie neue Tools, mit denen Sie die neuen Funktionen für Farben optimal nutzen können.
  • Und es gibt viele weitere.

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

Transitions API ansehen.

Das Erstellen reibungsloser Übergänge im Web ist eine komplexe Aufgabe. Mit der View Transitions API wird das Erstellen ausgefeilter Übergänge einfacher, da Ansichten von Ansichten erstellt werden und das DOM ohne Überschneidung der Status geändert werden kann.

Mit der View Transition API erstellte Übergänge. Demowebsite ansehen – Chrome 111 oder höher erforderlich.

Der standardmäßige Ansichtsübergang ist eine Überblendung. Im folgenden Snippet wird diese Funktion implementiert.

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.

Sobald dies abgeschlossen ist, wird die an .startViewTransition() übergebene callback aufgerufen. Hier wird das DOM geändert. Anschließend erfasst die API den neuen Zustand der Seite.

Die API wird erst für Single-Page Apps (SPAs) eingeführt, es werden aber auch andere Modelle unterstützt.

Ausführliche Informationen zu dieser API finden Sie in unserem Artikel mit Beispielen und Details. Alternativ können Sie sich auch die Dokumentation zu Umstellungen auf der MDN ansehen.

CSS-Farbstufe 4.

Mit der CSS-Farbstufe 4 unterstützt CSS jetzt HD-Displays, auf denen Farben aus HD-Gamuts angegeben werden können, aber auch Farbräume mit Spezialisierungen verfügbar sind.

Kurz gesagt: Es stehen 50% mehr Farben zur Auswahl! Sie fanden, dass 16 Millionen Farben nach viel klingen. Das dachte ich mir auch.

Es wird eine Reihe von Bildern mit Übergängen zwischen einer großen und einer schmalen Farbskala gezeigt, die die Intensität der Farben und ihre Effekte veranschaulichen.
Jetzt ausprobieren

Die Implementierung umfasst die color()-Funktion. Sie kann für jeden Farbraum verwendet werden, der Farben mit R-, G- und B-Kanälen angibt. color() verwendet zuerst einen Farbraumparameter, dann eine Reihe von Kanalwerten für RGB und optional einige Alphawerte.

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 zur optimalen Nutzung von HD-Farben mithilfe von CSS.

Neue Farb-Entwicklertools.

Die Entwicklertools haben neue Funktionen zur Unterstützung der CSS-Farbstufe 4-Spezifikation.

Der Bereich Styles unterstützt jetzt die 12 neuen Farbräume und sieben neue Farbskalen, 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 ein Prozentsatz einer Farbe in eine andere gemischt werden kann, können Sie sich die endgültige Farbausgabe im Bereich Computed ansehen. und das Farbmix-Ergebnis im Bereich „Berechnet“.

Außerdem unterstützt die Farbauswahl alle neuen Farbräume mit mehr Funktionen. Klicken Sie beispielsweise auf das Farbmuster(display-p3 1 0 1). Außerdem wurde eine Gamut-Grenze hinzugefügt, durch die zwischen dem sRGB- und Display-p3-Gamut und dem Farbschattier der ausgewählten Farbskala unterschieden wird. Eine Gamut-Grenze.

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

Farben zwischen Farbformaten umwandeln.

In diesem Beitrag findest du weitere Informationen zum Debugging von Farben und zu anderen neuen Funktionen in Entwicklertools.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 111.

Abo

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.

Ich bin Adriana Jara. Sobald Chrome 112 veröffentlicht wird, melde ich mich mit Informationen zu den Neuheiten in Chrome.