API властивостей і значень CSS

Модуль API властивостей і значень CSS визначає метод для реєстрації нових властивостей CSS, визначаючи тип даних властивості, логіку її успадкування та, за бажанням, початкове значення. Цей API є розширенням модуля Кастомних властивостей як каскадних змінних, який дає розробникам змогу визначати кастомні властивості в CSS за допомогою синтаксису з двома дефісами (--). API властивостей і значень CSS є частиною пакета API Гудіні CSS.

Кастомні властивості дають змогу повторно використовувати значення в проєкті, щоб спростити складні або повторювані списки стилів. Базові кастомні властивості визначаються в модулі Кастомні властивості як каскадні змінні CSS. API властивостей і значень CSS розширює його, даючи змогу додавати до кастомних властивостей метадані за допомогою CSS, директиви @property або, інший варіант, за допомогою методу CSS.registerProperty JavaScript.

Задання метаданих на кастомних властивостях, як за допомогою CSS, так і через JavaScript, надає очікуваний тип даних, який браузер може використовувати в залежності від контексту, визначає початкове значення та дає змогу керувати успадкуванням.

Реєстрація кастомних властивостей через API властивостей і значень CSS є більш надійним способом, ніж більш базове оголошення кастомної властивості – каскадної змінної, особливо коли мова йде про перехід і анімацію значень, оскільки браузери можуть інтерполювати значення певного типу, тоді як властивості, які використовують синтаксис з двома дефісами (--), поводяться більше як підставлення рядка.

API властивостей і значень в дії

Щоб побачити, як кастомні властивості та значення можуть бути використані через API, наведіть курсор на рамку нижче.

CSS.registerProperty({
  name: "--stop-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "cornflowerblue",
});

.box {
  padding: 1rem;
  width: 90%;
  height: 4rem;
  font-family: sans-serif;
  font-size: large;
  color: white;
  border-radius: 0.5rem;
}

.box {
  background: linear-gradient(to right, var(--stop-color), lavenderblush);
  transition: --stop-color 2s;
}

.box:hover {
  --stop-color: aquamarine;
}

<div class="box"><p>Лінійний градієнт з переходом</p></div>

Ця рамка має тло, що складається з лінійного градієнта від --stop-color (кастомна властивість) до lavenderblush. Значенням --stop-color спершу задано cornflowerblue, але коли навести курсор на рамку, --stop-color переходить до aquamarine за дві секунди (linear-gradient(to right, aquamarine, lavenderblush)).

Довідка

Директиви

@property
- Дескриптор syntax
  - Помножувачі + і #
  - Комбінатор |
- Дескриптор inherits
- Дескриптор initial-value

Інтерфейси й API

Посібники

Використання API властивостей і значень CSS: Пояснює, як зареєструвати кастомні властивості в CSS і JavaScript, зі вказівками щодо того, як працювати з невизначеними та недійсними значеннями, резервними варіантами та успадкуванням.
API Гудіні: Пояснює, що таке Гудіні CSS і які в нього переваги, разом зі списком доступних API та їх статусами.

Споріднені концепції

Специфікації

Специфікація
CSS Properties and Values API Level 1 (CSS Properties and Values API 1)

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.