Nieuw in Chrome 129

Pete LePage

Dit is wat u moet weten:

Ik ben Pete LePage. Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 129.

Splits lange taken op met scheduler.yield()

Lange taken vertragen de reactie van de browser op gebruikersinvoer, waardoor de indruk ontstaat dat een site traag is en kritieke prestatiegegevens zoals INP worden beïnvloed. Met scheduler.yield() kunt u lange taken opsplitsen in kleinere delen, waardoor de responsiviteit wordt verbeterd door expliciet terug te geven aan de hoofdthread.

Hiermee kunt u de browser vertellen:

"HEI! Het werk dat ik ga doen, kan even duren. Als je een frame moet schilderen, moet reageren op gebruikersinvoer of andere belangrijke taken hebt, is dat oké, ik kan wachten."

Een weergave van hoe het opsplitsen van een taak gebruikersinteractie kan vergemakkelijken. Bovenaan blokkeert een lange taak de uitvoering van een event handler totdat de taak is voltooid. Onderaan zorgt de opgesplitste taak ervoor dat de event handler sneller kan worden uitgevoerd dan anders het geval zou zijn geweest.

Voeg de volgende regel regelmatig toe aan uw JavaScript-code om de browser wat ademruimte te geven en INP- problemen te voorkomen.

await scheduler.yield();

Belangrijk is dat het de voortgang van je code prioriteit geeft, zodat je niet verliest door yielding. We raden aan om scheduler.yield() ruim te gebruiken in functies tussen grotere werkstukken.

Zie Lange taken optimaliseren voor meer informatie.

Animaties met intrinsieke formaten

CSS-animaties zijn erg mooi, maar vereisen doorgaans expliciete afmetingen. Je kunt geen intrinsieke sleutelwoorden voor de afmeting gebruiken, zoals auto , min-content of fit-content .

De CSS-eigenschap interpolate-size opent een nieuwe reeks animaties die niet mogelijk waren met behulp van intrinsieke grootte-trefwoorden.

Zonder interpolate-size hebben de knoppen in de volgende video geen overgang.

Nadat u interpolate-size: allow-keywords hebt toegevoegd, krijgen de knoppen in de video een prachtig overgangsanimatie-effect.

Door interpolate-size: allow-keywords op het root element te specificeren, wordt het nieuwe gedrag voor de hele pagina ingesteld. We raden aan dit te doen wanneer compatibiliteit geen probleem is.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Voor een nauwkeurigere controle ondersteunt de CSS-functie calc-size() , net als calc() , ook bewerkingen op precies één van de ondersteunde intrinsieke sleutelwoorden voor formaataanpassing. Bij het uitvoeren van lay-outberekeningen wordt het sleutelwoord size geëvalueerd naar de oorspronkelijke grootte van calc-size-basis .

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

Bekijk Animate to height: auto; (en andere intrinsieke sleutelwoorden voor formaataanpassing) in CSS voor volledige details.

Wijzigingen in de CSS-ankerpositie

CSS-ankerpositionering is beschikbaar in Chrome 125, maar na wat extra discussie binnen de CSS-werkgroep zijn er een paar wijzigingen in de specificatie en implementatie. Als je CSS-ankerpositionering al gebruikt, moet je je code zo snel mogelijk bijwerken.

Ten eerste is inset-area hernoemd naar position-area . Dit was de voorkeur omdat de formulering position- helpt te onthouden dat deze eigenschap wordt toegepast op het gepositioneerde element, niet op het ankerelement.

Ten tweede is position-try-options hernoemd naar position-try-fallbacks . Dit helpt je te onthouden dat dit slechts fallbacks zijn naar de primaire positie, die bepaald wordt door de basisstijlen.

Ten slotte wordt de functionele syntaxis inset-area() verwijderd uit position-try . Gebruik daarom position-try-fallbacks: top in plaats van position-try-fallbacks: inset-area(top) .

En nog veel meer!

Er is natuurlijk nog veel meer.

Er is een nieuwe Intl methode voor het opmaken van tijdsduur, met ondersteuning voor meerdere landinstellingen.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Web GPU Canvas kan nu het volledige schermbereik gebruiken voor HDR-afbeeldingen.

Er zijn een aantal verouderingen en verwijderingen die gevolgen kunnen hebben voor sommige ontwikkelaars.

Lees de volledige release-opmerkingen .

Verder lezen

Dit zijn slechts enkele belangrijke hoogtepunten. Bekijk de volgende links voor aanvullende wijzigingen in Chrome 129.

Abonneren

Om op de hoogte te blijven, kunt u zich abonneren op het YouTube-kanaal voor Chrome-ontwikkelaars . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, de vervanger van Adriana, en zodra Chrome 130 uitkomt, vertellen we je graag wat er nieuw is in Chrome!