Gepubliceerd: 28 oktober 2025
Chrome 142 wordt nu uitgerold en in dit bericht worden enkele belangrijke functies van de release besproken. Lees de volledige release-opmerkingen voor Chrome 142 .
Hoogtepunten uit deze release:
- Koppel scrollmarkeringen aan de pseudo-klassen
:target-beforeen:target-after. - Gebruik bereiksyntaxis in stijlcontainerquery's en de
if()CSS-functie. - 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 (overeenkomstig met :target-current ) binnen dezelfde scrollmarkeringsgroep, zoals bepaald door de volgorde van de platte boom:
-
:target-before: Komt overeen met alle scrollmarkeringen die voorafgaan aan de actieve markering in de platte boomvolgorde binnen de groep. -
:target-after: Komt overeen met alle scrollmarkeringen die in de platte boomvolgorde binnen de groep op de actieve markering volgen.
Bereiksyntaxis voor stijlcontainerquery's en if()
Chrome verbetert CSS-stijlquery's en de if() functie door ondersteuning toe te voegen voor bereiksyntaxis .
Het breidt stijlquery's uit die verder gaan dan exacte waardematching (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 worden omgezet. 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);
}
Interest Invokers (het interestfor attribuut)
Chrome voegt een interestfor kenmerk toe aan <button> en <a> -elementen. Dit kenmerk voegt 'interesse'-gedrag toe aan het element. Wanneer een gebruiker interesse toont in het element, worden acties op het doelelement geactiveerd, bijvoorbeeld het weergeven van een pop-up.
De user agent detecteert wanneer een gebruiker interesse toont in het element door bijvoorbeeld de muisaanwijzer boven het element te houden, speciale sneltoetsen op het toetsenbord in te drukken of het element lang ingedrukt te houden op touchscreens. Wanneer interesse wordt getoond of verloren gaat, wordt een InterestEvent geactiveerd op het doel, met standaardacties voor popovers, zoals het weergeven en verbergen van de popover.
Verder lezen
Dit zijn slechts enkele belangrijke hoogtepunten. Bekijk de volgende links voor aanvullende wijzigingen in Chrome 141.
- Release-opmerkingen voor Chrome 142 .
- Wat is er nieuw in Chrome DevTools (142) .
- ChromeStatus.com-updates voor Chrome 142 .
- Chrome-releasekalender .
Abonneren
Om op de hoogte te blijven, abonneer je op het YouTube-kanaal Chrome Developers . Je ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren. Of volg ons op X of LinkedIn voor nieuwe artikelen en blogposts.
Zodra Chrome 143 uitkomt, laten we u weten wat er nieuw is in Chrome!