Konuyu Açan
#1
Bir kartı ana sayfada geniş bir alana koyunca başka, kenar çubuğuna taşıyınca başka görünmesi gerekiyor. Ama çoğu şablonda hâlâ “ekran şu genişliğe düşünce düzeni değiştir” diye düşünüyoruz. Bileşen, bulunduğu alanı bilseydi daha esnek şablonlar hazırlayabilir miydik?
Container query yaklaşımı bu açıdan hoşuma gidiyor: aynı kartı farklı sayfalarda kullanırken her yer için ayrı sınıf ya da yeni bir kopya üretmek gerekmeyebilir. Mesela masaüstünde iki sütunlu duran ürün kartı dar bir içerik alanına girdiğinde kendi kendine tek sütuna geçebilir. Böylece sayfanın tamamını değil, parçaları tasarlamış oluruz.
Öte yandan her bileşenin kendi kuralları olunca CSS’i takip etmek zorlaşabilir. Bir de küçük ekranda yalnızca görünüşü küçültmek yetmiyor; metnin okunması, klavyeyle gezinme ve dokunma alanlarının rahatlığı da tasarımın parçası olmalı. Ben olsam önce birkaç temel bileşende dener, gerçekten tekrar kullanılabilir olup olmadığına bakardım.
Siz yeni bir şablon kurarken düzeni ekran boyutlarına göre mi, bileşenlerin yerleşeceği alana göre mi tasarlıyorsunuz? Container query kullanan varsa hangi tür bileşenlerde en çok işinize yaradı?
Container query yaklaşımı bu açıdan hoşuma gidiyor: aynı kartı farklı sayfalarda kullanırken her yer için ayrı sınıf ya da yeni bir kopya üretmek gerekmeyebilir. Mesela masaüstünde iki sütunlu duran ürün kartı dar bir içerik alanına girdiğinde kendi kendine tek sütuna geçebilir. Böylece sayfanın tamamını değil, parçaları tasarlamış oluruz.
Öte yandan her bileşenin kendi kuralları olunca CSS’i takip etmek zorlaşabilir. Bir de küçük ekranda yalnızca görünüşü küçültmek yetmiyor; metnin okunması, klavyeyle gezinme ve dokunma alanlarının rahatlığı da tasarımın parçası olmalı. Ben olsam önce birkaç temel bileşende dener, gerçekten tekrar kullanılabilir olup olmadığına bakardım.
Siz yeni bir şablon kurarken düzeni ekran boyutlarına göre mi, bileşenlerin yerleşeceği alana göre mi tasarlıyorsunuz? Container query kullanan varsa hangi tür bileşenlerde en çok işinize yaradı?