CSS Yerleşim API'si ve Kapsam
CSS Yerleşim API'siyle özel yerleşim algoritmaları oluşturun ve Houdini'nin kapsamını ve sınırlarını öğrenin.
CSS Yerleşim API'si ve Kapsam, 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.
CSS Houdini'ye Genel Bakış
CSS Houdini, CSS işleme motorunun bazı bölümlerini JavaScript'e açan düşük düzeyli API'ler koleksiyonudur. İçeriğinde şunlar bulunur: Türlendirilmiş OM, Özellikler ve Değerler API'si, Boyama API'si, Yerleşim API'si ve Animasyon çalışma parçacığı. Bunlar birlikte özel CSS uzantılarının oluşturulmasını sağlar.
CSS Yerleşim API'si Nedir?
CSS Yerleşim API'si, geliştiricilerin CSS display özelliğinin değerleri olarak kullanılabilecek özel yerleşim algoritmaları tanımlamasını sağlar. Izgara veya Esnek Kutu kadar güçlü yerleşimler oluşturabilirsiniz.
Yerleşim Çalışma Parçacığının Yapısı
Bir Yerleşim çalışma parçacığı intrinsicSizes() ve layout() yöntemlerini uygular ve registerLayout() ile kaydedilir:
<div class="masonry-container">
<div class="item" style="height: 60px;">1</div>
<div class="item" style="height: 100px;">2</div>
<div class="item" style="height: 40px;">3</div>
<div class="item" style="height: 80px;">4</div>
<div class="item" style="height: 120px;">5</div>
<div class="item" style="height: 50px;">6</div>
</div>
Özel Yerleşim Kullanımı
CSS'te kaydedilen yerleşime başvurunuz:
<div class="masonry-container">
<div class="item" style="height: 60px;">1</div>
<div class="item" style="height: 100px;">2</div>
<div class="item" style="height: 40px;">3</div>
<div class="item" style="height: 80px;">4</div>
<div class="item" style="height: 120px;">5</div>
<div class="item" style="height: 50px;">6</div>
</div>
Yerleşim API'sinin Durumu
CSS Yerleşim API'sinin tarayıcı desteği sınırlıdır ve büyük ölçüde deneyseldir (Chrome'da işaretlerin arkasında bulunur). Günümüzde üretim aracı olmaktan çok bir araştırma ve gelecek API'sidir. Özellikle duvar döşeme yerleşimi bunun yerine tarayıcılarda yerel olarak uygulanabilir.
@scope At-Kuralı
@scope, her yere sınıf eklemeden CSS kurallarının erişimini belirli bir DOM alt ağacıyla sınırlayan daha yeni bir CSS özelliğidir (CSS Kapsamlandırma belirtiminin bir parçasıdır).
@scope Sözdizimi
Bir kapsam kökü ve isteğe bağlı olarak bir kapsam sınırı tanımlayınız:
<div class="card">
<p class="title">Scoped Title</p>
<p>Body text inside the card.</p>
</div>
Sınırlı @scope
Kapsam sınırı, kuralların iç içe bileşenlerin içinde eşleşmesini önler:
<div class="article">
<p>Article paragraph styled with 1.7 line-height by the scoped rule.</p>
<div class="advertisement">
<p>Ad paragraph is outside the scope limit, so it keeps the default line-height.</p>
</div>
</div>
:scope Sözde Sınıfı
@scope içinde :scope, kapsam kökü öğesini belirtir:
<div class="card is-hovered">
<p>Hover state applied statically for preview</p>
</div>
@scope Tarayıcı Desteği
@scope, Chrome 118 ve üzeri ile Safari 17.4 ve üzeri sürümlerinde desteklenir. Firefox desteği yakında geliyor. Güvenli dağıtım için @supports ile kullanınız.
Houdini'nin Daha Geniş Vizyonu
CSS Houdini'nin amacı, web platformunu genişletilebilir kılmaktır — tarayıcı üreticilerinin uygulamasını beklemek yerine geliştiricilerin CSS'in kendisine özellikler eklemesini sağlar. Günümüzde kullanılabilen API'ler (Türlendirilmiş OM, @property, Boyama), bu vizyonun üretime en hazır bölümleridir.
Hızlı Sınama
@scope (.card) CSS'te ne sağlar?
Özet
CSS Houdini, işleme motorunu açığa çıkaran bir API kümesidir. Yerleşim API'si özel görüntüleme algoritmalarını mümkün kılar, ancak çoğunlukla deneyseldir. @scope, CSS kuralı erişimini belirli DOM alt ağaçlarıyla sınırlar ve katı BEM adlandırması olmadan stil sızıntısını önler. Üretime en hazır Houdini özellikleri Türlendirilmiş OM, @property ve Boyama API'sidir.
Sıkça Sorulan Sorular
“CSS Yerleşim API'si ve Kapsam” dersi ücretsiz mi?
Evet — “CSS Yerleşim API'si ve Kapsam” 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.
“CSS Yerleşim API'si ve Kapsam” dersinde ne öğreneceğim?
CSS Yerleşim API'siyle özel yerleşim algoritmaları oluşturun ve Houdini'nin kapsamını ve sınırlarını öğ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.
“CSS Yerleşim API'si ve Kapsam” 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
- CSS Türlenmiş Nesne Modeli (OM)
- CSS Özellikleri ve Değerleri API'si (@property)
- CSS Paint API'si: Worklet'ler
- CSS Yerleşim API'si ve Kapsam