CSS container queries

A grid layout óta kevés világmegváltó újdonság érkezik, azonban a CSS container queries ezek közé tartozik. Ha használtunk már media query-t, akkor a container query használatát pár perc alatt meg fogjuk érteni.

Media query vs. container query

A container query nagyon hasonlít a media query-hez, az egyetlen különbség, hogy a media query a viewport szélességét veszi figyelembe, a container query pedig az adott elem konténerét. Ezzel lehetőségünk nyílik arra, hogy egy elem kinézetét ne csak a böngészőablak szélességéhez tudjuk igazítani, hanem az őt befoglaló elem szélességéhez is.

Első lépésben definiálnunk kell a konténer elemet. Ezt a container-type megadásával tudjuk megtenni, mely size vagy inline-size értéket vehet fel. A szélességre vonatkozó beállításokat az inline-size fogja nekünk biztosítani, a size értéket kb. soha nem fogjuk használni. Ha valakit részletesebben érdekel a kettő közötti különbség, ide kattintva el tudja olvasni.

Lehetőségünk van elnevezni a konténert a container-name property-vel. Ez nem kötelező, de sokkal egyszerűbb név szerint hivatkozni valamire, ezért ajánlatos használni.

.card-container {
	container-type: inline-size;
	container-name: card;
}

A shorthand megadása a container property-vel történik. Az alábbi kód működése megegyezik a fentivel.

.card-container {
	container: card / inline-size;
}

A fenti deklaráció után így fog kinézni a container query, ha például egy 500px értékű maximális szélességre szeretnénk optimalizálni a card komponensünket.

@container card (max-width:500px) {
	.card-container .card {
		// css kód
	}
}

Mértékegységek

A contaier query-vel kapunk 6 új CSS mértékegységet, mely megegyezik a viewport mértékegységek működésével, csak itt nem a viewport-hoz képest kapunk relatív értékeket, hanem a konténerhez. Az elnevezésük is ugyanaz, csak v betű helyett cq prefixet kaptak a mértékegységek: cqw, cqh, cqi, cqb, cqmin, cqmax. A működésükről itt olvashatsz bővebben.

A videóban létrehozott forráskódot az alábbi linkre kattintva tudud megnézni.

forráskód

CSS container queries

A videó hossza összesen 14 perc, ez is mutatja a dolog egyszerűségét.