Konuyu Açan
#1
Aynı kart bileşenini hem dar bir yan panelde hem de geniş içerik alanında kullanınca, ekran genişliğine göre çalışan media query’ler bazen ters köşe yapıyor. Telefon ekranında kart geniş görünebilir, ama masaüstündeki dar sütunda hâlâ yatay düzen için yeterli alan olmayabilir.
Bu tür durumlarda container query’ler daha uygun geliyor: bileşenin düzenini ekranın değil, bulunduğu alanın genişliğine göre değiştirebiliyoruz. Örneğin:
Burada önemli nokta, sorgunun çalışması için üst elemana
Yalnız her şeyi container query’ye taşımak da gereksiz karmaşa yaratabiliyor; gerçekten bileşenin bulunduğu alana göre değişmesi gereken yerlerde kullanmak daha temiz.
Siz projelerde container query’leri kullanmaya başladınız mı? Hangi bileşenlerde media query’den daha iyi sonuç verdi?
Bu tür durumlarda container query’ler daha uygun geliyor: bileşenin düzenini ekranın değil, bulunduğu alanın genişliğine göre değiştirebiliyoruz. Örneğin:
KOD
12345678910111213141516
.kart-alani {
container-type: inline-size;
}
.kart {
display: block;
}
@container (min-width: 32rem) {
.kart {
display: grid;
grid-template-columns: 10rem 1fr;
gap: 1rem;
}
}
Burada önemli nokta, sorgunun çalışması için üst elemana
container-type vermek. Yoksa @container kuralı beklediğimiz kapsayıcıyı bulamaz. Ben genelde sayfanın genel iskeletini ve gezinme menüsünü media query ile, farklı alanlarda tekrar kullanılan kart, ürün özeti gibi parçaları ise container query ile ele alıyorum.Yalnız her şeyi container query’ye taşımak da gereksiz karmaşa yaratabiliyor; gerçekten bileşenin bulunduğu alana göre değişmesi gereken yerlerde kullanmak daha temiz.
Siz projelerde container query’leri kullanmaya başladınız mı? Hangi bileşenlerde media query’den daha iyi sonuç verdi?