Container Queries

Wat zijn Container Queries en hoe gaan ze de moderne webontwikkeling helpen?

Tijdens de ontwikkeling van moderne websites maken we gebruik van “media queries”. Dit is een stukje code in de CSS stylesheet van een website. Met een media query kun je aangeven om CSS alleen toe te passen als de browserinformatie overeenkomt met de code die je op geeft. Je kunt dus zeggen “als de viewport groter is dan 320px, maak dan alle elementen met de class “.news” 200px breed en als de viewport groter is dan 576px, maak dan alle elementen met de class “.news” 400px breed. Dit geldt voor de layout op pagina niveau.

Container Queries gaan een stap verder. Container Queries zorgen ervoor dat ontwikkelaars responsive- en styling logica kunnen toepassen op component niveau i.p.v. op pagina niveau. Dit betekent dat ongeacht waar deze elementen op de pagina worden geplaatst, ze worden aangepast op basis van de afmetingen van het bovenliggende (parent) element in plaats van de grootte van de volledige pagina.

Het voordeel hiervan is dat we bepaalde elementen binnen een pagina optimaal kunnen benutten waardoor de gebruikerservaring beter wordt.

Maar wat bedoel je nou precies?

Laten we kijken naar een voorbeeld, b.v. een card. Met behulp van container queries kunnen we ervoor zorgen dat we een type card creëren en dat deze zich aanpast naar mate er ruimte is in het parent element.

We beginnen met de card in de kleinste vorm, b.v. voor een sidebar of mobile view. We tonen een card met een afbeelding, titel en paragraaf tekst omdat er maar 343px ruimte is in de breedte.

Naarmate er meer ruimte ontstaat in de sidebar (het parent element), b.v. door het groeien van schermgrootte of het element, kunnen we extra elementen tonen d.m.v. css styling rules. Zo tonen we in de ruim hier een subtitel naast de titel, en hogere afbeelding en filters onder aan de card.

Nu zul je denken, maar dit is toch ook mogelijk met Media Queries. Klopt, maar dat is op pagina/viewport niveau met Container Queries kunnen we dit dus op element niveau toepassen. Dus op cards, pagination, tables, articles, carousels, etc etc.

Dezelfde card in een andere query container kunnen we een heel ander uiterlijk of layout geven.

Nu gebruiken?

Container Queries zijn op dit moment geïmplementeerd vanaf Chrome 106, Edge 106, en Safari 16.0. Firefox volgt snel. Het is verstandig om wel al in de syntax te duiken. Er zijn ook polyfills waar je op dit moment al aan de slag kunt https://github.com/GoogleChromeLabs/container-query-polyfill

Het bovenstaande voorbeeld is hier te vinden (let op bekijk in Chrome > 106, Edge > 106 of Safari >16.0: https://codepen.io/pwavg/pen/PoezgKN