Nieuw in Chrome 142

Rachel Andrew

Gepubliceerd: 28 oktober 2025

Chrome 142 wordt nu uitgerold en in dit bericht worden enkele belangrijke functies van deze release besproken. Lees de volledige release-opmerkingen van Chrome 142 .

Belangrijkste punten uit dit persbericht:

• Koppel scrollmarkeringen aan de pseudo-klassen :target-before en :target-after .
• Gebruik de bereiksyntaxis in query's voor stijlcontainers en de CSS-functie if() .
• Reageer wanneer gebruikers interesse tonen in een element met interestfor .

:target-before en :target-after pseudo-klassen

Deze pseudo-klassen komen overeen met scrollmarkeringen die zich vóór of na de actieve markering bevinden (overeenkomend met :target-current ) binnen dezelfde scrollmarkeringsgroep, zoals bepaald door de volgorde van de platte boomstructuur:

• :target-before : Komt overeen met alle scrollmarkeringen die voorafgaan aan de actieve markering in de platte boomstructuur binnen de groep.
• :target-after : Komt overeen met alle scrollmarkeringen die na de actieve markering in de platte boomstructuur binnen de groep komen.

Bereiksyntaxis voor query's op stijlcontainers en if()

Chrome verbetert CSS-stijlquery's en de if() functie door ondersteuning voor bereiksyntaxis toe te voegen.

Het breidt stijlquery's uit tot voorbij het exact matchen van waarden (bijvoorbeeld style(--theme: dark) ). Ontwikkelaars kunnen vergelijkingsoperatoren (zoals > en < ) gebruiken om aangepaste eigenschappen, letterlijke waarden (bijvoorbeeld 10px of 25%) en waarden van substitutiefuncties zoals attr() en env() te vergelijken. Voor een geldige vergelijking moeten beide zijden naar hetzelfde gegevenstype verwijzen. Het is beperkt tot de volgende numerieke typen: <length> , <number> , <percentage> , <angle> , <time> , <frequency> en <resolution> .

Voorbeelden:

Vergelijk een aangepaste eigenschap met een letterlijke lengte:

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

Vergelijk twee letterlijke waarden

@container style(1em < 20px) {
  /* ... */
}

Stijlbereiken gebruiken in if() :

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

Interesse-oproepers (het attribuut interestfor )

Chrome voegt een interestfor attribuut toe aan <button> en <a> -elementen. Dit attribuut voegt "interesse"-gedrag toe aan het element. Wanneer een gebruiker interesse toont in het element, worden acties geactiveerd op het betreffende element, bijvoorbeeld het weergeven van een pop-upvenster.

De user agent detecteert wanneer een gebruiker interesse toont in het element door bijvoorbeeld de muiswijzer boven het element te houden, speciale sneltoetsen op het toetsenbord in te drukken of het element lang ingedrukt te houden op een touchscreen. Wanneer interesse wordt getoond of verloren gaat, wordt een InterestEvent geactiveerd op het doelelement, dat standaardacties voor pop-ups uitvoert, zoals het tonen en verbergen van de pop-up.

Verder lezen

Dit is slechts een greep uit de belangrijkste wijzigingen. Raadpleeg de volgende links voor meer informatie over de wijzigingen in Chrome 141.

• Release-opmerkingen voor Chrome 142 .
• Wat is er nieuw in Chrome DevTools (142) ?
• Updates voor Chrome 142 op ChromeStatus.com .
• Chrome-releasekalender .

Abonneren

Om op de hoogte te blijven, abonneer je op het YouTube-kanaal van Chrome Developers . Je ontvangt dan een e-mailmelding zodra we een nieuwe video publiceren. Of volg ons op X of LinkedIn voor nieuwe artikelen en blogberichten.

Zodra Chrome 143 is uitgebracht, laten we je hier meteen weten wat er nieuw is in Chrome!