Merhaba arkadaşlar, bugün sizlere son zamanlarda beni çok heyecanlandıran ve media queries'e göre çok daha güçlü bir CSS özelliğinden bahsedeceğim: Container Queries. Özellikle bileşen (component) tabanlı geliştirme yaparken, bir bileşenin kendi ebeveyninin genişliğine göre stil alabilmesi gerçekten hayat kurtarıcı. Ama bu özellik henüz tüm tarayıcılarda desteklenmiyor. Peki, polyfill yüklemeden, sadece destekleyen tarayıcılarda bu güzelliği nasıl kullanırız? İşte benim kullandığım en temiz çözüm.
Neden Polyfill Kullanmak İstemiyorum?
Projeye ekstra JavaScript yüklemek, bundle boyutunu artırmak ve potansiyel performans sorunları demek. Hele ki bu özellik giderek daha fazla tarayıcıda (Chrome 105+, Edge 105+, Safari 16+) native olarak desteklenmeye başladı. Amacım, destekleyen kullanıcılar için mükemmel deneyimi sunarken, desteklemeyenler için de temel ve kullanılabilir bir tasarım sağlamak.
Temel Mantık: Feature Queries ile Kontrol
Buradaki sihirli anahtar, @supports kuralı. Tıpkı bir özelliğin tarayıcıda olup olmadığını kontrol eder gibi, container queries için de kontrol yapabiliriz. İlk adım, container'ımızı tanımlamak.
Şimdi, container queries'i destekleyen tarayıcılara özel stillerimizi yazma zamanı. @supports kuralının içinde @container sorgusu kullanacağız.
İlerici Geliştirme (Progressive Enhancement) Stratejisi
Önce desteklemeyen herkes için temel (mobil uyumlu) stilimizi yazıyoruz. Sonra, destekleyenler için süper güçlerini açığa çıkarıyoruz. İşte gerçek bir kart bileşeni örneği:
Gördüğünüz gibi, temel `.card` stili herkese uygulanıyor. Ancak tarayıcı container queries'i destekliyorsa, `@supports` bloğunun içindeki harika flexbox düzeni ve gölge/renk efektleri devreye giriyor. Bu, ilerici geliştirmenin ta kendisi!
Dikkat Edilmesi Gereken Kritik Nokta
container-type özelliği, elemente bir layout containment uygular. Bu, bazen içindeki bazı pozisyonlandırma stillerini etkileyebilir. Özellikle `position: fixed` veya `position: absolute` ile çalışan elementlerinizi test etmeyi unutmayın. Sorun yaşarsanız, `container-type: size` yerine `container-type: inline-size` kullanmak genelde daha güvenlidir.
Sonuç olarak, bu yöntemle hem modern tarayıcı kullanıcılarına harika, dinamik bileşenler sunuyoruz, hem de eski tarayıcılar için temel ama kullanılabilir bir arayüz sağlıyoruz. Üstelik hiçbir JavaScript polyfill'i yüklemeden!
Siz projelerinizde container queries'i kullanmaya başladınız mı? Ya da responsive tasarım için media queries dışında farklı hangi yöntemleri tercih ediyorsunuz? Yorumlarda deneyimlerinizi paylaşın!
Neden Polyfill Kullanmak İstemiyorum?Projeye ekstra JavaScript yüklemek, bundle boyutunu artırmak ve potansiyel performans sorunları demek. Hele ki bu özellik giderek daha fazla tarayıcıda (Chrome 105+, Edge 105+, Safari 16+) native olarak desteklenmeye başladı. Amacım, destekleyen kullanıcılar için mükemmel deneyimi sunarken, desteklemeyenler için de temel ve kullanılabilir bir tasarım sağlamak.
Temel Mantık: Feature Queries ile KontrolBuradaki sihirli anahtar, @supports kuralı. Tıpkı bir özelliğin tarayıcıda olup olmadığını kontrol eder gibi, container queries için de kontrol yapabiliriz. İlk adım, container'ımızı tanımlamak.
CSS:
/ Container'ı her durumda tanımla /
.card-container {
container-type: inline-size;
container-name: card;
}Şimdi, container queries'i destekleyen tarayıcılara özel stillerimizi yazma zamanı. @supports kuralının içinde @container sorgusu kullanacağız.
İlerici Geliştirme (Progressive Enhancement) StratejisiÖnce desteklemeyen herkes için temel (mobil uyumlu) stilimizi yazıyoruz. Sonra, destekleyenler için süper güçlerini açığa çıkarıyoruz. İşte gerçek bir kart bileşeni örneği:
CSS:
/ TEMEL STİL (Tüm tarayıcılar) /
.card {
background: #f8f9fa;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid #dee2e6;
}
.card__title {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.card__content {
font-size: 1rem;
line-height: 1.5;
}
/ DESTEKLİYORSA EKSTRA GÜZELLİKLER /
@supports (container-type: inline-size) {
/ Container tanımı buraya da konulabilir, yukarıda yaptık zaten /
/ Container 480px'den genişse /
@container card (min-width: 480px) {
.card {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 1.5rem;
}
.card__image {
flex: 0 0 120px;
border-radius: 4px;
overflow: hidden;
}
}
/ Container 768px'den genişse /
@container card (min-width: 768px) {
.card {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: none;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.card__title {
font-size: 1.5rem;
color: #2C3E50;
}
}
}Gördüğünüz gibi, temel `.card` stili herkese uygulanıyor. Ancak tarayıcı container queries'i destekliyorsa, `@supports` bloğunun içindeki harika flexbox düzeni ve gölge/renk efektleri devreye giriyor. Bu, ilerici geliştirmenin ta kendisi!
Dikkat Edilmesi Gereken Kritik Noktacontainer-type özelliği, elemente bir layout containment uygular. Bu, bazen içindeki bazı pozisyonlandırma stillerini etkileyebilir. Özellikle `position: fixed` veya `position: absolute` ile çalışan elementlerinizi test etmeyi unutmayın. Sorun yaşarsanız, `container-type: size` yerine `container-type: inline-size` kullanmak genelde daha güvenlidir.
Sonuç olarak, bu yöntemle hem modern tarayıcı kullanıcılarına harika, dinamik bileşenler sunuyoruz, hem de eski tarayıcılar için temel ama kullanılabilir bir arayüz sağlıyoruz. Üstelik hiçbir JavaScript polyfill'i yüklemeden!
Siz projelerinizde container queries'i kullanmaya başladınız mı? Ya da responsive tasarım için media queries dışında farklı hangi yöntemleri tercih ediyorsunuz? Yorumlarda deneyimlerinizi paylaşın!