Media ve Container Queries

CSS içinde media ve container queries kavramını, kullanım sınırlarını ve güvenilir uygulama biçimini öğrenin.

Media ve Container Queries, CSS ile duyarlı tasarım çalışırken bileşenler arasındaki sorumlulukları belirginleştirmek için kullanılan yaklaşımı açıklar. Duyarlı tasarım cihaz adına değil mevcut alana ve kullanıcı tercihlerine göre uyarlanır.

Keskin kırılma noktalarını çoğaltmak yerine akışkan ölçüler, içerik tabanlı eşikler ve hareket azaltma tercihleri kullanılmalıdır. İsimlendirme, küçük sorumluluklar ve görünür veri akışı; kodun yalnızca çalışmasını değil, anlaşılmasını da sağlar. Aşağıdaki örnek, konuyu küçük ve izlenebilir bir akış içinde gösterir.

Yaygın hata ve doğru yaklaşım

Girdi, çıktı ve hata sözleşmesini belirsiz bırakmak çağıran kodu kırılgan hâle getirir. Normal akış kadar başarısızlık davranışını da açıkça tasarlayın.

Sonuç

Media ve Container Queries, doğru sınırlar ve açık bir sözleşmeyle kullanıldığında CSS kodunun güvenilirliğini artırır. Önce doğruluğu kurun; ölçüm göstermeden karmaşık optimizasyona yönelmeyin.

Media ve Container Queries örneği

.page {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

@container (min-width: 36rem) {
  .lesson { display: grid; grid-template-columns: 2fr 1fr; }
}