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.
CSS container queries
A videó hossza összesen 14 perc, ez is mutatja a dolog egyszerűségét.