CSS переменные

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

Определение и назначение CSS переменных

CSS переменные (custom properties) объявляются с префиксом -- и доступны через объект style любого HTML-элемента или через глобальные селекторы, например:

:root {
  --tooltip-offset-x: 0px;
  --tooltip-offset-y: 8px;
  --tooltip-background: #333;
  --tooltip-color: #fff;
}

Использование таких переменных позволяет легко изменять положение, цвет и другие свойства всплывающих элементов динамически через JavaScript, что идеально сочетается с Floating UI, где расчёт координат производится в реальном времени.

Интеграция CSS переменных с Floating UI

Floating UI предоставляет низкоуровневый API для расчёта позиции элемента относительно якоря. Пример базовой интеграции:

import { computePosition, offset, flip, shift } from '@floating-ui/dom';

const reference = document.querySelector('#button');
const floating = document.querySelector('#tooltip');

computePosition(reference, floating, {
  middleware: [offset(8), flip(), shift({ padding: 5 })],
}).then(({ x, y }) => {
  floating.style.setProperty('--tooltip-offset-x', `${x}px`);
  floating.style.setProperty('--tooltip-offset-y', `${y}px`);
});

В этом примере координаты x и y записываются в CSS переменные, которые затем могут использоваться в стилях:

#tooltip {
  position: absolute;
  transform: translate(var(--tooltip-offset-x), var(--tooltip-offset-y));
  background: var(--tooltip-background);
  color: var(--tooltip-color);
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
}

Преимущество такого подхода — отделение логики вычислений от стилей, что упрощает поддержку и изменение интерфейса.

Динамическая адаптация стилей

CSS переменные легко менять в зависимости от состояния приложения или события пользователя. Например, изменение цвета фона при наведении:

floating.addEventListener('mouseenter', () => {
  floating.style.setProperty('--tooltip-background', '#555');
});

floating.addEventListener('mouseleave', () => {
  floating.style.setProperty('--tooltip-background', '#333');
});

Такая интеграция с Floating UI позволяет сохранять точность позиционирования и одновременно менять визуальные характеристики без пересчета позиции вручную, что особенно важно для сложных интерфейсов с анимацией.

Анимация и переходы

CSS переменные отлично работают с анимациями и переходами. Например, плавное смещение тултипа:

#tooltip {
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0;
}

#tooltip.show {
  opacity: 1;
  transform: translate(var(--tooltip-offset-x), var(--tooltip-offset-y));
}

В JavaScript можно управлять состоянием show и координатами через Floating UI:

reference.addEventListener('mouseenter', async () => {
  const { x, y } = await computePosition(reference, floating, {
    middleware: [offset(10), flip(), shift({ padding: 5 })],
  });
  floating.style.setProperty('--tooltip-offset-x', `${x}px`);
  floating.style.setProperty('--tooltip-offset-y', `${y}px`);
  floating.classList.add('show');
});

reference.addEventListener('mouseleave', () => {
  floating.classList.remove('show');
});

Такой подход обеспечивает плавность анимаций и точность позиционирования, сохраняя код чистым и удобным для расширения.

Использование CSS переменных для адаптивного позиционирования

Floating UI поддерживает адаптивное позиционирование, когда тултип или меню автоматически подстраиваются под границы окна. Использование CSS переменных позволяет передавать эти значения напрямую в стили:

const updatePosition = async () => {
  const { x, y, placement } = await computePosition(reference, floating, {
    middleware: [offset(10), flip(), shift({ padding: 8 })],
  });
  floating.style.setProperty('--tooltip-offset-x', `${x}px`);
  floating.style.setProperty('--tooltip-offset-y', `${y}px`);
  floating.setAttribute('data-placement', placement);
};

И в CSS можно менять оформление в зависимости от позиции:

#tooltip[data-placement^='top'] {
  border-bottom: 5px solid var(--tooltip-background);
}

#tooltip[data-placement^='bottom'] {
  border-top: 5px solid var(--tooltip-background);
}

Взаимодействие с пользовательскими темами

CSS переменные облегчают интеграцию Floating UI с системой тем. Например, можно менять цвета тултипов для светлой и тёмной темы без изменения логики позиционирования:

:root[data-theme='light'] {
  --tooltip-background: #eee;
  --tooltip-color: #222;
}

:root[data-theme='dark'] {
  --tooltip-background: #333;
  --tooltip-color: #fff;
}

JavaScript код для расчета позиции остаётся идентичным, а визуальная часть адаптируется автоматически через CSS переменные.

Итоговое преимущество

Использование CSS переменных с Floating UI позволяет:

  • Отделить позицию и визуальные стили;
  • Динамически менять координаты и оформление;
  • Легко интегрировать анимации и переходы;
  • Поддерживать адаптивность и темы интерфейса;
  • Минимизировать прямое вмешательство в DOM для стилей, повышая производительность и читаемость кода.

Такой подход делает комбинацию Floating UI и CSS переменных мощным инструментом для современных интерфейсов с динамическими всплывающими элементами.

Оглавление