Modern CSS Yerleşimleri: Kapsayıcı Sorgularına Derinlemesine Bakış

Yıllardır, medya sorguları (media queries) duyarlı web tasarımının temel taşı olmuştur. Düzenlerimizi görüntü alanı (viewport) boyutuna göre uyarlamamıza olanak tanırlar. Ancak, medya sorguları tarayıcı penceresinin boyutlarına göre çalışır, bu da özellikle yeniden kullanılabilir bileşenlerle uğraşırken bazen garip durumlara yol açabilir. Karşınızda Kapsayıcı Sorguları (Container Queries) – bileşenlerin genel görüntü alanı yerine içinde bulundukları öğenin boyutuna göre uyum sağlamasına olanak tanıyan, oyunun kurallarını değiştiren bir CSS özelliği.

Kapsayıcı Sorguları Nedir?

Çoğu modern tarayıcı tarafından resmi olarak desteklenen Kapsayıcı Sorguları, duyarlı tasarıma daha ayrıntılı ve bileşen odaklı bir yaklaşım sunar. Bağımsız bileşenlerin, görüntü alanı boyutundan bağımsız olarak, ebeveyn kapsayıcılarının boyutlarına göre görünüşlerini ve davranışlarını ayarlamalarını sağlarlar. Bu, özellikle karmaşık düzenler ve tasarım sistemleriyle çalışırken daha fazla esneklik ve yeniden kullanılabilirlik sağlar.

Dar bir kenar çubuğuna mı yoksa geniş bir ana içerik alanına mı yerleştirildiğine bağlı olarak farklı görüntülenmesi gereken bir kart bileşeni hayal edin. Medya sorgularıyla, görüntü alanı boyutuna güvenmeniz ve potansiyel olarak CSS kurallarını kopyalamanız gerekirdi. Kapsayıcı sorgularıyla ise, kart bileşeni kapsayıcısı içindeki mevcut alana göre akıllıca uyum sağlayabilir.

Neden Kapsayıcı Sorguları Kullanmalısınız?

İşte Kapsayıcı Sorgularını kullanmanın temel avantajlarının bir dökümü:

• Geliştirilmiş Bileşen Yeniden Kullanılabilirliği: Bileşenler gerçekten bağımsız hale gelir ve belirli görüntü alanı boyutlarına sıkı sıkıya bağlı kalmadan web sitenizin veya uygulamanızın farklı bölümlerinde sorunsuzca yeniden kullanılabilir. Bir haber makalesi kartını düşünün: sadece içinde bulunduğu sütunun genişliğine bağlı olarak bir yan sütunda ana gövdeye göre farklı görüntülenebilir.
• Daha Esnek Yerleşimler: Kapsayıcı Sorguları, özellikle bileşenlerin bağlamlarına göre farklı tepki vermesi gereken karmaşık tasarımlarla uğraşırken daha incelikli ve uyarlanabilir yerleşimlere olanak tanır. Bir e-ticaret ürün listeleme sayfasını düşünün. Satır başına düşen öğe sayısını *ekran* genişliğine göre değil, kendisi de değişebilen *ürün listeleme kapsayıcısının* genişliğine göre değiştirebilirsiniz.
• Azaltılmış CSS Şişkinliği: Duyarlı mantığı bileşenler içinde kapsülleyerek, yinelenen CSS kurallarından kaçınabilir ve daha sürdürülebilir ve düzenli stil sayfaları oluşturabilirsiniz. Her bileşen için belirli görüntü alanı boyutlarını hedefleyen birden fazla medya sorgusu yerine, duyarlı davranışı doğrudan bileşenin CSS'i içinde tanımlayabilirsiniz.
• Daha İyi Kullanıcı Deneyimi: Bileşenlerin sunumunu kendi özel bağlamlarına göre uyarlayarak, farklı cihazlarda ve ekran boyutlarında daha tutarlı ve sezgisel bir kullanıcı deneyimi yaratabilirsiniz. Örneğin, bir gezinme menüsü daha küçük bir kapsayıcı içinde daha kompakt bir forma dönüşerek alanı ve kullanılabilirliği optimize edebilir.
• Gelişmiş Tasarım Sistemi Yetenekleri: Kapsayıcı Sorguları, farklı bağlamlara ve yerleşimlere sorunsuzca entegre olan yeniden kullanılabilir bileşenler oluşturmanıza olanak tanıyarak, sağlam ve uyarlanabilir tasarım sistemleri oluşturmak için güçlü bir araçtır.

Kapsayıcı Sorgularına Başlarken

Kapsayıcı Sorgularını kullanmak birkaç temel adımı içerir:

1. Kapsayıcı Tanımlama: `container-type` özelliğini kullanarak bir öğeyi kapsayıcı olarak belirleyin. Bu, sorgunun çalışacağı sınırları belirler.
2. Sorgu Tanımlama: `@container` at-kuralını kullanarak sorgu koşullarını tanımlayın. Bu, `@media` kuralına benzer, ancak görüntü alanı özellikleri yerine kapsayıcı özelliklerini sorgularsınız.
3. Stil Uygulama: Sorgu koşulları karşılandığında uygulanması gereken stilleri uygulayın. Bu stiller yalnızca kapsayıcı içindeki öğeleri etkileyecektir.

1. Kapsayıcının Kurulumu

İlk adım, hangi öğenin kapsayıcı olarak hareket edeceğini tanımlamaktır. Bunun için `container-type` özelliğini kullanabilirsiniz. Birkaç olası değer vardır:

• `size`: Kapsayıcı hem satır içi (genişlik) hem de blok (yükseklik) boyutlarını izleyecektir.
• `inline-size`: Kapsayıcı yalnızca satır içi boyutunu (genellikle genişlik) izleyecektir. Bu en yaygın ve performanslı seçimdir.
• `normal`: Öğe bir sorgu kapsayıcısı değildir (varsayılan).

İşte bir örnek:

.card-container {
  container-type: inline-size;
}

Bu örnekte, `.card-container` öğesi, satır içi boyutunu (genişliğini) izleyen bir kapsayıcı olarak belirlenmiştir.

2. Kapsayıcı Sorgusunu Tanımlama

Ardından, `@container` at-kuralını kullanarak sorgunun kendisini tanımlayacaksınız. Burası, sorgu içindeki stillerin uygulanması için karşılanması gereken koşulları belirttiğiniz yerdir.

İşte kapsayıcının en az 500 piksel genişliğinde olup olmadığını kontrol eden basit bir örnek:

@container (min-width: 500px) {
  .card {
    flex-direction: row; /* Kart düzenini değiştir */
  }
}

Bu örnekte, eğer `.card-container` öğesi en az 500 piksel genişliğindeyse, `.card` öğesinin `flex-direction` özelliği `row` olarak ayarlanacaktır.

Ayrıca `max-width`, `min-height`, `max-height` kullanabilir ve hatta `and` ve `or` gibi mantıksal operatörler kullanarak birden fazla koşulu birleştirebilirsiniz.

@container (min-width: 300px) and (max-width: 700px) {
  .card-title {
    font-size: 1.2em;
  }
}

Bu örnek, stilleri yalnızca kapsayıcının genişliği 300 piksel ile 700 piksel arasında olduğunda uygular.

3. Stilleri Uygulama

`@container` at-kuralı içinde, kapsayıcı içindeki öğelere istediğiniz herhangi bir CSS stilini uygulayabilirsiniz. Bu stiller yalnızca sorgu koşulları karşılandığında uygulanacaktır.

İşte tüm adımları birleştiren eksiksiz bir örnek:

  

    
Ürün Başlığı
    
Ürünün kısa bir açıklaması.
    Daha Fazla Bilgi
  

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 1em;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-title {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.card-button {
  background-color: #007bff;
  color: white;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 5px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }

  .card-title {
    font-size: 1.8em;
  }
}

Bu örnekte, `.card-container` en az 500 piksel genişliğinde olduğunda, `.card` öğesi yatay bir düzene geçecek ve `.card-title` boyut olarak büyüyecektir.

Kapsayıcı İsimleri

Kapsayıcılara `container-name: my-card;` kullanarak bir isim verebilirsiniz. Bu, özellikle iç içe kapsayıcılarınız varsa, sorgularınızda daha spesifik olmanızı sağlar.

.card-container {
  container-type: inline-size;
  container-name: my-card;
}

@container my-card (min-width: 500px) {
  /* "my-card" isimli kapsayıcı en az 500px genişliğinde olduğunda uygulanan stiller */
}

Bu, bir sayfada birden fazla kapsayıcınız olduğunda ve sorgularınızla belirli bir tanesini hedeflemek istediğinizde özellikle kullanışlıdır.

Kapsayıcı Sorgu Birimleri

Tıpkı medya sorgularında olduğu gibi, kapsayıcı sorgularının da kapsayıcıya göreceli olan kendi birimleri vardır. Bunlar:

• `cqw`: Kapsayıcının genişliğinin %1'i.
• `cqh`: Kapsayıcının yüksekliğinin %1'i.
• `cqi`: Kapsayıcının satır içi boyutunun %1'i (yatay yazı modlarında genişlik).
• `cqb`: Kapsayıcının blok boyutunun %1'i (yatay yazı modlarında yükseklik).
• `cqmin`: `cqi` veya `cqb`'den küçük olanı.
• `cqmax`: `cqi` veya `cqb`'den büyük olanı.

Bu birimler, kapsayıcıya göreceli boyutları ve boşlukları tanımlamak için kullanışlıdır ve düzenlerinizin esnekliğini daha da artırır.

.element {
  width: 50cqw;
  font-size: 2cqmin;
}

Pratik Örnekler ve Kullanım Alanları

İşte daha uyarlanabilir ve yeniden kullanılabilir bileşenler oluşturmak için Kapsayıcı Sorgularını nasıl kullanabileceğinize dair bazı gerçek dünya örnekleri:

1. Duyarlı Gezinme Menüsü

Bir gezinme menüsü, kapsayıcısındaki mevcut alana göre düzenini uyarlayabilir. Dar bir kapsayıcıda, bir hamburger menüsüne dönüşebilirken, daha geniş bir kapsayıcıda tüm menü öğelerini yatay olarak görüntüleyebilir.

2. Uyarlanabilir Ürün Listeleme

Bir e-ticaret ürün listesi, kapsayıcısının genişliğine göre satır başına görüntülenen ürün sayısını ayarlayabilir. Daha geniş bir kapsayıcıda, satır başına daha fazla ürün görüntüleyebilirken, daha dar bir kapsayıcıda kalabalığı önlemek için daha az ürün görüntüleyebilir.

3. Esnek Makale Kartı

Bir makale kartı, mevcut alana göre düzenini değiştirebilir. Bir kenar çubuğunda, küçük bir küçük resim ve kısa bir açıklama görüntüleyebilirken, ana içerik alanında daha büyük bir resim ve daha ayrıntılı bir özet görüntüleyebilir.

4. Dinamik Form Elemanları

Form elemanları, kapsayıcıya göre boyutlarını ve düzenlerini uyarlayabilir. Örneğin, bir arama çubuğu bir web sitesinin başlığında daha geniş, bir kenar çubuğunda ise daha dar olabilir.

5. Gösterge Paneli Widget'ları

Gösterge paneli widget'ları, içeriklerini ve sunumlarını kapsayıcılarının boyutuna göre ayarlayabilir. Bir grafik widget'ı daha büyük bir kapsayıcıda daha fazla veri noktası gösterebilir ve daha küçük bir kapsayıcıda daha az veri noktası gösterebilir.

Genel Değerlendirmeler

Kapsayıcı Sorgularını kullanırken, tasarım seçimlerinizin küresel etkilerini göz önünde bulundurmak önemlidir.

• Yerelleştirme: Düzenlerinizin farklı dillere ve metin yönlerine zarif bir şekilde uyum sağladığından emin olun. Bazı diller diğerlerinden daha fazla alan gerektirebilir, bu nedenle değişen metin uzunluklarını barındırabilen esnek düzenler tasarlamak önemlidir.
• Erişilebilirlik: Kapsayıcı sorgularınızın erişilebilirliği olumsuz etkilemediğinden emin olun. Düzenlerinizi yardımcı teknolojilerle test ederek engelli insanlar için kullanılabilir kaldıklarından emin olun.
• Performans: Kapsayıcı sorguları önemli esneklik sunsa da, bunları akıllıca kullanmak önemlidir. Kapsayıcı sorgularını aşırı kullanmak, özellikle karmaşık düzenlerde performansı potansiyel olarak etkileyebilir.
• Sağdan Sola (RTL) Diller: Arapça veya İbranice gibi RTL dilleri için tasarım yaparken, kapsayıcı sorgularınızın düzen yansıtmasını doğru bir şekilde ele aldığından emin olun. `margin-left` ve `margin-right` gibi özelliklerin dinamik olarak ayarlanması gerekebilir.

Tarayıcı Desteği ve Polyfill'ler

Kapsayıcı Sorguları, Chrome, Firefox, Safari ve Edge dahil olmak üzere modern tarayıcılarda iyi bir desteğe sahiptir. Ancak, eski tarayıcıları desteklemeniz gerekiyorsa, @container-style/container-query gibi bir polyfill kullanabilirsiniz. Bu polyfill, yerel olarak desteklemeyen tarayıcılara kapsayıcı sorguları desteği ekler.

Kapsayıcı Sorgularını bir üretim ortamında kullanmadan önce, mevcut tarayıcı desteğini kontrol etmek ve gerekirse bir polyfill kullanmayı düşünmek her zaman iyi bir fikirdir.

En İyi Uygulamalar

Kapsayıcı Sorguları ile çalışırken akılda tutulması gereken bazı en iyi uygulamalar şunlardır:

• Önce Mobil ile Başlayın: Düzenlerinizi önce daha küçük kapsayıcılar için tasarlayın ve ardından Kapsayıcı Sorgularını kullanarak bunları daha büyük kapsayıcılar için geliştirin. Bu yaklaşım, tüm cihazlarda iyi bir kullanıcı deneyimi sağlar.
• Anlamlı Kapsayıcı Adları Kullanın: Kodunuzu daha okunabilir ve sürdürülebilir hale getirmek için açıklayıcı kapsayıcı adları kullanın.
• Kapsamlı Test Edin: Kapsayıcı Sorgularınızın beklendiği gibi çalıştığından emin olmak için düzenlerinizi farklı tarayıcılarda ve ekran boyutlarında test edin.
• Basit Tutun: Aşırı karmaşık Kapsayıcı Sorguları oluşturmaktan kaçının. Sorgularınız ne kadar karmaşık olursa, anlaşılması ve sürdürülmesi o kadar zor olacaktır.
• Performansı Göz Önünde Bulundurun: Kapsayıcı Sorguları önemli esneklik sunsa da, performansa dikkat etmek önemlidir. Tek bir sayfada çok fazla Kapsayıcı Sorgusu kullanmaktan kaçının ve oluşturma performansı üzerindeki etkiyi en aza indirmek için CSS'inizi optimize edin.

Kapsayıcı Sorguları ve Medya Sorguları: Bir Karşılaştırma

Hem Kapsayıcı Sorguları hem de Medya Sorguları duyarlı tasarım için kullanılsa da, farklı prensiplerle çalışırlar ve farklı senaryolar için en uygun olanlardır.

Özellik	Kapsayıcı Sorguları	Medya Sorguları
Hedef	Kapsayıcı boyutu	Görüntü alanı boyutu
Kapsam	Bileşen seviyesi	Global
Yeniden kullanılabilirlik	Yüksek	Daha Düşük
Özgüllük	Daha özgül	Daha az özgül
Kullanım Alanları	Bireysel bileşenleri bağlamlarına uyarlama	Genel yerleşimi farklı ekran boyutlarına uyarlama

Genel olarak, Kapsayıcı Sorguları bireysel bileşenleri bağlamlarına uyarlamak için daha uygunken, Medya Sorguları genel yerleşimi farklı ekran boyutlarına uyarlamak için daha uygundur. Hatta daha karmaşık düzenler için her ikisini de birleştirebilirsiniz.

CSS Yerleşimlerinin Geleceği

Kapsayıcı Sorguları, CSS yerleşimlerinin evriminde önemli bir adımı temsil eder. Bileşenlerin kapsayıcılarına göre uyum sağlamalarını sağlayarak, daha esnek, yeniden kullanılabilir ve sürdürülebilir kod yazmayı mümkün kılarlar. Tarayıcı desteği artmaya devam ettikçe, Kapsayıcı Sorguları ön uç geliştiricileri için vazgeçilmez bir araç haline gelmeye adaydır.

Sonuç

Kapsayıcı Sorguları, CSS dünyasına güçlü bir ektir ve duyarlı tasarıma daha bileşen merkezli bir yaklaşım sunar. Nasıl çalıştıklarını ve nasıl etkili bir şekilde kullanılacaklarını anlayarak, daha uyarlanabilir, yeniden kullanılabilir ve sürdürülebilir web uygulamaları oluşturabilirsiniz. Kapsayıcı Sorgularını benimseyin ve CSS yerleşimlerinizde yeni bir esneklik seviyesinin kilidini açın!