Layout API
CSS Layout API ile özel düzen öğrenirsin.
Layout API'ye giriş
Layout API, kendi düzen hesaplamasını yazmanı sağlar. registerLayout('isim', sınıf) ile bir layout worklet kaydedersin. Sınıfın layout(children, edges, constraints, style) yöntemi her alt öğenin konum ve boyutunu döndürür.
CSS tarafında display: layout(masonry) yazarsın. Bu, Flexbox ya da Grid'in ötesinde, örneğin masonry (duvar tipi) düzen için kullanılır.
Layout API sınırları
Layout API hâlâ deneyseldir; Chromium tabanlı tarayıcılarda bayrak arkasında çalışır. Üretimde kullanmadan önce @supports (display: layout(masonry)) ile destek sorgusu yap.
Worklet ana iş parçacığı dışında çalışır; bu yüzden DOM'a erişemez. Yalnızca kendisine verilen alt öğeleri ve stilleri okuyabilir. Bu kısıt, workletin hızlı ve güvenli kalmasını sağlar.
Uygulama Masonry akışı için CSS yaz
Aşağıdaki CSS'i tamamla. @supports bloğu hazır; içine .feed bildirimi ekle ve display: layout(masonry) ile gap: 1rem olsun.
Örnek çözümü göster
/* masonry akış */
@supports (display: layout(masonry)) {
.feed {
display: layout(masonry);
gap: 1rem;
}
}Kendini test et
-
Layout worklet'inin layout yöntemi ne döndürür?
/* layout yöntemi ne döndürür? */- Renk paletini
- Ağ yanıt süresini
- Alt öğelerin konum ve boyutunu
- Font dosyalarını
Cevabı göster
Alt öğelerin konum ve boyutunu — Doğru. layout yöntemi her alt öğenin konum ve boyutunu döndürür.
-
display: layout() kullanımını yaz
.masonry { display: layout(____); }Cevabı göster
.masonry { display: layout(masonry); } -
Layout API kavramlarını eşle
- registerLayout
- Worklet kaydeder
- display: layout(name)
- CSS'te kullanım
- layout() yöntemi
- Konum hesaplar
- @supports
- Destek sorgusu