Mobil-ilk (mobile-first) yanıt veren tasarım stratejisi nedir ve kapsayıcı sorgularını (container queries) nasıl uydurabiliriz?

Question

Accepted Answer

**Mobil-ilk** (mobile-first), temel stillerinizi **en küçük ekran** için yazmanız ve ardından daha büyük ekranlar için `min-width` media sorguları ile karmaşıklık *eklemek* anlamına gelir — masaüstünden başlayıp şeyler kaldırmak yerine.

## Mobil-ilk uygulamada

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

**Mobil-ilk neden kazanır:** temel CSS minimal kalır (mobil cihazlar sadece ihtiyaç duydukları şeyi alır — zayıf cihazlarda performans açısından iyi), ve siz karmaşıklığı *katmanlar*, bu da onu geçersiz kılmak/kaldırmaktan daha mantıklıdır. Ayrıca içeriğin bir sütundan birçok sütuna nasıl yeniden akıp aktığını eşleştirir.

## Media sorgularının sınırlaması

Media sorguları **görünüm alanına** (viewport) — tüm pencereye yanıt verir. Ancak yeniden kullanılabilir bir bileşen (örneğin bir kart) aynı sayfadaki geniş bir ana alanda *veya* dar bir kenar çubuğunda görünebilir. Görünüm alanı genişliği, *bileşenin* gerçekte ne kadar alan olduğunu söyleyemez.

## Kapsayıcı sorguları bunu çözer

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

Şimdi aynı kart, *kapsayıcısı* ≥400px olduğunda otomatik olarak yatay düzene geçer — bunun ekranın büyük olmasından veya geniş bir sütunda olmasından kaynaklanıyor olması fark etmez. Bileşen gerçekten **bağlamsız ve yeniden kullanılabilir** hale gelir.

## Birbirini tamamlarlar

- **Media sorguları** — sayfa düzeyi düzen, küresel kırılım noktaları, kullanıcı tercihleri (koyu mod, azaltılmış hareket).
- **Kapsayıcı sorguları** — yeniden kullanılabilir bileşenler için bileşen düzeyi yanıt verme.

## Neden önemli

Mobil-ilk, yanıt veren CSS'yi lean (yalın) ve bakımı yapılabilir tutar.

Kapsayıcı sorguları önemli bir ilerleme: bileşenlerin kendi *mevcut alanlarına* yanıt vermesine izin verirler, bu da bileşen tabanlı mimaride (tasarım sistemleri, yeniden kullanılabilir kartlar/widget'lar) tam olarak ihtiyacınız olan şeydir; burada aynı bileşen birçok bağlama gider.