Konuyu Açan
#1
Bir kartı masaüstünde üç sütunda, mobilde tek sütunda göstermek kolay; asıl uğraştıran, aynı kartın dar bir yan panelde de düzgün görünmesini sağlamak. Medya sorgusu ekran genişliğine baktığı için bileşenin bulunduğu alanı her zaman anlatmıyor. Bu yüzden son projelerde kart gibi tekrar kullanılabilir parçalar için container query’leri deniyorum.
Örneğin:
Burada görünüm, ekranın değil kapsayıcının genişliğine göre değişiyor. Aynı kartı tam genişlikteki içerikte, dar bir sütunda veya modal içinde kullanınca her yer için ayrı medya sorgusu yazma ihtiyacı azalıyor.
Yine de her şeyi container query’ye taşımak şart değil. Sayfanın genel yerleşimi için viewport tabanlı medya sorguları hâlâ gayet mantıklı; bileşenin kendi düzenini belirlerken ise kapsayıcı genişliği daha doğru sinyal olabiliyor. Ayrıca sorgunun çalışması için doğru elemana kapsayıcı özelliğini vermek gerekiyor; yanlış seviyeye koyunca beklenen eşik hiç tetiklenmeyebiliyor.
Siz projelerinizde container query kullanıyor musunuz? Özellikle tasarım sistemi ya da tekrar kullanılan kart bileşenlerinde işinizi kolaylaştırdı mı?
Örneğin:
KOD
12345678910
.kart-listesi {
container-type: inline-size;
}
@container (max-width: 420px) {
.urun-karti {
grid-template-columns: 1fr;
}
}
Burada görünüm, ekranın değil kapsayıcının genişliğine göre değişiyor. Aynı kartı tam genişlikteki içerikte, dar bir sütunda veya modal içinde kullanınca her yer için ayrı medya sorgusu yazma ihtiyacı azalıyor.
Yine de her şeyi container query’ye taşımak şart değil. Sayfanın genel yerleşimi için viewport tabanlı medya sorguları hâlâ gayet mantıklı; bileşenin kendi düzenini belirlerken ise kapsayıcı genişliği daha doğru sinyal olabiliyor. Ayrıca sorgunun çalışması için doğru elemana kapsayıcı özelliğini vermek gerekiyor; yanlış seviyeye koyunca beklenen eşik hiç tetiklenmeyebiliyor.
Siz projelerinizde container query kullanıyor musunuz? Özellikle tasarım sistemi ya da tekrar kullanılan kart bileşenlerinde işinizi kolaylaştırdı mı?