📛 CSS Houdini

Panduan lengkap CSS Houdini untuk memperluas kemampuan CSS dengan JavaScript

📌 Elements

💡 Houdini Fundamental

CSS Houdini adalah kumpulan API yang memungkinkan pengembang untuk memperluas CSS dengan JavaScript, memberikan kontrol lebih besar atas rendering dan animasi.

houdini.css
/* Custom Properties and Values API */
CSS.registerProperty({
  name: '--gradient-angle',
  syntax: '<angle>',
  initialValue: '0deg',
  inherits: false
});

/* Paint API */
CSS.paintWorklet.addModule('paint-worklet.js');

/* Layout API */
CSS.layoutWorklet.addModule('layout-worklet.js');

/* Animation Worklet */
CSS.animationWorklet.addModule('animation-worklet.js');

📝 Penjelasan Detail:

â€ĸ CSS.registerProperty - Mendaftarkan properti kustom dengan tipe dan nilai awal
â€ĸ CSS.paintWorklet - Paint API untuk menggambar elemen secara dinamis
â€ĸ CSS.layoutWorklet - Layout API untuk membuat layout kustom
â€ĸ CSS.animationWorklet - Animation Worklet untuk animasi performa tinggi

🛠ī¸ Features

houdini-features.css
/* Custom Paint Worklet */
.custom-background {
  background: paint(checkerboard);
}

/* Custom Properties */
:root {
  --gradient-angle: 45deg;
  --gradient-colors: #9333ea, #a855f7;
}

/* Custom Layout Worklet */
.custom-layout {
  display: layout(masonry);
}

/* Animation Worklet */
.animated-element {
  animation: scroll 1s linear infinite;
}

ℹī¸ Browser Support

CSS Houdini didukung sebagian di Chrome 78+, Edge 79+, dan Opera 65+. Firefox dan Safari memiliki dukungan terbatas (per 2023).

📊 Basic Tables

houdini-values.css
/* Properties and Values API */
syntax: '<length>' /* Nilai panjang */
syntax: '<color>' /* Nilai warna */
syntax: '<angle>' /* Nilai sudut */
syntax: '<percentage>' /* Nilai persentase */

/* Paint API */
paint() /* Fungsi untuk menggambar */
registerPaint() /* Mendaftarkan paint worklet */

/* Layout API */
layout() /* Fungsi untuk layout kustom */
registerLayout() /* Mendaftarkan layout worklet */

📝 Penjelasan Detail:

â€ĸ Properties and Values API - Mendefinisikan properti kustom dengan tipe data spesifik
â€ĸ Paint API - Menggambar elemen secara dinamis dengan JavaScript
â€ĸ Layout API - Membuat layout kustom seperti masonry grid
â€ĸ Animation Worklet - Animasi performa tinggi di thread terpisah

🚀 Advanced Table

advanced-houdini.css
/* Complex Paint Worklet */
registerPaint('gradient-border', class {
  paint(ctx, size, props) {
    const angle = props.get('--gradient-angle').value;
    const colors = props.get('--gradient-colors').toString().split(',');
    const gradient = ctx.createLinearGradient(...);
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, size.width, size.height);
  }
});

/* Custom Layout Worklet */
registerLayout('masonry', class {
  layout(children, edges, constraints, styleMap) {
    // Custom layout logic here
  }
});

/* Animation Worklet */
registerAnimator('scroll', class {
  animate(currentTime, effect) {
    // Animation logic here
  }
});

ℹī¸ Advanced Support

Fitur lanjutan seperti Paint API dan Layout API memerlukan Chrome 78+ dengan flag experimental Web Platform Features.

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan CSS Houdini untuk kasus yang memerlukan kontrol tingkat rendah. Hindari penggunaan berlebihan untuk menjaga performa.

best-practices.css
/* ✅ Good - Simple Paint Worklet */
registerPaint('checkerboard', class {
  paint(ctx, size) {
    const tileSize = 20;
    for (let y = 0; y < size.height; y +=tileSize) {
      for (let x = 0; x < size.width; x +=tileSize) {
        const color = (x + y) % (tileSize * 2) === 0 ? '#9333ea' : '#a855f7';
        ctx.fillStyle = color;
        ctx.fillRect(x, y, tileSize, tileSize);
      }
    }
  }
});

/* ❌ Avoid - Overusing Houdini */
* {
  background: paint(complex-effect);
  display: layout(custom);
  animation: scroll 1s linear infinite;
}

📝 Penjelasan Detail:

â€ĸ Gunakan dengan bijak - Hanya untuk kasus yang memerlukan kontrol tingkat rendah
â€ĸ Optimasi performa - Hindari komputasi berat di worklet
â€ĸ Sediakan fallback - Pastikan situs tetap berfungsi tanpa Houdini
â€ĸ Test di berbagai browser - Dukungan browser masih terbatas
â€ĸ Gunakan polyfill - Untuk browser yang belum mendukung