v2.5.1
Giri┼č yap

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?

tayfunerbilen
193 g├╝n ├Ânce yazd─▒ - 715 kez g├Âr├╝nt├╝lendi.
├ľnceki CSS ile Hamburger Menu Yap─▒m─▒ Sonraki CSS inset ├ľzelli─či