@container-regels en breekpunten

@container is de at-regel die stijlen toepast wanneer een container aan bepaalde groottevoorwaarden voldoet. De syntaxis lijkt op die van mediaquery's:

Richt je op een specifieke container met naam:

Gebruik max-width om stijlen toe te passen voor kleinere containers:

De moderne syntaxis voor containerquery's ondersteunt bereiken:

Een kaartcomponent die zich aanpast op basis van de breedte van de container:

Containerquery's kunnen genest worden. De binnenste query verwijst standaard naar de dichtstbijzijnde bovenliggende container.

In tegenstelling tot breekpunten voor het weergavegebied moeten breekpunten voor containers worden gekozen op basis van het moment waarop de indeling van de component moet veranderen, niet op basis van willekeurige apparaatformaten. Begin met de minimale en maximale inhoudsbreedte van de component.

Pas de typografie aan voor kleine containers:

Verander het interne raster van een component bij breekpunten van de container:

Containerquery's ondersteunen ook stijlquery's die berekende waarden van aangepaste eigenschappen controleren. Hierdoor kun je componentvarianten aansturen met CSS-variabelen, zonder extra klassen:

Regels met @container passen stijlen toe op elementen binnen een container wanneer de container aan bepaalde groottevoorwaarden voldoet. Gebruik benoemde containers om specifieke bovenliggende containers te selecteren. Breekpunten voor containers moeten gebaseerd zijn op de behoeften van de inhoud, niet op apparaatformaten. Stijlquery's breiden containerquery's uit met controles van CSS-variabelen, waardoor krachtige declaratieve componentvarianten mogelijk worden.