CSS Houdini Tutorial

Apa itu Houdini?

• Paint API - memungkinkan Anda untuk memperluas CSS pada langkah (yang berarti tahap rendering) dari rendering elemen visual (warna, latar belakang, batas, dll.).
• Layout API - memungkinkan Anda untuk memperluas CSS pada langkah menentukan ukuran, posisi, dan perataan elemen.
• API Animasi - "titik ekstensi" pada langkah menampilkan dan menggerakkan elemen.

• API Model Objek yang Diketik
• API Properti Nilai & Khusus
• API Metrik Font
• Worklets

Masa depan CSS

API Typed Object Model (TOM)

selectedElement.style.fontSize = newFontSize + 'px' // newFontSize = 20
console.log(selectedElement.style.fontSize) // 20px

{
  value: 20,
  unit: 'px'
}

• computedStyleMap (): untuk parsing gaya yang dikomputasi (tidak built-in). Metode ini dipanggil sebelum parsing atau menggunakan metode lain.
• attributeStyleMap: untuk parsing dan memodifikasi inline styles. Ini adalah properti item.

//       ( )
selectedElement.computedStyleMap().get('font-size') // { value: 20, unit: 'px' }

//   
selectedElement.attributeStyleMap.set('font-size', CSS.em(2))
selectedElement. attributeStyleMap.set('color', 'blue')

//    
selectedElement.computedStyleMap().get('font-size') // { value: 20, unit: 'px' }

//    
selectedElement.attributeStyleMap.get('font-size') // { value: 2, unit: 'em' }

• hapus: hapus semua gaya sebaris
• delete: menghapus properti CSS tertentu dan nilainya
• has: mengembalikan true / false tergantung pada ketersediaan properti yang ditentukan
• append: menambahkan nilai ekstra ke properti yang mendukung banyak nilai

Deteksi

let selectedElement = document.getElementById('example')

if(selectedElement.attributeStyleMap){
  // ...
}

if(selectedElement.computedStyleMap){
  // ...
}

Status Spesifikasi

Dukung

API Properti dan Nilai Kustom

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
})

• nama: nama properti khusus
• sintaks: instruksi untuk parsing. Nilai yang ditentukan sebelumnya adalah: <color>, <integer>, <number>, <length>, <percentage>, dll.
• initialValue: nilai default (sebelum mengganti, serta ketika kesalahan terjadi)

.gradient-box {
  background: linear-gradient(45deg, rgba(255, 255, 255, 1) 0% var(--colorPrimary) 60%);
  transition: --colorPrimary 0.5s ease;
  ...
}

.gradient-box:hover {
  --colorPrimary: red;
  ...
}

@property --colorPrimary {
  syntax: '<color>';
  inherits: false;
  initial-value: blue;
}

Contoh

Deteksi

if(CSS.registeredProperty) {
  // ...
}

Status Spesifikasi

Dukung

API Metrik Font

Status Spesifikasi

Vorkleta

• Paint Worklet - Paint API
• Worklet Animasi - API Animasi
• Layout Worklet - Layout API

API Cat

1. Tulis dan daftarkan worklet menggunakan fungsi registerPaint
2. Panggil worklet dalam HTML atau JS menggunakan CSS.paintWorklet.addModule
3. Gunakan metode paint () dalam CSS bersama dengan nama vorklet dan argumen yang disampaikan

registerPaint('paintWorkletExample', class {
  static get inputProperties() { return ['--myVariable']; }
  static get inputArguments() { return ['<color>']; }
  static get contextOptions() { return {alpha: true} }

  paint(ctx, size, properties, args) {
    // ...
  }
})

• inputProperties: Array properti CSS kustom yang diamati worklet. Array ini mewakili dependensi
• inputArguments: array argumen yang dapat diteruskan dari suatu fungsi ke CSS eksternal
• contextOptions: transparansi warna. Jika salah, semua warna akan sepenuhnya buram
• paint: fungsi utama mengambil argumen berikut:
  
  
  • ctx: konteks gambar 2D yang hampir identik dengan konteks kanvas 2D API Kanvas
  • size: sebuah objek dengan lebar dan tinggi elemen. Nilai tergantung pada proses rendering tata letak. Ukuran kanvas sama dengan ukuran item sebenarnya
  • properti: variabel yang terkandung dalam inputProperties
  • args: array argumen yang dilewatkan ke fungsi paint

CSS.paintWorklet.addModule('path/to/worklet/file.js')

CSS.paintWorklet.addModule('https://url/to/worklet/file.js')

.example-element {
  // paintWorkletExample -  
  // blue - ,  
  background: paint(paintWorkletExample, blue);
}

Contoh

Deteksi

if(‘paintWorklet’ in CSS){
  // …
}

@supports(background: paint(paintWorkletExample)){
  // …
}

Status Spesifikasi

Dukung

API Animasi

registerAnimation(‘animationWorkletExample’, class {
  constructor(options){
    // …
  }
  animate(currentTime, effect){
    // …
  }
})

• constructor: dipanggil ketika instance baru dibuat. Digunakan untuk pengaturan umum.
• animate: Fungsi utama yang berisi logika animasi. Parameter berikut diterima:
  
  
  • currentTime: cap waktu pada timeline tertentu
  • efek: berbagai efek yang digunakan dalam animasi

//   
await CSS.animationWorklet.addModule(‘path/to/worklet/file.js’)

//    
const elementExample = document.getElementById(‘element-example’)

//  
const effectExample = new KeyframeEffect(
  elementExample, //  
  [ // … ], //  
  { // … } //  - , ,    ..
)

//        
new WorkletAnimation(
  ‘animationWorkletExample’ //  
  effectExample, //  
  document.timeline, //  
  {},  //   
).play()

Prangko waktu

animate(currentTime, effect){
  effect.localTime = 3000 // 1000ms  + 2000ms  
}

animate(currentTime, effect){
  effect.localTime = currentTime // y = x  
}

const scrollTimelineExample = new ScrollTimeline({
  scrollSource: scrollElement, // ,     
  orientation: ‘vertical’, //  
  startScrollOffset: ‘200px’, //  
  endScrollOffset: ‘800px’, //  
  timeRange: 1200, //  
  fill: ‘forwards’ //  
})

Contoh

Deteksi

if(CSS.animationWorklet){
  // …
}

Status Spesifikasi

Dukung

Layout API

registerLayout(‘exampleLayout’, class{
  static get inputProperties() { return [‘--example-variable’] }

  static get childrenInputProperties() { return [‘--exampleChildVariable’] }

  static get layoutOptions(){
    return {
      childDisplay: ‘normal’,
      sizing: ‘block-like’
    }
  }

  intrinsicSizes(children, edges, styleMap){
    // …
  }

  layout(children, edges, constraints, styleMap, breakToken){
    // …
  }
})

• inputProperties: array properti CSS khusus yang ditonton oleh worklet dan milik orang tua, elemen yang menyebabkan tata letak untuk di-render. Array ini mewakili dependensi tata letak
• childrenInputProperties: array properti CSS khusus yang ditonton oleh widget dan milik keturunan
• layoutOptions: mendefinisikan properti tata letak berikut:
  
  
  • childDisplay: Nilai yang ditentukan sebelumnya adalah blok dan normal. Menentukan bagaimana item ditampilkan (blok atau garis)
  • sizing: Nilai-nilai yang ditentukan sebelumnya adalah seperti blok dan manual. Menentukan kebutuhan untuk perhitungan awal ukuran elemen (jika tidak ditentukan)
• intrinsicSizes: mendefinisikan bagaimana wadah atau isinya ditampilkan dalam konteks tata letak:
  
  
  • children: child dari elemen yang menyebabkan tata letak halaman di-render
  • tepi: batas wadah
  • styleMap: model objek gaya wadah yang diketik
• tata letak: fungsi utama untuk bekerja dengan tata letak:
  
  
  • anak-anak: elemen anak
  • ujung: batas
  • kendala: kendala yang dipaksakan oleh tata letak induk
  • styleMap: model objek gaya wadah yang diketik
  • breakToken: breakpoint untuk pagination atau print layout splitting

CSS.layoutWorklet.addModule(‘path/to/worklet/file.js’)

.example-element {
  display: layout(exampleLayout)
}

Cara Layout API bekerja dengan tata letak

Contoh

Deteksi

if(CSS.layoutWorklet){
  // …
}

Status Spesifikasi

Dukung

Houdini dan peningkatan progresif

Identifikasi selalu dukungan untuk menghindari kesalahan.

Gunakan Houdini untuk meningkatkan tampilan dan visualisasi.

Gunakan CSS standar sebagai alternatif

Kesimpulan

Referensi