Nieuw in Chrome 129

Piet LePage

Dit is wat u moet weten:

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

Verdeel lange taken met scheduler.yield()

Lange taken vertragen het vermogen van de browser om te reageren op gebruikersinvoer, waardoor de indruk ontstaat dat een site traag is en dit heeft invloed op kritische prestatiestatistieken zoals INP. Met scheduler.yield() kunt u lange taken opdelen in kleinere stukken, waardoor de responsiviteit wordt verbeterd door expliciet terug te keren naar de hoofdlijn.

Hiermee kunt u de browser het volgende vertellen:

"Hé! Het werk dat ik ga doen kan een tijdje duren. Als je een kader moet schilderen, moet reageren op gebruikersinvoer of andere belangrijke taken moet uitvoeren, is dat prima, ik kan wachten"

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

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

await scheduler.yield();

Belangrijk is dat het ervoor zorgt dat de voortzetting van uw code prioriteit krijgt, zodat u niet verliest door toe te geven. We raden een liberaal gebruik van scheduler.yield() aan in functies tussen grotere stukken werk.

Zie Lange taken optimaliseren voor meer details.

Animaties met intrinsieke afmetingen

CSS-animaties zijn best leuk, maar vereisen doorgaans expliciete afmetingen. Je kunt geen trefwoorden voor intrinsieke afmetingen gebruiken, zoals auto , min-content of fit-content .

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

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

Na het toevoegen van interpolate-size: allow-keywords krijgen de knoppen in de video een prachtig overgangsanimatie-effect.

Door interpolate-size: allow-keywords op het root op te geven, wordt het nieuwe gedrag voor de hele pagina ingesteld. We raden u 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() , vergelijkbaar met calc() , ook bewerkingen op precies één van de ondersteunde trefwoorden voor intrinsieke grootte. 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 Animeren op hoogte: automatisch; (en andere intrinsieke maatzoekwoorden) in CSS voor volledige details.

Wijzigingen in de positionering van CSS-ankers

De positionering van CSS-ankers is in Chrome 125 terechtgekomen, maar na wat extra discussie binnen de CSS-werkgroep zijn er een paar wijzigingen in de specificaties en implementatie. Als u al gebruikmaakt van CSS-ankerpositie, moet u uw code zo snel mogelijk bijwerken.

Ten eerste is inset-area gewijzigd in position-area . Dit had de voorkeur omdat de position- u eraan herinnert dat deze eigenschap wordt toegepast op het gepositioneerde element en niet op het ankerelement.

Ten tweede wordt de naam position-try-options gewijzigd in position-try-fallbacks . Dit helpt je te onthouden dat dit slechts een terugval is naar de primaire positie, die wordt bepaald 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 meer!

Natuurlijk is er nog veel meer.

Er is een nieuwe Intl methode voor het opmaken van de duur, 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 bereik van het scherm gebruiken voor HDR-afbeeldingen.

En er zijn een aantal beëindigingen en verwijderingen die van invloed kunnen zijn op sommige ontwikkelaars.

Lees de volledige releaseopmerkingen .

Verder lezen

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

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 vervang Adriana door Pete LePage. Zodra Chrome 130 uitkomt, zijn we hier om je te vertellen wat er nieuw is in Chrome!