Зачем нужны кастомные свойства

Для кого этот доклад?

Поддержка кастомных свойств

Что это такое?

CSS-переменные,

которые просто работают:


Зачем это нужно?

Дублирование кода


Дублирование кода


«Связывание» свойств


Прогресс

«Связывание» свойств


Прогресс

Наследование свойств


Влияние на SVG


<svg>
  <path fill="var(--flower-color, #ffb13b)">
  <g stroke="var(--stroke-color, #000000)">
</svg>

Влияние на SVG

Inline Inline symbol Remote symbol

На что это похоже?

CSS-мышцы статья


Подключаем мозг


JS → CSS


// задаём значение кастомному свойству
clock.style.setProperty('--hours', value);

// читаем значение кастомного свойства
getComputedStyle(clock).getPropertyValue('--hours');

JS → CSS


Что можно?

HTML → JS → CSS


Инпуты управляют свойством --number:


CSS → JS 🤔 статья


// задаём значение кастомному свойству
:root {
  --script: console.log("🙈");
}

// читаем значение кастомного свойства
const style = getComputedStyle(document.documentElement);
const script = style.getPropertyValue('--script');

// исполняем значение кастомного свойства
new Function(script)();

Итого


Кастомные свойства: