Web-it-blog/05.07.17

Переменные в СSS

Не так давно CSS начал поддерживать переменные, которые можно использовать непосредственно в CSS, не прибегая к помощи препроцессоров. В этой статье мы узнаем о преимуществах этих переменных в CSS по сравнению с переменными в других препроцессорах, а так же их использования в различных браузерах.

Синтаксис CSS переменных.

Переменная CSS состоит из префикса и имени(--value). Это имя содержит значение, которое можно вызвать в любой части CSS, используя функцию var(). Ниже я представил пример того, как должна записываться переменная в CSS.

:root {
	--bgc: #FFE93C;
}
header {
	backgroun-color: var(--bgc);
}

Точно так же мы могли прописать эти переменные в любом другом препроцессоре(Sass, Less, PostCSS), но между ними все таки есть разница, которую стоит знать.

CSS переменные vs Переменные в препроцессорах.

Преимущества CSS переменных:

:root {
	--fz: 16px;
}
@media (max-width: 480px) {
	:root {
		--fz: 14px;
	}
}
body {
	font-size: var(--fz);
}

На примере выше видно, что при достижении ширины экрана меньше 480px, размер шрифта изменится и будет равен 14px. По моему это очень круто, так как нам не нужно компилировать стили на CSS, как это бы пришлось делать с препроцессорами, и поэтому мы можем спокойно воспользоваться нашей переменной в медиа запросе, не боясь, что наше значение будет проигнорировано.

Ещё одним плюсом CSS переменных является то, что мы их можем использовать в JavaScript. Так, например, мы можем получать значение переменной или переписать это значение.

Чтобы получить значение переменной нужно использовать getPropertyValue( ).

:root {
	--bgc: #FFE93C;
}
var style = getComputedStyle(document.documentElement),
	elemProp = style.getPropertyValue('--bgc');

alert(elemProp);  #значение будет равно #FFE93C

Чтобы переписать значение переменной, необходимо воспользоваться setPropertyValue( ).

:root {
	--bgc: #FFE93C;
}
main {
	background-color: var(--bgc);
}
document.documentElement.style.setPropertyValue('--bgc', #2131ae);  #цвет секции main сменится на #2131ae
:root {
	--main-width: 100%;
}
body {
	--main-width: 80%;
}
header {
	width: var(--main-width);
}

Как вы могли догадаться, у header будет width = 80%, так как header является дочерним элементом body, который в свою очередь имеет более высокий приоритет.

Преимущество переменных в препроцессорах:

И это одно из самых больших преимуществ переменных в препроцессорах, так как CSS переменные еще не поддерживаются всеми браузерами.

Поддержка CSS переменных в различных браузерах.

Как уже было сказано выше, CSS переменные поддерживаются не во всех браузерах, но в последнее время ситуация намного улучшилась, и лишь только в некоторых браузерах они не доступны(IE, Opera Mini, частично поддерживаются в Edge 16).

Благодаря тому, что в современном CSS есть директива @supports, мы можем проверить, поддерживаются ли CSS переменные в том или ином браузере, или нет.

@supports(--bgc: #FFE93C) {
	:root {
		--bgc: #FFE93C;
	}
	footer {
		background-color: var(--bgc);
	}
}

Так как @supports относительно новая директива, она может не сработать в некоторых браузерах, поэтому лучше всего обратиться за помощью к JavaScript. На GitHub Wes Bos выставил свое решение данной проблемы.