От автора: с проблемой css переменных сталкивались разработчики, которые создавали сайты под любые размеры экранов: раньше простое изменение одного из цветов бренда было не просто подвигом. Приходилось на свой риск искать нужный селектор и изменять его цвет или же выслеживать каждый селектор и смотреть к чему он применяется.
Чтобы избавиться от такого беспорядка большинство разработчиков переключались на различные препроцессоры типа SASS или LESS с поддержкой переменных и последующей их конвертацией после запуска. Проблема тут в том, что конвертация переменных в код происходит не в реальном времени, т.е. нельзя изменить цвет сейчас же без повторной компиляции новых стилей.
|
1 2 3 4 5 6 |
: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 использует более половины людей в интернете, скорее всего, переменные быстро обретут поддержку и в других браузерах.
Автор: Owen Williams
Источник: //thenextweb.com/
Редакция: Команда webformyself.
