Yıllardır CSS medya sorgusu, duyarlı web tasarımının temel taşı olmuştur. Geliştiricilerin düzenleri ekran boyutuna göre—mobil, tablet veya masaüstü—uyarlamasını sağlardı. Ancak bu yaklaşımın temel bir sınırlaması vardır: Bileşenler, sayfanın boyutuna göre değil, kendi kapsayıcılarının boyutuna göre stillendirilir. Modern bir ön uç mimarisinde bu durum, genellikle bileşenin DOM'da nerede yer aldğına bağlı olarak farklı davranan şişkin bir koda yol açar. Bileşen tabanlı tasarımın manzarasını değiştiren iki güçlü CSS özelliği devreye giriyor: Container Queries ve CSS Subgrid.
Ekran Tabanlı Stillerin Sınırlaması
Masaüstünde büyük bir resim ve detaylı metin gösteren ancak mobilde sıkıştırılmış bir liste görünümüne geçen bir kart bileşeni hayal edin. Geleneksel olarak, bu durum değişikliğini yönetmek için karmaşık medya sorguları yazmanız gerekirdi. Peki, aynı kart bileşenini masaüstünde bir kenar çubuğuna yerleştirirseniz ne olur? Ekran geniş olsa bile kenar çubuğu dar olduğu için sıkıştırılmış görünüme geçmesi gerekebilir. Medya sorgularıyla, mantığı kopyalamak veya JavaScript hileleri kullanmak zorunda kalmadan bunu kolayca gerçekleştiremezsiniz.
İşte Container Queries burada parlar. Stillerin ebeveyn kapsayıcının boyutlarına göre uyarlanmasına olanak tanıyarak gerçekten modüler, kendi kendine yeten bileşenler sağlar. Bir bileşen artık bağlamının farkında olabilir ve değişiklik yapmadan farklı düzenlerde yeniden kullanılabilir hale gelir.
Container Queries Uygulama
Container queries kullanmak için önce ebeveyn öğede bir container-type tanımlamanız gerekir. Bu, öğeyi bir container query kapsayıcısı olarak kurar. Ardından @container kurallarını kullanarak belirli boyutları sorgulayabilirsiniz.
.card-wrapper {
/* Kapsayıcı türünü tanımla */
container-type: inline-size;
}
.card {
display: flex;
flex-direction: column;
}
/* Kapsayıcının genişliğini sorgula */
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card-image {
width: 40%;
}
.card-content {
width: 60%;
}
}Bu örnekte, kart kapsayıcısı en az 400px genişliğe ulaşana kadar dikey olarak yığılır, ardından yatay bir düzene geçer. Bu mantık bileşen içinde kapsüllenmiştir, bu da onu öngörülebilir ve taşınabilir kılar.
CSS Subgrid ile Hizalamanın Kilidini Açma
Container queries duyarlılık sorununu çözerken, iç içe geçmiş ızgara öğelerini ebeveyn ızgara sütunlarıyla hizalama tarihsel olarak zordu. CSS Subgrid'den önce, bir ızgaranın içinde başka bir ızgara varsa, içteki öğeler kendi sütun izi tanımlamalarını oluştururdu ve bu da genellikle dış ızgara ile hizalama bozukluğuna yol açardı.
CSS Subgrid, iç bir ızgaranın sütun (veya satır) izlerini ebeveyn ızgaradan miras almasını sağlar. Bu, panolar, ürün gridleri veya veri tabloları gibi karmaşık düzenlerde sıkı bir hizalamanın korunması için kritiktir.
.outer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.inner-card {
display: grid;
/* Ebeveynin sütun izlerini miras al */
grid-template-columns: subgrid;
grid-column: span 3; /* Tüm ebeveyn sütunları boyunca uzan */
gap: 0.5rem;
}
.inner-item {
background: #f0f0f0;
padding: 1rem;
}Yukarıdaki kodda, .inner-card, .outer-grid'ün üç sütununu kaplar. grid-template-columns: subgrid ayarlanarak, .inner-card içindeki öğeler kendi ızgara bağlamlarına sahip olsalar bile dış ızgaranın üç sütunuyla mükemmel bir şekilde hizalanır. Bu, iç içe geçmiş flexbox veya geleneksel gridlerle neredeyse imkansız olan temiz, matematiksel olarak hassas bir düzen yaratır.
Güçlü Düzenler İçin Birlikte Kullanma
Bu özelliklerin gerçek gücü, birleştirildiklerinde ortaya çıkar. Dahili veri noktalarını ana grid ile hizalamak için Subgrid kullanırken, mevcut alana göre iç yapısını değiştirmek için Container Queries kullanarak bir panel widget'ı oluşturabilirsiniz. Bu sinerji, son derece duyarlı, sürdürülebilir ve anlamsal olarak temiz CSS mimarilerine olanak tanır.
Her iki özellik için de tarayıcı desteği evrensel bir düzeye yaklaştıkça (şu anda tüm büyük modern tarayıcılarda desteklenmektedir), bu teknikleri benimseme zamanı tam da şimdi. Ekranla mücadele etmek yerine, kendi alanına saygı duyan bileşenler oluşturmaya başlayın. CSS'nin geleceği bileşen farkındalıklıdır ve Container Queries ile Subgrid, bunu inşa etmek için gerekli araçlara sahipsiniz.