CSS Container Queries Nedir? Bulunduğu Alana Uyum Sağlayan Kartlar

Bir blog kartı ana sayfanın geniş içerik alanında güzel görünebilir; aynı kartı dar bir kenar çubuğuna taşıdığınızda başlık sıkışır, görsel gereğinden fazla yer kaplar. Tarayıcı penceresi değişmediği için yalnızca ekran genişliğine bakan kurallar bu farkı yakalamayabilir. CSS Container Queries, bileşenin bulunduğu kapsayıcıya göre görünüm değiştirmesini sağlayarak bu duruma çözüm sunar.

Bu yazıda boyut sorgularına odaklanacağız. Aynı kartı farklı sütunlarda kullanabileceğimiz bir örnek üzerinden kapsayıcı tanımlamayı, kırılma noktası seçmeyi ve temel görünümü korumayı ele alacağız. Kodlar açıklama amaçlıdır; burada tarayıcıda çalıştırılarak test edilmemiştir.

Media query ile farkı nedir?

Ekran genişliğini sorgulayan bir media query, tarayıcının görüntüleme alanını esas alır. Container query ise uygun kapsayıcının boyutuna göre içindeki öğelere stil uygular. MDN’nin Container Queries rehberi, bu yaklaşımın bileşenleri farklı yerleşimlerde yeniden kullanmayı kolaylaştırdığını açıklar.

Örnek bir teknoloji blogunda ana içerik sütunu ile “Son yazılar” alanı aynı sayfada bulunabilir. İkisinde de aynı kart HTML’ini kullanmak isteyelim. Geniş sütundaki kartın özeti ve kategori etiketi yan yana durabilirken, dar alandaki kartta bu bölümlerin alt alta gelmesi daha okunaklı olabilir.

Bu örnekte bileşenin ihtiyacını belirleyen şey cihazın adı değildir. Büyük bir masaüstü ekranındaki dar kenar çubuğu, kart açısından yine dar bir alandır. Böyle düşündüğümüzde “tablet kartı” ve “masaüstü kartı” gibi ayrı sürümler yerine, elindeki alana uyum sağlayan tek bir bileşen tasarlayabiliriz.

Önce kapsayıcıyı tanımlayın

Boyut sorgusu kullanmak için uygun bir üst öğede kapsayıcı tanımlanır. container-type belgesine göre inline-size, satır içi eksenin boyutunu sorgulamaya imkân verir. Yatay yazı düzeninde bu eksen genişliktir. Yalnızca genişliğe göre kart düzenlemek istediğimiz örnekte bu değer yeterlidir.

Dış sarmalayıcıyı ölçüm noktası, içteki kartı ise görünümü değişecek bileşen olarak kullanacağız. Sarmalayıcının genişliği sayfanın normal yerleşimi tarafından belirlenir. Kartın kendi boyutunu sorgulayıp aynı öğeyi bu sorguyla yeniden boyutlandırmaya çalışmak yerine, bu iki sorumluluğu ayrı tutarız.

<div class="yazi-alani">
  <article class="yazi-karti">
    <div class="yazi-karti__ozet">
      <h2>Daha esnek arayüzler tasarlamak</h2>
      <p>Aynı bileşeni farklı sütunlarda kullanın.</p>
    </div>
    <p class="yazi-karti__etiket">Web Tasarım</p>
  </article>
</div>

Bu küçük örnekte görsel kullanmıyoruz; odağımız yerleşim davranışı. Gerçek kartınıza görsel, bağlantı ve okuma süresi ekleyebilirsiniz. İçerik sırasını baştan anlamlı kurmak, dar görünümde kartın doğal biçimde okunmasını da kolaylaştırır.

Dar görünümden başlayıp geniş alanı değerlendirin

Aşağıdaki CSS, kartı önce tek sütunlu oluşturur. Adlandırılmış kapsayıcı yeterince geniş olduğunda özet ve kategori bölümleri yan yana yerleşir:

.yazi-alani {
  container-type: inline-size;
  container-name: yazi;
}

.yazi-karti {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #d8dee8;
  border-radius: 0.75rem;
}

.yazi-karti__ozet {
  min-width: 0;
  overflow-wrap: anywhere;
}

.yazi-karti h2,
.yazi-karti p {
  margin: 0;
}

.yazi-karti__etiket {
  align-self: start;
}

@container yazi (min-width: 32rem) {
  .yazi-karti {
    grid-template-columns: minmax(0, 1fr) 9rem;
    align-items: start;
  }
}

@container başvurusu, sorgunun uygun üst kapsayıcı üzerinden değerlendirilmesini ve kapsayıcı adlarının kullanımını açıklar. Buradaki yazi adı, hangi kapsayıcı türünü hedeflediğimizi kodu okuyan geliştiriciye de gösterir. İç içe bileşenler arttığında isimlendirmeyi tutarlı sürdürmek önem kazanır.

32rem evrensel bir tasarım standardı değildir. Bu örnekte kategori sütununa ve metne yeterli alan ayırmak için seçilmiş bir başlangıç değeridir. Kendi yazı tipiniz, boşluklarınız ve gerçek başlıklarınızla bu eşiği yeniden değerlendirin. Kartın yalnızca kısa bir başlıkla düzgün görünmesi yeterli kabul edilmemelidir.

Örneği sayfaya nasıl yerleştirebiliriz?

Blogumuzda aynı sarmalayıcıyı hem ana sütuna hem kenar çubuğuna eklediğimizi düşünelim. Geniş sütunda kapsayıcı eşiği aşarsa kart iki sütuna geçer. Kenar çubuğunda yeterli alan yoksa tek sütunlu görünüm korunur. Tarayıcı penceresini değiştirmeden iki farklı kart düzeni elde etmek, bu örneğin asıl hedefidir.

Bu yaklaşım, sayfa düzenini tamamen ortadan kaldırmaz. Ana sütunların sayısını hâlâ Grid veya Flexbox ile belirleyebilirsiniz. Kartın içinde ne olacağına ilişkin karar ise bileşene yaklaşır. Böylece sayfanın genel yerleşimiyle kartın iç yerleşimini farklı ihtiyaçlara göre yönetebilirsiniz.

Temel görünüm ve tarayıcı desteği

Örnek kodda tek sütunlu düzen sorgunun dışında tanımlıdır. Böylece kapsayıcı sorgusu uygulanmadığında da içerik okunabilir bir başlangıç görünümüne sahiptir. Geniş görünüm, bu temel düzenin üzerine eklenir. Bu tercih, bileşeni yalnızca gelişmiş kural çalıştığında kullanılabilir hâle getirmemek içindir.

@supports, tarayıcının belirli CSS özellik ve değerlerini desteklemesine bağlı kurallar yazmayı sağlar. Gerekli olduğunda @supports (container-type: inline-size) ile ek düzenlemeleri koşula bağlayabilirsiniz. Ancak tek bir destek sorgusunu, bütün kapsayıcı sorgusu özelliklerinin aynı düzeyde desteklendiğinin kanıtı saymayın.

Projede hedeflenen tarayıcıları belirleyip kullandığınız özelliğin uyumluluk tablosunu kontrol edin. Özellikle boyut sorguları ile stil veya kaydırma durumunu sorgulayan özellikleri birbirine karıştırmayın. Bu yazıdaki örnek yalnızca boyuta dayalı davranışı anlatıyor.

Yayına almadan önce küçük bir kontrol listesi

Kendi bileşeniniz için üç farklı alan hazırlayın: dar kenar çubuğu, orta genişlikte liste ve geniş içerik sütunu. Aynı HTML’i bu alanlarda gösterin. Ardından çok uzun bir başlık, birkaç satırlık kategori adı ve boş bırakılmış açıklama gibi içeriklerle davranışı gözlemleyin.

Metni büyüttüğünüzde kartın taşmadığını ve okuma sırasının anlamlı kaldığını kontrol edin. Kartı başka bir kapsayıcının içine taşıdığınızda hangi ölçünün kullanıldığını geliştirici araçlarıyla inceleyin. Sorgu çalışmıyorsa önce eşik değerini değiştirmek yerine doğru üst öğenin kapsayıcı olarak tanımlanıp tanımlanmadığına bakın.

Başlangıç için tek bir tekrar kullanılan kart seçmek yeterlidir. Önce dar görünümü sağlamlaştırın, sonra gerçekten ihtiyaç duyduğu yerde geniş düzen ekleyin. Bileşenin hangi sayfada olduğundan çok, ne kadar alan bulduğuna odaklanmak CSS kurallarını daha anlaşılır bir tasarım kararına dönüştürebilir.