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