Введення в CSS змінні

32

Від автора: ця стаття – пояснення чудової презентації від Леї Вероу «CSS змінних: var(—subtitle)» з конференції FITC Toronto Web Unleashed 2016. Слайди можна подивитися за посиланням. Слайди були запрограмовані, тому в цій статті я передам вам той контекст, який міг бути втрачений.

Що?

Назва CSS змінні говорить сама за себе. Як і змінні в препроцессорах, в них зберігаються певні значення, які необхідно буде повторно використовувати.

CSS змінні працюють за принципом звичайних властивостей. Змінні успадковуються, однак ви не зможете переписати значення, задавши значення змінної initial в самому початку.

* {
outline: var(—outline);
—outline: initial; // без цього рядка будь дочірній елемент блоку .block1 буде мати значення .2em solid outline.
}
.block1 {
—outline: .2em solid;
}

Синтаксис

Змінні починаються з —, а викликаються як значення за допомогою конструкції var(—myvar). Уявіть, що це префиксное властивість, але з порожнім префіксом (як -webkit — тільки без слова webkit). Префікс був обраний спеціально, щоб ви могли без конфліктів використовувати змінні Sass/Less.

CSS змінні задаються, як і інші властивості. Їх навіть можна прописати всередині HTML атрибута style, що відкриває нам можливість темізаціі. CSS змінні чутливі до регістру і не можуть бути порожніми.

—foo:; неправильно
—foo: ; правильно
—foo ≠ —FOO

Якщо у змінної задано неправильне значення для того властивості, на яке вона застосовується, буде скомпільована помилка «Invalid at computed value time» і встановлено значення за замовчуванням initial.

body {
—bgcolor: 20px;
background-color: var(—bgcolor); // 20px (неправильно) = initial = transparent
}

Можна вказати фолбэк на той випадок, якщо змінна не задана. Як фолбэка можуть виступати інші змінні, в яких також можуть бути свої фолбэки.

var(—color1, var(—color2, var(—color3, red)))

В CSS відсутня конкатенація (крім властивості content), тому і CSS змінні не піддаються конкатенації. Тобто, наприклад, можна комбінувати змінні з числами і змінні з одиницями виміру.

// Це не спрацює
div {
—height: 100;
height: var(—height) + ‘px’;
}

Адаптивний дизайн, анімація і темізація

Медіа запити

CSS змінні можна використовувати у медіа запитах. Дуже корисна штука: ви всього один раз задаєте правило і можете переписувати значення змінної всередині медіа запиту.

div {
—height: 100px;
height: var(—height);
}
@media (max-width: 800px) {
div {
—height: 500px;
}
}

Keyframes анімація і плавні переходи

Так як не можна точно визначити, який тип даних буде зберігатися в CSS змінної, то на даний момент вони не піддаються анімації. Браузер просто не буде знати, що робити з анімацією.

Якщо спробувати анімувати змінну всередині keyframes анімації, то елемент буде просто перестрибувати з одного значення на інше.

Тим не менш, анімація може спрацювати для певних властивостей, якщо змінювати значення змінної властивості, до якого застосовано властивість transition:

#transition.slide {
—bgcolor: yellow;
background: var(—bgcolor);
transition: 1s;
}
#transition.slide:active {
—bgcolor: #0ca;
}

Темізація

З допомогою змінних можна створювати елементи тим, для яких не потрібно створювати нові класи. Можна також створювати публічні та приватні змінні. Наприклад: змінна —col буде приватною. Про неї ніхто не буде знати, крім автора. А змінна —color використовується в HTML для зміни теми. У прикладі нижче кнопка за промовчанням має чорний текст, рамки та фон при наведенні миші.

button {
—col: var(—color black);
border: .1em solid var(—col);
background: transparent;
color: var(—col);
}
button:hover {
background: var(—col);
color: white;
}

За допомогою зміни публічної змінної —color ми можемо генерувати кнопку будь-якого кольору. У нашому випадку кнопка буде мати червоний текст, рамки та фон при наведенні.

Click me
Click me

JavaScript

JS можна використовувати для отримання, встановлення і зміни CSS змінних – дуже потужний інструмент.

// Отримуємо змінну з инлайновых стилів
element.style.getPropertyValue(«—foo»);
// Звичайна отримання змінної
getComputedStyle(element).getPropertyValue(«—foo»);
// Визначаємо змінну в инлайновых стилях
element.style.setProperty(«—foo», 38 + 4);

Наступний приклад (взято з слайдів) задає змінну через JS по руху миші. Змінна використовується в CSS для створення радіального градієнта, який рухається за курсором миші.

var root = document.documentElement;
document.addEventListener. («mousemove», evt => {
нехай x = evt.clientX / innerWidth;
let y = evt.clientY / innerHeight;
root.style.setProperty(«—mouse-x», x);
root.style.setProperty(«—mouse-y, y);
});
#mouse.slide {
background-image: radial-gradient(
at calc(var(—mouse-x) * 100%) calc(var(—mouse-y) * 100%),
transparent, black);
}

Підтримка в браузерах

Підтримка у CSS змінних, можливо, краще, ніж ви думаєте. Однак вона все ще низька. За даними сайту caniuse CSS змінні підтримуються у всіх основних браузерах, крім IE11/Edge.