Користувальницькі властивості CSS досягли прийнятної підтримки

20

Від автора: настроювані властивості CSS досягли прийнятної підтримки, і тепер всі компоненти значення можна міняти окремо один від одного. В CSS у деяких властивостей є скорочення. Одне властивість може приймати значення розділені. Даний стиль спрощення називається синтаксичний цукор. Розберемо на прикладі властивості transition.

Його можна записати наступним чином:

.element {
transition: border 0.2 s ease-in-out;
}

Ми також могли б записати це властивість в такій формі:

.element {
transition-property: border;
transition-duration: 0.2 s;
transition-timing-function: ease-in-out;
}

Кожна частина значення в скороченні посилається на окрему властивість. Але такий принцип працює не скрізь. Наприклад, властивість box-shadow:

.element {
box-shadow: 0 0 10px #333;
}

Це властивість не є скороченням від інших. Немає властивостей box-shadow-color і box-shadow-offset. Ось тут нам і допоможуть користувальницькі властивості! Код можна записати наступним чином:

:root {
—box-shadow-offset-x: 10px;
—box-shadow-offset-y: 2px;
—box-shadow-blur: 5px;
—box-shadow-spread: 0;
—box-shadow-color: #333;
}
.element {
box-shadow:
var(—box-shadow-offset-x)
var(—box-shadow-offset-y)
var(—box-shadow-blur)
var(—box-shadow-spread)
var(—box-shadow color);
}

Багато букв, але код працює. З такою формою запису можна витворяти різні круті штуки. Можна міняти окремі значення за допомогою JS. Ось так:

document.documentElement.style.setProperty(«—box-shadow-color», «green»);

Можна використовувати каскадування, якщо воно потрібне. Якщо —box-shadow-color: blue поставити на селектор, відмінний від :root, то ми перезапишем колір. Якщо змінна взагалі не задалася, можна використовувати фолбеки:

.element {
box-shadow:
var(—box-shadow-offset-x, 0)
var(—box-shadow-offset-y, 0)
var(—box-shadow-blur, 5px)
var(—box-shadow-spread, 0)
var(—box-shadow-color black);
}

А що там з властивістю transform? З ним все дуже забавно. Воно приймає кілька значень через пропуск, тобто кожне з них можна задати через власну властивість:

:root {
—transform_1: scale(2);
—transform_2: rotate(10deg);
}
.element{
transform: var(—transform_1) var(—transform_2);
}

А що робити з елементами, у яких є свої властивості з скороченнями, але також є декілька значень, розділених комою? Ще один кейс використання:

:root {
—bgImage: url(basic_map.svg);
—image_1_position: 50px 20px;
—image_2_position: bottom right;
}
.element {
background:
var(—bgImage) no-repeat var(—image_1_position),
var(—bgImage) no-repeat var(—image_2_position);
}

Або transition?

:root {
—transition_1_property: border;
—transition_1_duration: 0.2 s;
—transition_1_timing_function: ease;
—transition_2_property: background;
—transition_2_duration: 1s;
—transition_2_timing_function: ease-in-out;
}
.element {
transition:
var(—transition_1_property)
var(—transition_1_duration)
var(—transition_1_timing_function),
var(—transition_2_property)
var(—transition_2_duration)
var(—transition_2_timing_function),
}

Dan Wilson нещодавно використовував такий підхід з анімацією, щоб показати, як можна поставити на паузу окремий крок!

Підтримка в браузерах. Зелений – повна підтримка від зазначеної версії і вище. Жовтий – часткова підтримка. Червоний – підтримка відсутня. Більш детально про підтримку можна дізнатися на Caniuse.