M

MLOG

Türkçe

Gerçek anlamda duyarlı tasarım için CSS konteyner sorgularında ustalaşın. Düzenleri görüntü alanı yerine konteyner boyutuna göre uyarlayarak tüm cihazlarda kusursuz bir kullanıcı deneyimi sağlayın.

Duyarlı Tasarımın Kilidini Açmak: CSS Konteyner Sorguları İçin Kapsamlı Bir Rehber

Yıllardır duyarlı web tasarımı, web sitelerinin düzenlerini ve stillerini görüntü alanının genişliğine ve yüksekliğine göre uyarlamasına olanak tanıyan medya sorgularına (media queries) dayanıyordu. Bu yaklaşım etkili olsa da, özellikle genel ekran boyutundan bağımsız olarak uyum sağlaması gereken karmaşık bileşenlerle uğraşırken bazen sınırlayıcı olabiliyordu. Karşınızda CSS Konteyner Sorguları (Container Queries) – elemanların görüntü alanının kendisine değil, onları içeren elemanın boyutuna yanıt vermesini sağlayan güçlü ve yeni bir araç. Bu, duyarlı tasarımda yeni bir esneklik ve hassasiyet seviyesinin kapılarını aralıyor.

CSS Konteyner Sorguları Nedir?

CSS Konteyner Sorguları, bir elemana üst konteynerinin boyutuna veya diğer özelliklerine göre stiller uygulamanıza olanak tanıyan bir CSS özelliğidir. Görüntü alanını hedefleyen medya sorgularının aksine, konteyner sorguları belirli bir elemanı hedefler. Bu, bileşenlerin ekran boyutundan bağımsız olarak konteynerleri içindeki mevcut alana göre stillerini uyarlamasını mümkün kılar.

Dar bir kenar çubuğuna mı yoksa geniş bir ana içerik alanına mı yerleştirildiğine bağlı olarak farklı şekilde görüntülenen bir kart bileşeni hayal edin. Medya sorgularıyla, kartın stilini ekran boyutuna göre ayarlamanız gerekebilir, bu da tutarsızlıklara yol açabilir. Konteyner sorgularıyla, kartın konteyneri belirli bir genişliğe ulaştığında özel olarak uygulanan stiller tanımlayabilir, böylece farklı düzenlerde tutarlı ve duyarlı bir deneyim sağlayabilirsiniz.

Neden Konteyner Sorguları Kullanmalıyız?

Konteyner sorguları, geleneksel medya sorgularına göre birçok avantaj sunar:

CSS Konteyner Sorguları Nasıl Uygulanır?

CSS konteyner sorgularını uygulamak iki temel adımı içerir: konteyneri tanımlama ve sorguları yazma.

1. Konteyneri Tanımlama

Öncelikle, bir elemanı *konteyner* olarak belirlemeniz gerekir. Bu, container-type özelliği kullanılarak yapılır. container-type için iki ana değer vardır:

Ayrıca, sorgularınızda belirli konteynerleri hedeflemek için yardımcı olabilecek olan container-name kullanarak konteynerinize bir ad verebilirsiniz. Örneğin:

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

Bu kod, .card-container sınıfına sahip elemanı bir konteyner olarak bildirir. Konteynerin genişliğine dayalı sorgulara izin vermek için inline-size belirtiyoruz. Ayrıca ona cardContainer adını verdik.

2. Konteyner Sorgularını Yazma

Konteyneri tanımladıktan sonra, @container kuralını kullanarak konteyner sorguları yazabilirsiniz. Sözdizimi medya sorgularına benzer:

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

Bu sorgu, süslü parantezler içindeki stilleri yalnızca cardContainer adlı konteynerin minimum genişliği 400 piksel olduğunda uygular. .card elemanını (muhtemelen .card-container'ın bir alt elemanı) hedefliyor ve düzenini ayarlıyor. Konteyner 400 pikselden darsa, bu stiller uygulanmayacaktır.

Kısayol: Bir konteyner adı belirtmeniz gerekmediğinde @container kuralının kısayol sürümünü de kullanabilirsiniz:

@container (min-width: 400px) {
  /* Konteyner en az 400 piksel genişliğinde olduğunda uygulanacak stiller */
}

Konteyner Sorgularının Pratik Örnekleri

Daha duyarlı ve uyarlanabilir düzenler oluşturmak için konteyner sorgularını nasıl kullanabileceğinize dair bazı pratik örneklere bakalım.

Örnek 1: Kart Bileşeni

Bu örnek, bir kart bileşeninin konteynerinin genişliğine göre nasıl uyarlandığını gösterir. Kart, konteyner dar olduğunda içeriğini tek bir sütunda, konteyner daha geniş olduğunda ise iki sütunda gösterecektir.

HTML:


  

    Kart Resmi
    

      
Kart Başlığı

      
Bu, kart için örnek bir içeriktir.

      Daha Fazla Bilgi Edinin

CSS:

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

Bu örnekte, .card-container konteyner olarak bildirilmiştir. Konteynerin genişliği 500 pikselden az olduğunda, .card bir sütun düzeni kullanarak resmi ve içeriği dikey olarak üst üste yığacaktır. Konteynerin genişliği 500 piksel veya daha fazla olduğunda, .card bir satır düzenine geçerek resmi ve içeriği yan yana gösterecektir.

Örnek 2: Gezinme Menüsü

Bu örnek, bir gezinme menüsünün mevcut alana göre nasıl uyarlandığını gösterir. Konteyner dar olduğunda, menü öğeleri bir açılır menüde gösterilecektir. Konteyner daha geniş olduğunda, menü öğeleri yatay olarak gösterilecektir.

HTML:

CSS:

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

Bu örnekte, .nav-container konteyner olarak bildirilmiştir. Konteynerin genişliği 600 pikselden az olduğunda, menü öğeleri dikey bir liste olarak gösterilecektir. Konteynerin genişliği 600 piksel veya daha fazla olduğunda, menü öğeleri flexbox kullanılarak yatay olarak gösterilecektir.

Örnek 3: Ürün Listeleme

Bir e-ticaret ürün listelemesi, düzenini konteynerin genişliğine göre uyarlayabilir. Daha küçük konteynerlerde, ürün resmi, başlığı ve fiyatı içeren basit bir liste iyi sonuç verebilir. Konteyner büyüdükçe, sunumu geliştirmek için kısa bir açıklama veya müşteri puanı gibi ek bilgiler eklenebilir. Bu aynı zamanda yalnızca görüntü alanını hedeflemekten daha ayrıntılı bir kontrol sağlar.

HTML:


  

    Ürün 1
    
Ürün Adı 1

    
$19.99

  

  

    Ürün 2
    
Ürün Adı 2

    
$24.99

CSS:

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

Bu CSS kodu önce `product-listing-container`'ı bir konteyner olarak kurar. Dar konteynerler için (400 pikselden az), her ürün öğesi genişliğin %100'ünü kaplar. Konteyner 400 pikselin üzerine çıktığında, ürün öğeleri iki sütun halinde düzenlenir. 768 pikselin üzerinde ise ürün öğeleri üç sütun halinde görüntülenir.

Tarayıcı Desteği ve Polyfill'ler

Konteyner sorguları, Chrome, Firefox, Safari ve Edge dahil olmak üzere modern tarayıcılarda iyi bir tarayıcı desteğine sahiptir. Ancak, eski tarayıcılar bunları yerel olarak desteklemeyebilir.

Eski tarayıcıları desteklemek için bir polyfill kullanabilirsiniz. Popüler bir seçenek, npm ve GitHub'da bulunabilen container-query-polyfill'dir. Polyfill'ler, desteklenmeyen özelliklerin boşluğunu doldurarak, eski tarayıcılarda bile konteyner sorgularını kullanmanıza olanak tanır.

Konteyner Sorguları Kullanımı İçin En İyi Uygulamalar

İşte konteyner sorgularını kullanırken akılda tutulması gereken bazı en iyi uygulamalar:

Yaygın Tuzaklar ve Bunlardan Kaçınma Yolları

Konteyner Sorguları vs. Medya Sorguları: Doğru Aracı Seçmek

Konteyner sorguları önemli avantajlar sunsa da, medya sorgularının duyarlı tasarımda hala bir yeri vardır. İşte farklı durumlar için hangi aracın en iyisi olduğuna karar vermenize yardımcı olacak bir karşılaştırma:

Özellik Konteyner Sorguları Medya Sorguları
Hedef Konteyner boyutu Görüntü alanı boyutu
Duyarlılık Bileşen tabanlı Sayfa tabanlı
Esneklik Yüksek Orta
Kod Tekrarı Daha Düşük Daha Yüksek
Kullanım Alanları Yeniden kullanılabilir bileşenler, karmaşık düzenler Global düzen ayarlamaları, temel duyarlılık

Genel olarak, bir bileşenin stilini konteynerinin boyutuna göre uyarlamanız gerektiğinde konteyner sorgularını, görüntü alanı boyutuna göre genel düzen ayarlamaları yapmanız gerektiğinde medya sorgularını kullanın. Genellikle, her iki tekniğin bir kombinasyonu en iyi yaklaşımdır.

Konteyner Sorguları ile Duyarlı Tasarımın Geleceği

Konteyner sorguları, elemanların farklı bağlamlara nasıl uyum sağladığı konusunda daha fazla esneklik ve kontrol sunarak duyarlı tasarımda önemli bir adımı temsil etmektedir. Tarayıcı desteği gelişmeye devam ettikçe, konteyner sorguları web geliştiricileri için giderek daha önemli bir araç haline gelecektir. Tasarımcıları ve geliştiricileri, tüm cihazlarda ve ekran boyutlarında sorunsuz bir deneyim sunan, gerçekten uyarlanabilir ve kullanıcı dostu web siteleri oluşturmaları için güçlendirirler.

Sonuç

CSS Konteyner Sorguları, duyarlı tasarım araç setine güçlü bir ektir. Elemanların kendilerini içeren elemanın boyutuna yanıt vermesine olanak tanıyarak, gerçek anlamda bileşen tabanlı duyarlılığı mümkün kılar ve web tasarımında yeni esneklik ve hassasiyet seviyelerinin kapılarını aralar. Konteyner sorgularını nasıl etkili bir şekilde uygulayacağınızı ve kullanacağınızı anlayarak, herkes için daha iyi bir deneyim sunan daha uyarlanabilir, bakımı kolay ve kullanıcı dostu web siteleri oluşturabilirsiniz.

Kaynaklar