Het W3C heeft onlangs een nieuwe CSS property geïntroduceerd die responsive webdesign naar een hoger niveau tilt: container-adapt . Deze property bouwt voort op container queries en stelt ontwikkelaars in staat om elementen automatisch aan te passen op basis van de beschikbare ruimte in hun parent container, zonder media queries of JavaScript.
Hoe werkt container-adapt?
De container-adapt property definieert hoe een element zich gedraagt wanneer de beschikbare ruimte in de container verandert. Ontwikkelaars kunnen waarden instellen zoals fluid , stack , wrap of hide , waarmee elementen automatisch verkleinen, onder elkaar springen, wrappen of verbergen worden bij kleinere schermen. Dit elimineert de noodzaak voor complexe breakpoints en maakt componenten herbruikbaar in verschillende contexten.
Praktisch voorbeeld
In dit voorbeeld past de kaartengrid zich automatisch aan: bij voldoende ruimte worden kaarten naast elkaar getoond, bij minder ruimte wrappen ze, en individuele kaarten schalen fluïd binnen hun minimum breedte.
Browserondersteuning en toekomst
De property is momenteel beschikbaar in Chrome 130+, Firefox 133+ en Safari 18.2+ achter een feature flag. Volledige ondersteuning wordt verwacht in het eerste kwartaal van 2026. Ontwikkelaars kunnen nu al experimenteren met progressive enhancement door fallbacks te definiëren voor oudere browsers via @supports .
Frequently asked questions
Container queries maken het mogelijk om CSS-regels toe te passen op basis van de grootte van een parent container, terwijl container-adapt een stap verder gaat door automatisch gedrag te definiëren zonder expliciete queries te schrijven. Container queries vereisen nog steeds handmatige breakpoints en CSS-regels, terwijl container-adapt elementen intelligenter laat reageren met voorgedefinieerde adaptatie-strategieën zoals fluid , stack of wrap .
Ja, container-adapt kan naadloos worden geïntegreerd met populaire frameworks zoals Tailwind CSS, Bootstrap en Foundation. Omdat het een native CSS property is, kun je het combineren met utility classes en bestaande grid-systemen. Veel frameworks werken aan officiële plugins en utility classes om de implementatie nog eenvoudiger te maken zodra de browserondersteuning volwassen is.
Gebruik de @supports regel om te detecteren of een browser container-adapt ondersteunt en bied een fallback met traditionele CSS. Bijvoorbeeld:
