CSS Houdini: пишем собственные свойства и анимации на JavaScript

Сегодня я расскажу, как CSS Houdini открывает двери в мир кастомной графики и высокопроизводительных анимаций, и почему это изменит ваш подход к веб-разработке.

Что такое CSS Houdini и зачем он нужен?

CSS Houdini это набор API, который позволяет разработчикам напрямую взаимодействовать с процессом рендеринга браузера. Если раньше мы были ограничены стандартными свойствами CSS, то теперь можем создавать собственные анимации, эффекты и даже layout-системы!

Проблемы, которые решает Houdini:

• Низкая производительность сложных анимаций на JavaScript.
• Ограниченность CSS-свойств для нестандартных задач.
• Зависимость от браузерных префиксов и их несовместимость.

Лично я столкнулся с Houdini, когда пытался реализовать плавную анимацию параллакса на мобильных устройствах. Традиционные методы «тормозили», но Animation Worklet решил проблему.

Paint API: рисуем как художники

Paint API позволяет создавать кастомные CSS-свойства для отрисовки фона, границ и других элементов.

Пример: Градиентный круг с анимацией

Шаг 1: Регистрируем кастомное свойство в CSS.

.element {
  --gradient-circle: checkered;
  background-image: paint(--gradient-circle);
}

Шаг 2: Пишем Paint Worklet на JavaScript.

registerPaint('gradientCircle', class {
  static get inputProperties() { return ['--color-start', '--color-end']; }

  paint(ctx, geom, properties) {
    const colors = [
      properties.get('--color-start').toString(),
      properties.get('--color-end').toString()
    ];
    const gradient = ctx.createLinearGradient(0, 0, geom.width, geom.height);
    gradient.addColorStop(0, colors[0]);
    gradient.addColorStop(1, colors[1]);

    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(geom.width / 2, geom.height / 2, 50, 0, Math.PI * 2);
    ctx.fill();
  }
});

Шаг 3: Подключаем Worklet в основной код.

CSS.paintWorklet.addModule('gradient-circle.js');

Сравнение Paint API и SVG/CSS-градиенты

Animation Worklet: анимации без лагов

Animation Worklet запускает анимации в отдельном потоке, избегая блокировки основного.

Пример: Параллакс-эффект при прокрутке

Шаг 1: Создаем Animation Worklet.

// parallax-animator.js
registerAnimator('parallax', class {
  constructor(options) {
    this._rate = 0.1;
  }

  animate(currentTime, effect) {
    const scrollPos = currentTime * this._rate;
    effect.localTime = scrollPos;
  }
});

Шаг 2: Инициализируем анимацию.

await CSS.animationWorklet.addModule('parallax-animator.js');

const scrollEffect = new KeyframeEffect(
  element,
  [{ transform: 'translateY(0)' }, { transform: 'translateY(-100%)' }],
  { duration: 1000 }
);

const animation = new WorkletAnimation(
  'parallax',
  scrollEffect,
  document.timeline,
  { rate: 0.1 }
);
animation.play();

Тест производительности (100 элементов)

Практические рекомендации

1. Проверяйте поддержку браузеров:
   Используйте полифиллы houdini.js для Safari и Firefox.
2. Оптимизируйте вычисления:
   В Paint API избегайте сложных математических операций в методе paint().
3. Отлаживайте через DevTools:
   В Chrome вкладка Performance показывает нагрузку Worklet-потоков.
4. Комбинируйте с CSS-переменными:
   css

   .element {
     --color-start: #ff0000;
     --color-end: #00ff00;
   }

Будущее CSS Houdini

Сейчас в разработке находятся:

• Layout API — кастомные сетки.
• Typed OM — типизованный доступ к CSS-свойствам.

CSS Houdini это не будущее, а настоящее. Уже сегодня можно создавать уникальные эффекты, которые работают на уровне нативного кода браузера. Попробуйте Paint API для кастомных фонов или добавьте анимацию через Worklet.