Konuyu Açan
#1
Bir kartı masaüstünde dar bir yan sütuna koyunca hâlâ geniş ekran düzeninde kalması size de tuhaf geliyor mu? Ben son zamanlarda responsive tasarımda asıl kırılma noktasının ekran genişliği değil, bileşenin kendisine ayrılan alan olduğunu düşünüyorum.
Container query’lerle kart, bulunduğu kapsayıcının genişliğine göre davranabiliyor. Böylece aynı bileşen ana içerikte yan yana, küçük bir panelde alt alta görünebiliyor:
Bence bunun iki önemli sonucu var. İlki, tasarım sistemi parçaları farklı sayfalara taşındığında daha az “bu sayfada niye bozuldu?” sürprizi çıkarıyor. İkincisi, gelecekte arayüzlerin kullanıcıya veya bağlama göre yeniden düzenlendiği senaryolarda bileşenlerin kendi alanını tanıması işe yarayabilir. Tabii her şeyi kapsayıcı sorgulara bağlamak da sihirli çözüm değil; içerik taşması, okunabilirlik ve klavye ile kullanım hâlâ ayrıca düşünülmeli.
Siz yeni bir kart ya da panel tasarlarken önce ekran kırılımlarını mı belirliyorsunuz, yoksa bileşenin farklı genişliklerde nasıl davranacağını mı? Gerçek projelerde container query’lere geçiş nasıl gidiyor?
Container query’lerle kart, bulunduğu kapsayıcının genişliğine göre davranabiliyor. Böylece aynı bileşen ana içerikte yan yana, küçük bir panelde alt alta görünebiliyor:
KOD
12345678910
.kart-alani {
container-type: inline-size;
}
@container (max-width: 28rem) {
.urun-karti {
grid-template-columns: 1fr;
}
}
Bence bunun iki önemli sonucu var. İlki, tasarım sistemi parçaları farklı sayfalara taşındığında daha az “bu sayfada niye bozuldu?” sürprizi çıkarıyor. İkincisi, gelecekte arayüzlerin kullanıcıya veya bağlama göre yeniden düzenlendiği senaryolarda bileşenlerin kendi alanını tanıması işe yarayabilir. Tabii her şeyi kapsayıcı sorgulara bağlamak da sihirli çözüm değil; içerik taşması, okunabilirlik ve klavye ile kullanım hâlâ ayrıca düşünülmeli.
Siz yeni bir kart ya da panel tasarlarken önce ekran kırılımlarını mı belirliyorsunuz, yoksa bileşenin farklı genişliklerde nasıl davranacağını mı? Gerçek projelerde container query’lere geçiş nasıl gidiyor?