Web geliştirme dünyası sürekli olarak gelişiyor ve kullanıcıların çeşitli cihazlardan erişebileceği duyarlı tasarım ihtiyacı artıyor. Bu ihtiyaca cevap vermek için CSS’de “@container” sorguları geliştiricilere önemli bir hizmet sunuyor. Bu blog yazısında, “@container” sorgularının nasıl kullanılacağını ve bu özelliğin duyarlı ve esnek tasarımın nasıl oluşturulacağına katkı sağlayacağını izah etmeye çalışacağım..

CSS “@container” sorguları, belirli bir konteyner boyutunda veya ekran genişliğinde belirli öğeleri stilize etmek için kullanılır. Sorguları kullanmak için “@container” anahtar kelimesini kullanarak parantez içinde boyut veya genişlik değeri belirmek gerekir.

@container (max-width: 768px) {
  .menu {
    display: none;
  }
}

Yukarıdaki örnekte, ekran genişliği 768 pikselden küçük olduğunda menüyü gizlemek için “@container” sorgusu kullanıldı.

Duyarlı Tipografi Oluşturma: “@container” sorgularını kullanarak tipografiyi ekran boyutuna uygun şekilde ayarlamak da mümkündür. Başlık boyutları, satır yüksekliği ve kenar boşlukları gibi tipografi özellikleri için “@container” sorgularını kullanarak içeriği daha iyi okunabilir hale getirebiliriz.

Örnek:

@container (max-width: 480px) {
  h1 {
    font-size: 24px;
    line-height: 1.2;
  }
}

Resimleri ve Medya Dosyalarını Yönetme: Farklı ekran boyutlarına göre arka plan resimlerini değiştirmek veya belirli bir boyuttan sonra video oynatmayı durdurmak gibi işlemleri kolaylıkla yapı.

@container (max-width: 1024px) {
  .hero-image {
    background-image: url('image-small.jpg');
  }
}
@container (min-width: 1025px) {
  .hero-image {
    background-image: url('image-large.jpg');
  }
}

Duyarlı Navigasyon Tasarımı: Navigasyon menüsünü duyarlı hale getirebilir ve mobil cihazlarda daha kullanıcı dostu bir deneyim sunabiliriz.

Örnek:

@container (max-width: 768px) {
  .nav-menu {
    display: none;
  }
.hamburger-menu {
    display: block;
  }
}

Web siteleri, kullanıcıların farklı cihazlarda sorunsuz bir deneyim yaşamasını sağlayacak şekilde tasarlanabilir. Duyarlılık ve kullanıcı deneyimi giderek önem kazandığı için “@container” sorgularını kullanarak modern ve erişilebilir web siteleri oluşturabiliriz.

---

@media query kullanmak yerine neden @container kullanmalıyım?

• Özellikle büyük ve karmaşık projelerde, media query’ler yerine “@container” sorguları kullanmak, kodu daha anlaşılır ve düzenli hale getirebilir.
• media query’lerin yerine kullanıldığında daha hızlı ve kolay bir şekilde duyarlı tasarım oluşturmayı sağlayabilir. Sözde “@container” ile belirli ekran boyutlarına uygun stil değişikliklerini hızla yapabilir ve sayfa yüklemelerini optimize edebiliriz.
• media query’lerle karşılaştırıldığında daha az yazmayı gerektirir ve böylece kodu daha az tekrar eden ve verimli hale getirir.

Ancak önemli bir hatırlatma olarak, “@container” gibi hayali bir özellik olmadığı için media query’ler, duyarlı tasarımın temel aracıdır ve gerçek projelerde duyarlılık ve esneklik sağlamak için kullanılmalıdır. CSS media query’ler, web sitelerinin farklı ekran boyutlarına ve cihazlara uyum sağlamasını sağlayan en önemli araçlardan biridir ve duyarlı tasarımın temelini oluşturur. Temelin nereden geldiğini unutmayalım..

✨