CSS @container Sorguları

CSS ile ilgili eklenmesi istenen konular tartışıldıkça bizide bir heyecan basıyor :) Çok güzel konular tartışılıyor, nesting gibi, parent seçicisi gibi vs. @container sorguları ise şu an Chrome Canary sürümünde experimantal olarak eklenmiş bir özellik.

@container tıpkı @media sorguları gibi çalışan bir sorgu yapısı.

@media ile @container arasındaki fark nedir?

@media sorguları viewport değerini baz alırken, @container sorguları tahmin edebileceğiniz üzere kapsayıcının değerini baz alıyor. Bu da tabi ki bazı avantajları beraberinde getiriyor.

Hangi amaç için kullanılabilir?

Bu aslında bir kapsayıcıyı izleyip onun genişlik ya da yüksekliğine göre farklı stil işlemleri uygulayabilmek için kullanabileceğimiz bir sorgu. @media dan ziyade daha kişisel bir yaklaşım sergilememize olanak sağlıyor.

Daha iyi anlamak için size bir örnek vereyim. sidebar ve main olarak adlandırdığınız iki ana yapınız olsun. Ve bir user widget hazırladığınızı varsayalım. İstiyorsunuz ki, bu widget hangi alana koyulursa koyulsun doğru şekilde görünsün. Teknik olarak sidebar alanı daha küçük olacağı için widget'ın bazı alanları gizlensin, main alanı daha büyük olacağı için widget'da bazı görünmez alanlar öne çıksın.

Bunu nasıl yapabilirsiniz? Basit bir yolu yok, eğer @container sorgularını kullanmıyorsanız :)

HTML yapınız şöyle olsun

<div class="wrapper">
  <aside class="sidebar">
    <div class="widget">
      widget
    </div>
  </aside>
  <main class="main">
    <div class="widget">
      widget
    </div>
  </main>
</div>

Burada önemli olan sidebar ve main alanlarının contain: layout inline-size; değeri içeriyor olması. Bu olduktan sonra @container sorguları ile genişlik değiştiğinde ona göre widget lar için farklı stil işlemleri uygulayacağız. Şöyle ki;

* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
.wrapper {
  display: flex;
}
.sidebar {
  width: 300px;
  min-width: 300px;
  contain: layout inline-size;
}
.main {
  flex: 1;
  padding: 15px;
  contain: layout inline-size;
}
.widget {
  background: purple;
  color: #fff;
}

@container(max-width: 600px){
  .widget {
    background: darkorange;
  }
}

@container (max-width: 300px){
  .widget {
     background: green;
  }
}

Evet eğer main ya da sidebar alanlarında genişlik 300px'e eşit ya da küçükse widget arkaplanı green olacak, eğer 600px'e eşit ya da küçükse ve 300px'den büyükse widget alanı darkorange renginde olacak. Eğer 600px'den büyüksede widget alanı purple renginde olacak.

Yani aslında bu mantıkta @container (max-width: 300px) içinde yazacaklarımız widget'ın sidebar alanında gözüktüğünde ne olacağı ile igili. Yukarıdaki örneğe göre belki bazı elemanlar gizlenebilir font boyutları küçültülebilinir vs.

@container(max-width: 600px) ise yine tam anlamıyla büyük ölçüde olmasada sidebar'dan biraz daha büyük bir alan için css yazabileceğimiz bir alan.

Sonuç olarak

Ne zaman standart olarak kabul görür bilemiyorum, ancak olduğu taktirde büyük bir ilgi göreceği ve işe yarar bir çok alanda kullanılacağına eminim.

Belki standart haline geldiğinde kullanımıyla ilgili ufak tefek değişiklikler olabilir ancak genel olarak bir değişiklik olacağını sanmıyorum. Siz nasıl buldunuz, kullanacağınız yerler olur mu?