Mobile-first znači da napišete osnovne stilove za najmanju zaslon, zatim dodajete složenost za veće zaslone s min-width media upitima — umjesto da počnete od stolnog računala i uklanjate sve.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Zašto mobilni pristup pobjeđuje: osnovni CSS ostaje minimalan (mobilni uređaj dobiva samo ono što mu treba — dobro za performanse na slabijim uređajima), a vi gradite složenost, što je lakše razumjeti nego prepisati/ukloniti. To također odgovara kako sadržaj prirodno tječe od jednog stupca na više.
Media upiti odgovaraju na viewport — cijeli prozor. Ali ponovno upotrebljiva komponenta (recimo karticu) može se pojaviti u široko glavnom području ili uskom bočnom stupcu na istoj stranici. Širina viewport-a vam ne može reći koliko prostora komponenta zapravo ima.
.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; }
}
Sada ista kartica automatski prelazi na vodoravni raspored kad god je njen spremniku ≥400px — bilo jer je zaslon velik ili jer je u širokom stupcu. Komponenta postaje stvarno neovisna od konteksta i ponovno upotrebljiva.
Mobilni pristup čini odgovarajući CSS laganim i održivim.
Container upiti su veliki korak naprijed: omogućuju komponentama da odgovore na njihov vlastiti dostupan prostor, što je točno ono što vam trebate u arhitekturi temeljnoj na komponentama (dizajnerski sustavi, ponovno upotrebljive kartice/widgeti) gdje ista komponenta dolazi u mnogo konteksta.