Від автора: настроювані властивості 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.
