CSS змінні в Chrome

25

Від автора: з проблемою css змінних стикалися розробники, які створювали сайти під будь-які розміри екранів: раніше просте зміна одного з кольорів бренду було не просто подвигом. Доводилося на свій ризик шукати потрібний селектор і змінювати його колір або ж вистежувати кожен селектор і дивитися до чого він застосовується.

Щоб позбавитися від такого безладу більшість розробників переключалися на різні препроцессоры типу SASS або LESS з підтримкою змінних і подальшою їх конвертацією після запуску. Проблема тут в тому, що конвертація змінних код відбувається не в реальному часі, тобто не можна змінити колір зараз же без повторної компіляції нових стилів.

:root{
—main-color: #06c;
}
#foo h1{
color: var(—main-color);
}

У Chrome 49 присутня повна підтримка CSS змінних. Розробники можуть створювати змінні і використовувати їх в коді, змінювати їх значення в реальному часі – більше не потрібно ніяких додаткових компіляторів.

Змінна задається з допомогою подвійного тире, наприклад, ‘–primary-color: #ccc’. Викликати її можна з допомогою функції var в будь-якому місці. Також в Chrome ці змінні без проблем можна використовувати JavaScript.

Над CSS змінними кипіла робота декілька років, але поки що вони ще мало де підтримуються. Стандарт підтримують тільки Chrome 49, Firefox 43+, Safari 9.1 і iOS 9.3. Microsoft Edge, Opera або Android поки в планах немає.

Враховуючи те, що Chrome використовує більше половини людей в інтернеті, швидше за все, змінні швидко знайдуть підтримку і в інших браузерах.