CSS Container Sorguları
Responsive Design kavramı 25 Mayıs 2010 tarihinde Ethan Marcotte adlı bir arayüz tasarımcısı sayesinde hayatımıza girmişti. Responsive Web Design başlığı ile duyrulan bu fikir, her Frontend geliştiricisinin aktif olarak kullandığı bir özellik konumunda.
CSS Media Sorgularıyla İlgili Sorunlar
Responsive design harika fakat yetersiz kaldığı noktalar olabiliyor. Bunu bir örnek üzerinden kavramaya çalışalım.
Aşağıdaki tasarımda görüldüğü gibi, Top Articles ve Latest Articles başlığı altında article bileşenimizi çağıralım. Farkındaysanız soldaki bileşende görsel üstte, başlık ve açıklaması altında kalıyorken; sağdaki bileşenlerde görsel solda, detaylar sağında kalıyor.
Responsive kod yazarken @media sorguları kullandığımız için CSS koşulumuz sayfanın genişliğini baz alarak hesaplama yapacaktır. Haliyle tasarımdaki gibi hem alt alta yada hemde yan yana görüntülemek için sağdaki alanın kapsayıcısına class ekleyerek (örnekte .c-article--horizontal sınıfı) oraya özel CSS’ler yazmamız gerekiyor.
Peki bu class’ı yazmazsak nasıl görünecekti? Aynı bileşen kullanıldığı için bulunduğu alana yayılarak daha büyük kartlarımız görünecekti; ama bizim istediğimiz sonuç bu değildi.
CSS Container Sorguları Bize Nasıl Yardımcı Olacak?
CSS Container sorgularında koşullar sayfa genişliğine göre değil, kapsayıcı genişliğine göre hareket edecekti. Görsel üzerinden anlamaya çalışalım;
Böylece ilk bölümde anlatılan problemlerin önüne geçebileceğiz. Kart daha geniş bir alana geçtiğinde, sayfa genişliğinden bağımsız olacak şekilde farklı stillere bürünebilecekler.
Container Sorguları Nasıl Çalışır?
Öncelikle CSS Container özelliğinin bu makaleyi yazdığım zaman diliminde henüz varsayılan olarak tarayıcı desteğinin olmadığını belirteyim. caniuse‘dan görüldüğü üzere container sorguları şimdilik sadece Chromium tabanlı olan Chrome, Edge ve Opera’da bulunuyor; fakat varsayılan olarak aktif değiller, bu özelliği aktif etmeniz gerekiyor. Diğer tarayıcılarda destek şimdilik bulunmuyor.
Chrome, Edge yada Opera’da chrome://flags adresine girerek CSS Container’ları aktifleştirip deneyebilirsiniz.
Kod kısmına geçecek olursak, bir bileşen üst genişliğine göre adapte olacağından, tarayıcıya tüm sayfayı değil, yalnızca etkilenen alanı yeniden boyamasını söylememiz gerekir. Bunu contain özelliği sayesinde tarayıcıya bildirebiliriz. İlk kısımlarda gösterdiğimiz gibi resim, başlık ve açıklama alanı içeren basit bir kart bileşeninin kodları şuna benzer olacaktır (Kod içerisindeki yorum satırlarını okumaya devam edin) ;
<section class="container">
<div class="article-wrap">
<!-- contain özelliğini vereceğimiz kapsayıcı --> <article class="article">
<!-- kartın kendisi --> <!-- içerik -->
</article>
</div> <div class="article-wrap">
<!-- contain özelliğini vereceğimiz kapsayıcı --> <article class="article">
<!-- kartın kendisi --> <!-- içerik -->
</article>
</div> <!-- diğer kartlar --></section>.article-wrap {
contain: layout inline-size;
/* kartların kapsayıcısına contain özelliği ekledik. */
}@container (min-width: 400px) {
/*
@container sorgusu ile kart bileşeni
400px'den fazla genişliğe sahip olduğunda
flex özelliklerini almasını sağlıyoruz.
Böylece resim ve içerik yan yana geçecek.
*/ .article {
display: flex;
flex-wrap: wrap;
} /* diğer CSS'ler */
}
Örnek bir çalışma videosunu kişisel blog sayfamda bulabilirsiniz.
Kişisel Blog Sitem: omergulcicek.com
Makaleyi alkışlayarak destek olabilirsiniz 🌹
