Container Query Nedir?
İngilizce: Container Query
Container query, bir bileşenin stilini ekran genişliği yerine içinde bulunduğu kapsayıcının boyutuna göre değiştiren CSS özelliğidir.
Container Query Nedir?
Container query, responsive tasarımı yalnızca ekran genişliğine bağlamak yerine bileşenin yerleştirildiği alanı dikkate alır. Aynı ürün kartı ana içerikte geniş, yan panelde dar görünebilir; container query bu iki durumda farklı stiller uygulamayı sağlar.
Nasıl Çalışır?
Önce kapsayıcı elemana container-type tanımlanır. Ardından @container kuralı içinde genişlik, yükseklik veya inline size koşullarına göre stiller yazılır. Böylece bileşen kendi bağlamına uyum sağlar; tüm sayfa için global breakpoint yazmaya gerek kalmaz.
Bu yaklaşım özellikle tekrar kullanılabilir tasarım sistemi bileşenlerinde değerlidir. Kart, filtre paneli, istatistik kutusu veya navigasyon parçası farklı CSS grid alanlarında aynı kodla kullanılabilir.
Media Query ile Farkı
Media query tarayıcı penceresini ölçer. Container query ise bileşenin içinde bulunduğu kutuyu ölçer. Bu nedenle grid layout, sidebar ve dinamik dashboard düzenlerinde daha doğru karar verir.
Kullanımda Dikkat Edilecekler
Container query, layout problemlerini tamamen ortadan kaldırmaz. Kapsayıcı hiyerarşisi net kurulmalı, sorgu eşikleri tasarım sistemindeki gerçek kırılma noktalarına göre seçilmeli ve eski tarayıcı desteği gerekiyorsa fallback planlanmalıdır.
İş Dünyasında Kullanımı
Kurumsal web siteleri, SaaS panelleri ve e-ticaret arayüzlerinde aynı bileşenin farklı sayfa bölgelerinde bozulmadan çalışması bakım maliyetini azaltır. Container query bu esnekliği component seviyesine indirerek tasarım sistemi kararlarını daha taşınabilir hale getirir.