Антон Непша.js: “CSS Properties & Values API в Chrome 121 Есть такой CSS Properties & V…”

CSS Properties & Values API в Chrome 121

Есть такой CSS Properties & Values API, позволяющий объявлять типизированные кастомные проперти для стилей.

Это можно делать прям в CSS:

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #6667ab;
}

Или в JS:

CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: true,
  initialValue: "#6667ab"
})

И потом вы прям в стилях можете задавать это значение разным CSS-свойствам, или менять само это значение для разных элементов:

a {
  color: var(--my-color);
}

a:hover {
  --my-color: red;
}

И преимущество в том, что раз это свойство объявлено как syntax: <color>, то ничего, кроме цвета, мы в это значение записать не можем.

Поэтому, например, вот так сделать уже не получится:

.element {
  --my-color: 20px;
  margin-bottom: var(--my-color);
}

Ну так вот))

Это поддерживается не во всех браузерах, но в хроме поддержка CSS.registerProperty заявлена аж с 78 версии.

Помимо <color> в спецификации указаны и другие возможные типы. И вот среди них есть, например, <transform-function> — тип, позволяющий сохранять в виде переменных всякие директивы вроде rotate(25deg);

И вроде и в спецификации это указано (хоть это и Working Draft), и в хроме с 78 версии поддержка указана. Бери да пользуйся, казалось бы))

Но вот именно этот тип <transform-function>, вместе с ещё парочкой, перестал значится как «экспериментальная фича» только неделю назад, с выходом Chrome 121 🤷🏼‍♂️

То есть до 121 версии хрома этот синтаксис работал только у тех пользователей, кто намеренно включил в настройках браузера флаг Experimental Web Platform Features.

Вот и доверяй Working Draft'ам спецификаций))

И changeLog'ам браузеров тоже