@container Kuralları ve Kesme Noktaları
Kapsayıcı belirli boyutlara ulaştığında stilleri uygulayan @container kuralları yazın.
@container Kuralları ve Kesme Noktaları, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. 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 Kuralı Söz Dizimi
@container, bir container belirli boyut koşullarını karşıladığında stilleri uygulayan at kuralıdır. Söz dizimi medya sorgularını andırır:
<div class="wrapper"><div class="box">Styled once container ≥ 400px wide</div></div>
Adlandırılmış Container Sorguları
Belirli bir adlandırılmış container'ı hedefleyin:
<div class="sidebar">
<div class="nav-item">Dashboard</div>
<div class="nav-item">Settings</div>
</div>
Maksimum Genişlikli Container Sorguları
Daha küçük kapsayıcılara stiller uygulamak için max-width kullanın:
<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>
Aralık Kapsayıcı Sorguları
Modern kapsayıcı sorgusu söz dizimi aralıkları destekler:
<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>
Uyarlanabilir Kart Bileşeni
Kapsayıcısının genişliğine göre uyum sağlayan bir kart bileşeni:
<div class="card-wrapper">
<div class="card">
<div class="card__image"></div>
<div class="card__body">Adaptive card content</div>
</div>
</div>
İç İçe Kapsayıcı Sorguları
Kapsayıcı sorguları iç içe olabilir. İç sorgu, varsayılan olarak en yakın kapsayıcı üst öğeye başvurur.
<div class="outer">
<div class="inner">
<div class="content">Nested container-aware content</div>
</div>
</div>
Kapsayıcı Sorgusu Kırılma Noktaları
Görünüm alanı kırılma noktalarının aksine, kapsayıcı kırılma noktaları rastgele cihaz boyutlarına göre değil, bileşen düzeninin ne zaman değişmesi gerektiğine göre seçilmelidir. Bileşenin minimum ve maksimum içerik genişliğini temel alın.
Kapsayıcılarda Tipografi
Küçük kapsayıcılar için tipografiyi ayarlayın:
<div class="wrapper">
<h3 class="card-title">Adaptive Heading</h3>
<p class="card-text">Body copy that hides on very narrow containers.</p>
</div>
Izgara Düzeni için Kapsayıcı Sorgusu
Kapsayıcı kırılma noktalarında bir bileşenin dahili ızgarasını değiştirin:
<div class="widget">
<div class="widget-grid">
<div>Tile 1</div>
<div>Tile 2</div>
</div>
</div>
Stil Sorguları (Boyutun Ötesinde)
Kapsayıcı sorguları, hesaplanmış özel özellik değerlerini denetleyen stil sorgularını da destekler. Bu sayede ek sınıflar kullanmadan, CSS değişkenleriyle yönlendirilen bileşen çeşitleri oluşturabilirsiniz:
<div class="wrapper"><div class="card">Featured card styled via style query</div></div>
Hızlı Kontrol
@container (min-width: 500px) neyi hedefler?
Özet
@container kuralları, kapsayıcı boyut koşullarını karşıladığında kapsayıcının içindeki öğelere stil uygular. Belirli üst öğeleri hedeflemek için adlandırılmış kapsayıcılar kullanın. Kapsayıcı kırılma noktaları cihaz boyutlarına değil, içerik gereksinimlerine göre belirlenmelidir. Stil sorguları, CSS değişkeni değerlerini denetlemek üzere kapsayıcı sorgularını genişletir ve güçlü, bildirime dayalı bileşen çeşitleri oluşturmayı sağlar.
Sıkça Sorulan Sorular
“@container Kuralları ve Kesme Noktaları” dersi ücretsiz mi?
Evet — “@container Kuralları ve Kesme Noktaları” 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 Kuralları ve Kesme Noktaları” dersinde ne öğreneceğim?
Kapsayıcı belirli boyutlara ulaştığında stilleri uygulayan @container kuralları yazın. 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 2. dersidir.
“@container Kuralları ve Kesme Noktaları” 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ı