Houdini nedir?

CSS Houdini projelerini öğrenirsin.

CSS Houdini ne işe yarar?

CSS Houdini, CSS motorunu JavaScript'e açan bir belirtimler topluluğudur. En temel yapı taşı worklet'tir: render hattının bir aşamasında çalışan küçük bir JavaScript modülüdür. Ana iş parçacığı dışında çalışır, bu yüzden DOM'a doğrudan dokunmaz.

Başlıca API'ler Paint API, Layout API, Properties & Values API ve Typed OM'dir. Her biri render yolunun farklı bir aşamasına müdahale eder.

Paint API'ye giriş

Paint API, bir worklet içinde tanımladığın çizimi arka plan olarak kullanmanı sağlar. Worklet registerPaint('isim', sınıf) ile kaydedilir; CSS tarafında background: paint(isim) yazman yeter.

Böylece gradyan ya da resim yerine kendi çizimini kullanırsın. Worklet, inputProperties ile okuyacağı CSS değişkenlerini bildirir; bu sayede çizim, değişkenlere tepki verir.

Uygulama Logo için grid desenini CSS'te yaz

Aşağıdaki CSS'i tamamla. .logo bildiriminde --cell-size: 16px ve background: paint(grid) olsun.

Örnek çözümü göster

/* logo için grid deseni */
.logo {
  --cell-size: 16px;
  background: paint(grid);
}

Kendini test et

Worklet hangi ortamda çalışır?
```
/* worklet nerede çalışır? */
```
- Yalnızca service worker içinde
- Render hattının bir aşamasında, ana iş parçacığı dışında
- Sayfa kapatılınca bir kez
- DOM'da her tıklamada
Cevabı göster

Render hattının bir aşamasında, ana iş parçacığı dışında — Doğru. Worklet, render hattının bir aşamasında ana iş parçacığı dışında çalışır.

paint() kullanarak arka planı yaz

.badge {
  background: paint(____);
}

Cevabı göster

.badge {
  background: paint(checker);
}

Houdini API'lerini amacına eşle

Paint API

Özel arka plan çizimi
Layout API

Özel düzen kutusu
Properties & Values API

Değişken kaydı ve tipi
Typed OM

Tip güvenli değer nesneleri

Sıradaki ders: Paint API

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler