Mobile-first azt jelenti, hogy az alapvető stílusokat a legkisebb képernyőhöz írja, majd min-width médialekérdezésekkel összetettséget ad a nagyobb képernyőkhöz — ahelyett, hogy asztalitöp helyről kezdene és mindent eltávolítana.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Miért nyer a mobilközötti: az alapvető CSS minimális marad (a mobileszköz csak azt kapja, amire szüksége van — jó a gyengébb eszközök teljesítménye miatt), és rétegezettéteszi az összetettséget, amit könnyebb megérteni, mint felülírni/eltávolítani. Ez is megfelelő annak, hogy a tartalom természetesen hogyan áramlik egy oszlopból többbe.
A médialekérdezések a viewportra válaszolnak — az egész ablakra. De egy újrahasználható komponens (mondjuk egy kártya) megjelenhet egy széles fő terület vagy a szűk oldalsáv ugyanazon az oldalon. A viewport szélessége nem tudja megmondani, hogy a komponens valójában mennyi hellyel rendelkezik.
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
Most ugyanaz a kártya automatikusan vízszintes elrendezésre vált, amikor a tárolója ≥400px — függetlenül attól, hogy a képernyő nagy, vagy egy széles oszlopban van. A komponens valóban kontextus-független és újrahasználható válik.
A mobilközötti tartja a reszponzív CSS-t könnyűnek és karbantarthatónak.
A container lekérdezések nagy előrelépés: lehetővé teszik az összetevőknek, hogy a saját rendelkezésre álló helyükre válaszoljanak, ami pontosan az, amire egy komponensalapú architektúrában szüksége van (tervezési rendszerek, újrahasználható kártyák/widgetek) ahol ugyanaz az összetevő sok környezetben jelenik meg.