CSS Houdini: Khi dev có thể hack vào engine của trình duyệt

CSS Houdini là gì?

CSS Houdini là tập hợp các API giúp lập trình viên tương tác trực tiếp với CSS engine của trình duyệt. Thay vì chờ trình duyệt hỗ trợ thuộc tính mới, bạn có thể tự viết “polyfill chuẩn hóa” ngay trong code.

Những thành phần chính của Houdini:

• Paint API: Tạo background, border, mask bằng JavaScript, nhưng được cache và render như CSS gốc.
• Properties & Values API: Định nghĩa custom properties với kiểu dữ liệu rõ ràng.
• Typed OM: Truy cập và thao tác giá trị CSS dưới dạng object typed, thay vì string parsing thủ công.
• Layout API: Xây dựng mô hình layout mới (ví dụ masonry grid) trực tiếp trong CSS engine.
• Animation Worklet: Kiểm soát animation mượt mà với hiệu năng cao.

Ví dụ: Custom background với Paint API

Với Houdini, bạn có thể tự định nghĩa background không giới hạn:

/* Đăng ký paint worklet */
CSS.paintWorklet.addModule('checkerboard.js');

/* CSS sử dụng như thuộc tính bình thường */
.card {
  background: paint(checkerboard);
}

Trong file checkerboard.js:

registerPaint('checkerboard', class {
  static get inputProperties() { return ['--checker-color']; }
  paint(ctx, geom, properties) {
    const color = properties.get('--checker-color').toString() || '#000';
    const size = 20;
    for (let y = 0; y < geom.height; y += size) {
      for (let x = 0; x < geom.width; x += size) {
        ctx.fillStyle = (x + y) / size % 2 ? color : '#fff';
        ctx.fillRect(x, y, size, size);
      }
    }
  }
});

Kết quả: một background caro động, được render bởi chính engine CSS, hiệu năng cao hơn canvas truyền thống.

Custom properties với kiểu dữ liệu

Thay vì --var chỉ là string, bạn có thể khai báo rõ ràng:

CSS.registerProperty({
  name: '--angle',
  syntax: '<angle>',
  inherits: false,
  initialValue: '0deg'
});

Điều này cho phép animation mượt mà và type-safe hơn:

.box {
  --angle: 0deg;
  transform: rotate(var(--angle));
  transition: --angle 1s;
}

Typed OM: làm việc với CSS như object

Thay vì parse string, giờ bạn có thể tương tác với CSS có kiểu rõ ràng:

const el = document.querySelector('.box');
const styleMap = el.computedStyleMap();
console.log(styleMap.get('transform')); // Trả về CSSTransformValue

Giúp bạn thao tác giá trị CSS dễ dàng và chính xác hơn nhiều so với getComputedStyle.

Lợi ích của CSS Houdini

• Mở rộng CSS: Không còn bị giới hạn bởi trình duyệt.
• Hiệu năng cao: Code chạy trong CSS engine, không qua DOM reflow tốn kém.
• Tái sử dụng: Worklet có thể đóng gói và chia sẻ như thư viện CSS.
• Thúc đẩy sáng tạo: Tự tạo layout, background, animation độc đáo.

Khả năng hỗ trợ trình duyệt

Hiện tại, Chrome, Edge và Safari đã hỗ trợ nhiều API của Houdini (Paint API, Properties & Values, Typed OM). Firefox vẫn đang trong quá trình thử nghiệm. Với project production, nên kiểm tra Can I Use trước khi áp dụng rộng rãi.

Best practice khi dùng Houdini

• Bắt đầu với Paint API để thử nghiệm background sáng tạo.
• Dùng Properties & Values API cho biến CSS có kiểu dữ liệu.
• Kết hợp Houdini với fallback truyền thống để đảm bảo cross-browser.
• Đóng gói worklet thành module tái sử dụng, chia sẻ cho team/dev khác.

Tóm tắt nhanh

• CSS Houdini mở ra khả năng mở rộng CSS chưa từng có.
• Các API mạnh: Paint, Layout, Animation, Typed OM.
• Cho phép viết CSS thông minh, hiệu năng cao, sáng tạo vượt giới hạn.
• Đã được hỗ trợ trên trình duyệt hiện đại, đáng để học và áp dụng trong 2025.