Chrome 150 is uitgerold en brengt een reeks CSS-features mee die je dag meteen veranderen. Twee springen eruit: `text-fit`, dat tekst automatisch schaalt om zijn container te vullen, en `background-clip: border-area`, dat native verloopkaders mogelijk maakt zonder border-image of pseudo-elementen. Allebei lossen ze problemen op die je team waarschijnlijk al jaren omheen werkte.
Tekst die altijd past
Met `text-fit: contain` schaalt de browser de lettergrootte van een tekstknooppunt totdat de tekst de beschikbare breedte precies vult — geen JavaScript nodig. Tot nu toe was dit een forse bibliotheek, een ResizeObserver-constructie of handmatig tunen per breakpoint. De nieuwe property is ontworpen voor koppen die altijd de volledige breedte van een kaart of banner moeten vullen, ongeacht hoeveel tekst er staat. Simpel gevraagd, lang op gewacht.
Verloopkaders zonder compromissen
Een kleurverloop als kaderlijn tekenen was in CSS altijd een gecompliceerde dans. `border-image` werkte maar leverde problemen op met `border-radius` en `box-shadow`. Een pseudo-element als achterlaag was slimmer maar breekbaar. `background-clip: border-area` lost dit definitief op: stel een verloopachtergrond in, geef het element `border: 2px solid transparent`, en de browser knipt de achtergrond netjes bij het kadergebied. Het resultaat is schoon, declaratief en werkt samen met alle andere border-eigenschappen.
Onze kijk
Chrome 150 is een goede herinnering aan waarom het bijhouden van browser-releases de moeite waard is. Twee workarounds die al lang standaard in elke codebase sluipen — een JS-bibliotheek voor tekst-schaling en een fragiele pseudo-element-constructie voor kaders — worden nu elk één CSS-regel. Edge 150 volgde vrijwel direct met dezelfde features; samen dekken ze een ruime meerderheid van de desktopmarkt. Firefox en Safari hebben nog niet gesignaleerd, dus progressieve verbetering is de verstandige keuze. Maar voor apps die een Chromium-omgeving targeten kun je hier vandaag mee beginnen.
