Mikä on mobile-first responsive-strategia ja miten container queries sopivat siihen?

Question

Accepted Answer

**Mobile-first** tarkoittaa perustyylien kirjoittamista **pienimmälle näytölle** ja sitten monimutkaisuuden *lisäämistä* suuremmille näytöille käyttämällä `min-width` media kyselyitä — sen sijaan että aloittaisit työpöydältä ja poistaisit asioita.

## Mobile-first käytännössä

```css
/* base: mobile — single column, simple */
.layout { display: grid; gap: 1rem; }

/* enhance for tablet and up */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 2fr; }
}
/* enhance further for desktop */
@media (min-width: 1200px) {
  .layout { grid-template-columns: 1fr 2fr 1fr; }
}
```

**Miksi mobile-first voittaa:** perus-CSS pysyy minimalistisena (mobiili saa vain mitä tarvitsee — hyvä suorituskyvylle heikompiin laitteisiin), ja *kerroksella* lisäät monimutkaisuutta, mikä on helpompi ymmärtää kuin ohittaa/poistaa. Se sopii myös siihen, miten sisältö luonnollisesti virtaa yhdestä sarakkeesta moniin.

## Media kyselyiden rajoitus

Media kyselyt reagoivat **viewport**iin — koko ikkunaan. Mutta uudelleenkäytettävä komponentti (esimerkiksi kortti) voi ilmestyä laajoilla pääalueella *tai* kapealla sivupalkin päällä samalla sivulla. Näytön leveys ei voi kertoa sinulle, kuinka paljon tilaa *komponentilla* todella on.

## Container queries ratkaisevat tämän

```css
.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; }
}
```

Nyt sama kortti vaihtaa automaattisesti vaakasuuntaiseen asetteluun, kun *sen säiliö* on ≥400px — riippumatta siitä, johtuu se siitä, että näyttö on iso vai siitä, että se on laajoilla sarakkeella. Komponentti tulee todella **kontekstista riippumattomaksi ja uudelleenkäytettäväksi**.

## Ne täydentävät toisiaan

- **Media kyselyt** — sivun tason asettelu, globaali breakpointit, käyttäjän asetukset (pimeä tila, vähennetty liike).
- **Container queries** — komponentin tason reagointikyvykkyydet uudelleenkäytettäville komponenteille.

## Miksi sillä on merkitystä

Mobile-first pitää responsive CSS:n kevyenä ja ylläpidettävänä.

Container queries ovat iso edistysaskel: ne antavat komponenteille mahdollisuuden reagoida omaan *käytettävissään olevaan* tilaan, mikä on täsmälleen mitä tarvitset komponenttipohjaissa arkkitehtuurissa (suunnittelujärjestelmät, uudelleenkäytettävät kortit/pienoisohjelmat), joissa sama komponentti ilmestyy monissa yhteyksissä.