Kapsayıcı Sorguları ve Medya Sorguları Karşılaştırması
Bileşen tabanlı tasarımda kapsayıcı sorgularını mı yoksa görünüm alanı medya sorgularını mı kullanmanız gerektiğini öğrenin.
Kapsayıcı Sorguları ve Medya Sorguları Karşılaştırması, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Temel Fark
Medya sorguları görünüm alanının boyutlarına yanıt verir. Kapsayıcı sorguları üst kapsayıcının boyutlarına yanıt verir. Hangi sorun için hangi aracın kullanılacağını bu ayrım belirler.
Medya Sorguları: Ne Zaman Kullanılır
Medya sorgularını şu durumlarda kullanın:
- Genel sayfa düzeni değişiklikleri (tek sütun yerine iki sütun)
- Büyük sayfa bölümlerini gösterme veya gizleme (mobilde gezinme çekmecesi)
- Sayfa düzeyinde tipografi temel ölçeklendirmesi
- Yazdırma stilleri
- Kullanıcı tercihi sorguları (koyu tema, azaltılmış hareket)
Kapsayıcı Sorguları: Ne Zaman Kullanılır
Kapsayıcı sorgularını şu durumlarda kullanın:
- Bileşen düzeyinde düzen değişiklikleri (yatay veya dikey kart)
- Bilinmeyen kapsayıcılara yerleştirilen bileşenler (kenar çubuğu, ana alan, ana alan içindeki kenar çubuğu)
- Yeniden kullanılabilir tasarım sistemi bileşenleri
- Üçüncü taraf sayfalara yerleştirilen araçlar
Taşınabilirlik Argümanı
Medya sorgularıyla stillendirilen bir kart, 1200px genişliğindeki bir sayfada tek bir kırılma noktasında çalışır. Bu kart bir kenar çubuğuna taşınırsa farklı kırılma noktalarına ihtiyaç duyabilir. Kapsayıcı sorgularıyla aynı kart, kendi kullanılabilir alanına uyum sağladığı için her yerde çalışır.
Birlikte Kullanım
Gerçek uygulamalar her ikisini de kullanır. Medya sorguları makro düzeni tanımlar (kenar çubuğu masaüstü genişliklerinde görünür); kapsayıcı sorguları ise bu düzen içindeki bileşen davranışını tanımlar.
<div class="layout">
<div class="sidebar"><div class="card">Sidebar card</div></div>
<div class="main-content"><div class="card">Main card</div></div>
</div>
Kapsayıcı Sorgularının Özgüllüğü
Özgüllük eklemeyen medya sorgularının aksine, kapsayıcı sorguları bağlama özgü özgüllük ekler. @container (min-width: 400px) içindeki bir kural, dışındaki aynı kuralla aynı özgüllüğe sahiptir; ancak yalnızca bu kapsayıcı bağlamında uygulanır.
Tarayıcı Desteği
Kapsayıcı sorguları 2023'ten beri tüm modern tarayıcılarda desteklenir (Chrome 105+, Firefox 110+, Safari 16+). Günümüzde modern tarayıcıları hedefleyen yeni projelerde geri dönüş çözümü olmadan güvenle kullanılabilirler.
@supports ile Aşamalı Geliştirme
Daha eski tarayıcı desteği gerektiren projelerde, kapsayıcı sorgusu desteğini sınamak için @supports kullanın:
<div class="card-wrapper"><div class="card">Progressively enhanced card</div></div>
Performans Karşılaştırması
Kapsayıcı sorgularının kendine özgü performans özellikleri vardır: Her container-type öğesi bir düzen yalıtımı sınırı oluşturur. Bu, içerideki boyut değişikliklerinin dışı etkilemesini önler ve aslında bir performans avantajı sağlar. Medya sorgusu değişiklikleri genel düzen yeniden hesaplamalarını tetikleyebilir.
Kapsayıcı Sorgularında Hata Ayıklama
Chrome DevTools, Elements panelinde kapsayıcı öğelerin yanında bir "cq" rozeti gösterir. Kapsayıcı sınırlarını görselleştirmek ve kapsayıcı sorgusu koşullarını DevTools düzen denetçisiyle sınamak için rozete tıklayın.
Hızlı Kontrol
Bir tasarım sistemi kart bileşeninin, hangi bağlamda olursa olsun kullanılabilir genişliğe göre üst üste dizilmiş düzenden yan yana düzene geçmesi gerekiyor. Hangi yaklaşım daha iyidir?
Özet
Medya sorguları genel görünüm alanına, kapsayıcı sorguları ise bir üst kapsayıcının boyutuna yanıt verir. Genel düzen kararları ve kullanıcı tercihi sorguları için medya sorgularını kullanın. Bağlamına uyum sağlaması gereken yeniden kullanılabilir bileşenler için kapsayıcı sorgularını kullanın. Her ikisini birleştirin: Makro sayfa düzeni için medya sorgularını, bu düzen içindeki bileşen düzeyinde uyarlama için kapsayıcı sorgularını kullanın.
Yapay zeka eğitmeniyle CSS öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 40
- Dersler
- 159
Sıkça Sorulan Sorular
“Kapsayıcı Sorguları ve Medya Sorguları Karşılaştırması” dersi ücretsiz mi?
Evet — “Kapsayıcı Sorguları ve Medya Sorguları Karşılaştırması” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Kapsayıcı Sorguları ve Medya Sorguları Karşılaştırması” dersinde ne öğreneceğim?
Bileşen tabanlı tasarımda kapsayıcı sorgularını mı yoksa görünüm alanı medya sorgularını mı kullanmanız gerektiğini öğrenin. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Kapsayıcı Sorguları ve Medya Sorguları Karşılaştırması” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- container-type ve container-name
- @container Kuralları ve Kesme Noktaları
- Kapsayıcı Sorgusu Birimleri: cqw cqh
- Kapsayıcı Sorguları ve Medya Sorguları Karşılaştırması