Geleneksel medya sorguları (@media) ekran boyutunu baz alarak responsive tasarım yapmamızı sağlarken, yeni nesil Container Queries (@container) elementin kendi ana kapsayıcısının boyutuna göre tepki vermesini sağlar.
Neden Container Queries?
Özellikle tekrar kullanılabilir bağımsız component mimarilerinde (örneğin kartlar veya yan menüler), sayfa genişliğinden bağımsız olarak eklendiği bölmenin genişliğine göre şekil almaları çok daha esnek bir tasarım sunar.
/* (c) CodeMareFi - codemarefi.com.tr */
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card-layout {
display: flex;
flex-direction: row;
}
}Modern CSS Grid & Flexbox İpuçları
Sayfayı tamamen dolduran esnek yapılar kurarken karmaşık JavaScript hesaplamalarından kaçının. CSS'in sunduğu modern birimler (clamp, minmax, vmin) kullanarak en karmaşık ekran uyumluluklarını bile tek satırla çözebilirsiniz.