container-type ve container-name
container-type kullanarak sorgu kapsayıcıları tanımlayın ve container-name ile bunlara ad verin.
container-type ve container-name, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 1. 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.
Container Sorguları Nedir?
Container sorguları, CSS'in stilleri görünüm alanı yerine üst container'ın boyutuna göre uygulamasını sağlar. Bu özellik, bir bileşenin yerleştirildiği her yere uyum sağladığı, gerçekten bileşen tabanlı duyarlı tasarımlar oluşturmanıza olanak tanır.
Container Sorgularının Çözdüğü Sorun
Medya sorgularında, 300px genişliğindeki bir kenar çubuğunda bulunan kart bileşeni küçük olduğunu bilemez; yalnızca görünüm alanının geniş olduğunu bilir. Container sorguları, bileşenin genel görünüm alanına değil, kendi container'ının boyutuna tepki vermesini sağlar.
container-type
Bir container'ı sorgulamak için önce container-type kullanarak onu sorgu container'ı olarak tanımlayın:
<div class="card-wrapper">This wrapper can now be queried for its own width via @container.</div>
container-type Değerleri
Kullanılabilir değerler:
inline-size— container'ın satır içi boyutunda sorguları etkinleştirir (yatay yazımda genişlik)size— hem satır içi hem de blok boyutlarında sorguları etkinleştirir (genişlik ve yükseklik)normal— varsayılan değerdir; boyut sorguları etkin değildir, ancak stil sorguları yine mümkündür
container-name
Sorgularda başvurmak için bir container'a ad verin. İç içe container'lar olduğunda ve belirli bir üst öğeyi sorgulamak istediğinizde bu gereklidir:
<div class="sidebar">Named container: "sidebar"</div>
container Kısa Yazımı
container kısa yazımı hem adı hem de türü ayarlar:
<div class="card-grid">Container named "card-grid", type inline-size.</div>
Adsız Container'lar Neden Kullanılır?
Adsız bir container yine de sorgulanabilir; @container kuralı varsayılan olarak en yakın üst container'ı hedefler. Adlar yalnızca belirli bir üst öğeye atlamak istediğinizde gereklidir.
Performans Hususu
container-type öğelerinin her biri kendi düzen kapsamasını alır. Bu, container içindeki boyut değişikliklerinin üst öğeleri etkilemediği anlamına gelir ve performans avantajı sağlar. Container değiştiğinde tarayıcının tüm sayfayı yeniden hesaplaması gerekmez.
contain Özelliğiyle İlişki
container-type: inline-size ayarı, öğede örtük olarak contain: inline-size layout style ayarını yapar. Bu, container boyutunun kendi düzenini etkilemesini önler ve boyut sorgularının çalışması için gereklidir.
Uygulamalı Örnek Kurulumu
Eksiksiz bir container sorgusu kurulumu:
<div class="article-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
Container Sorguları ve Medya Sorguları
Şunlar için container kullanın: bileşen düzeyinde uyarlama, farklı düzen bağlamlarında yeniden kullanılabilir bileşenler, yerleşimi bilinmeyen kartlar ve araç takımları. Şunlar için medya sorgularını kullanın: genel düzen değişiklikleri, tipografi ölçeklendirmesi, büyük bölümlerin gösterilmesi/gizlenmesi.
Hızlı Kontrol
Hangi özellik değeri, bir öğenin @container kuralları kullanılarak genişliği için sorgulanabilir olmasını sağlar?
Özet
container-type: inline-size, bir öğeyi genişliği için sorgu container'ı olarak tanımlar. Seçici hedefleme için container'lara ad vermek üzere container-name kullanın. container kısa yazımı her ikisini de ayarlar. Container sorguları, görünüm alanı medya sorgularının ele alamadığı, bağlamı bilinmeyen bileşen sorununu çözer.
Sıkça Sorulan Sorular
“container-type ve container-name” dersi ücretsiz mi?
Evet — “container-type ve container-name” 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.
“container-type ve container-name” dersinde ne öğreneceğim?
container-type kullanarak sorgu kapsayıcıları tanımlayın ve container-name ile bunlara ad verin. 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 1. dersidir.
“container-type ve container-name” 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ı