Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chrome 123

Adriana Jara

Dit is wat u moet weten:

Pas uw kleurenschema aan met de nieuwe light-dark() functie .
Stel de responsiviteit van uw site vast met de Long Animation Frames API .
Voorkom prestatieboetes bij het opstarten van servicemedewerkers met de Service Worker Static Routing API .
En er is nog veel meer .

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

`light-dark()` CSS-functie.

Met de functie light-dark() in CSS kunt u kleuren maken die zich aanpassen aan de voorkeur van een gebruiker voor de lichte of donkere modus . Gebruik de functie light-dark() om twee verschillende kleurwaarden op te geven binnen één CSS-eigenschap.

De browser kiest automatisch de juiste kleur op basis van de berekende color-scheme van het element. Bijvoorbeeld met de volgende CSS:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

Als de gebruiker een licht thema heeft geselecteerd, heeft het element een limoenachtergrond.
Als de gebruiker een donker thema heeft geselecteerd, heeft het element een groene achtergrond.

API voor lange animatieframes.

De Long Animation Frames API is beschikbaar om u te helpen de oorzaken van congestie in de hoofdthread te vinden, wat vaak de oorzaak is van slechte INP ( Interaction to Next Paint ) - een Core Web Vital die de responsiviteit van een website meet.

De nieuwe API is een verbeterde versie van de Long Tasks API, die een beter inzicht biedt in langzame updates van de gebruikersinterface. Met de Long Animation Frames API kunt u het blokkeringswerk meten. Het meet de taken samen met de volgende rendering-update en voegt informatie toe zoals langlopende scripts, renderingtijd en tijd besteed aan geforceerde lay-out en stijl, ook wel layout thrashing genoemd.

Door deze informatie te verzamelen en te analyseren, kunt u prestatieknelpunten identificeren en oplossen. U kunt lange frames vastleggen met de volgende code.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Servicemedewerker Statische routering-API.

Met behulp van serviceworkers kunt u websites offline laten werken en cachingstrategieën creëren die voor een prestatieverbetering kunnen zorgen.

Er kunnen echter prestatiekosten in rekening worden gebracht wanneer een pagina voor het eerst sinds een tijdje wordt geladen en de controlerende servicemedewerker op dat moment niet actief is. Omdat alle ophaalacties via de servicemedewerker moeten plaatsvinden, moet de browser wachten tot de servicemedewerker is opgestart en uitgevoerd om te weten welke inhoud moet worden geladen.

Met de Service Worker Static Routing API kunt u tijdens de installatie aangeven dat paden altijd via het netwerk moeten worden bediend. Wanneer later een gecontroleerde URL wordt geladen, kan de browser bronnen uit die paden gaan ophalen voordat de servicemedewerker klaar is met starten. Hiermee wordt de servicemedewerker verwijderd uit de URL's waarvan u weet dat deze geen servicemedewerker nodig hebben.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

En meer!

Natuurlijk is er nog veel meer.

U kunt aangepaste pagina's aanbieden op basis van waar de gebruiker vandaan navigeert met de NavigationActivation interface.
Chrome heeft nu ondersteuning voor Zstandard ( zstd ). Deze Content-Encoding helpt pagina's sneller te laden en minder bandbreedte te gebruiken, en minder tijd, CPU en stroom te besteden aan compressie op servers, wat resulteert in lagere serverkosten.
De notRestoredReasons API voor bfcache wordt uitgerold vanaf Chrome 123. Hierdoor kunnen site-eigenaren in het veld redenen verzamelen waarom de bfcache niet kon worden gebruikt. Site-eigenaren kunnen dit gebruiken om het gebruik van de bfcache te verbeteren, waardoor snellere geschiedenisnavigatie mogelijk is.
Met de picture-in-picture waarde voor display-mode kunt u specifieke CSS-regels schrijven die alleen van toepassing zijn wanneer de webapp in de beeld-in-beeld-modus wordt weergegeven. Bijvoorbeeld:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Controleer de volgende links voor aanvullende wijzigingen in Chrome 123.

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.

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