CSS переменные в Chrome

CSS переменные в Chrome

От автора: с проблемой 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 использует более половины людей в интернете, скорее всего, переменные быстро обретут поддержку и в других браузерах.

Автор: Owen Williams

Источник: http://thenextweb.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree