CSS: статический метод registerProperty()

Статический метод CSS.registerProperty() регистрирует пользовательские свойства, позволяя проверять тип свойства, устанавливать значения по умолчанию и определять наследование свойств.

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

propertyDefinition

Объект, содержащий следующие свойства:

name

Строка, представляющая имя определяемого свойства.

syntax Необязательно

Строка, представляющая ожидаемый синтаксис определяемого свойства. По умолчанию "*".

inherits

Булево значение, определяющее, должно ли определённое свойство наследоваться (true) или нет (false). По умолчанию false.

initialValue Необязательно

Строка, представляющая начальное значение определённого свойства.

undefined.

InvalidModificationError DOMException

Указанное name уже зарегистрировано.

SyntaxError DOMException

Указанное name не является допустимым именем пользовательского свойства (начинается с двух тире, например, --foo).

TypeError

Не были предоставлены необходимые члены словаря name и/или inherits.

Следующий пример регистрирует пользовательское свойство, --my-color, используя registerProperty(), как цвет, задаёт значение по умолчанию и не наследует это значение:

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

В этом примере пользовательское свойство --my-color зарегистрировано с синтаксисом <color>. Теперь его можно использовать для анимации градиента при наведении или фокусе. Обратите внимание, что с зарегистрированным свойством анимация работает, но не работает с незарегистрированным!

.registered {
  --my-color: #c0ffee;
  background-image: linear-gradient(to right, #fff, var(--my-color));
  transition: --my-color 1s ease-in-out;
}

.registered:hover,
.registered:focus {
  --my-color: #b4d455;
}

.unregistered {
  --unregistered: #c0ffee;
  background-image: linear-gradient(to right, #fff, var(--unregistered));
  transition: --unregistered 1s ease-in-out;
}

.unregistered:hover,
.unregistered:focus {
  --unregistered: #b4d455;
}
button {
  font-size: 3vw;
}

Можно добавить эти стили к кнопкам:

<button class="registered">Background Registered</button>
<button class="unregistered">Background Not Registered</button>

• Использование API свойств и значений CSS
• CSS
• CSS.supports()
• CSS.escape()
• Производящие функции CSS
• CSS @property