Nieuw in Chrome 111

Adriana Jara

Dit is wat u moet weten:

  • Creëer gepolijste overgangen in uw app met één pagina met de View Transitions API .
  • Breng kleuren naar een hoger niveau met ondersteuning voor CSS Color Level 4 .
  • Ontdek nieuwe tools in het stijlpaneel om het meeste uit de nieuwe kleurfunctionaliteit te halen.
  • En er is nog veel meer .

Ik ben Adriana Jara. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 111.

Bekijk Transitions-API.

Het creëren van vloeiende overgangen op internet is een complexe taak. De View Transitions API is er om het maken van gepolijste overgangen eenvoudiger te maken door momentopnamen te maken en de DOM te laten veranderen zonder enige overlap tussen statussen.

Overgangen gemaakt met de View Transition API. Probeer de demosite – Vereist Chrome 111+.

De standaard weergaveovergang is een cross-fade; het volgende fragment implementeert deze ervaring.

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));
}

Wanneer .startViewTransition() wordt aangeroepen, legt de API de huidige status van de pagina vast.

Zodra dat is voltooid, wordt de callback die wordt doorgegeven aan .startViewTransition() aangeroepen. Dat is waar de DOM wordt gewijzigd. Vervolgens legt de API de nieuwe status van de pagina vast.

Houd er rekening mee dat de API is gelanceerd voor Single-Page Apps (SPA's), maar dat er ook ondersteuning voor andere modellen wordt geïmplementeerd.

Er zijn veel details over deze API, lees meer in ons artikel met voorbeelden en details , of bekijk de View Transitions-documentatie op MDN .

CSS-kleurniveau 4.

Met CSS-kleurniveau 4 ondersteunt CSS nu high-definition beeldschermen, waarbij kleuren uit HD-gamma's worden gespecificeerd en tegelijkertijd kleurruimten met specialisaties worden aangeboden.

In een notendop betekent dit 50% meer kleuren om uit te kiezen! Je dacht dat 16 miljoen kleuren veel klonken. Dat dacht ik ook.

Er wordt een reeks afbeeldingen getoond met een overgang tussen brede en smalle kleurengamma's, ter illustratie van de levendigheid van kleuren en de effecten ervan.
Probeer het zelf

De implementatie omvat de functie color() ; het kan worden gebruikt voor elke kleurruimte die kleuren specificeert met R-, G- en B-kanalen. color() neemt eerst een kleurruimteparameter, vervolgens een reeks kanaalwaarden voor RGB en optioneel wat alfa.

Hier volgen enkele voorbeelden van het gebruik van de kleurfunctie met verschillende kleurruimten.

.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);
}

Bekijk dit artikel voor meer documentatie om optimaal te profiteren van high-definition kleuren met behulp van CSS.

Nieuwe kleurontwikkeltools.

Devtools heeft nieuwe functies ter ondersteuning van de CSS-kleurniveau 4-specificatie.

Het deelvenster Stijlen ondersteunt nu de 12 nieuwe kleurruimten en 7 nieuwe kleurengamma's die in de specificatie worden beschreven. Hier zijn voorbeelden van CSS-kleurdefinities met color(), lch(), oklab() en color-mix().

Voorbeelden van CSS-kleurdefinities.

Wanneer u color-mix() gebruikt, waarmee u een percentage van de ene kleur in de andere kunt mengen, kunt u de uiteindelijke kleuruitvoer bekijken in het deelvenster Berekend kleurmixresultaat in het deelvenster Berekend.

Ook ondersteunt de kleurkiezer alle nieuwe kleurruimten met meer functies. Klik bijvoorbeeld op het kleurstaal van kleur (display-p3 1 0 1). Er is ook een gammagrenslijn toegevoegd, die onderscheid maakt tussen het sRGB- en display-p3-gamma, voor een beter begrip van het door u geselecteerde kleurgamma. Een gammagrenslijn.

De kleurkiezer ondersteunt ook het converteren van kleuren tussen kleurformaten.

Kleuren converteren tussen kleurformaten.

Bekijk dit bericht voor meer informatie over het debuggen van kleuren en andere nieuwe functies in devtools.

En meer!

Natuurlijk is er nog veel meer.

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 111.

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Adriana Jara, en zodra Chrome 112 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!