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

Sıradaki ders: Properties ve values API

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler