Введение в CSS переменные

Введение в CSS переменные

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

Что?

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Синтаксис

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

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

Если у переменной задано неправильное значение для того свойства, на которое она применяется, будет скомпилирована ошибка «Invalid at computed-value time» и установлено значение по умолчанию initial.

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

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

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

Медиа запросы

CSS переменные можно использовать в медиа запросах. Очень полезная штука: вы всего один раз задаете правило и можете переписывать значение переменной внутри медиа запроса.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Так как нельзя точно определить, какой тип данных будет храниться в CSS переменной, то на данный момент они не поддаются анимации. Браузер просто не будет знать, что делать с анимацией.

Если попробовать анимировать переменную внутри keyframes анимации, то элемент будет просто перепрыгивать с одного значения на другое.

Тем не менее, анимация может сработать для определенных свойств, если изменять значение переменной свойства, к которому применено свойство transition:

Темизация

С помощью переменных можно создавать элементы тем, для которых не потребуется создавать новые классы. Можно также создавать публичные и приватные переменные. К примеру: переменная —col будет приватной. О ней никто не будет знать, кроме автора. А переменная —color используется в HTML для изменения темы. В примере ниже кнопка по умолчанию имеет черный текст, рамку и фон при наведении мыши.

При помощи изменения публичной переменной —color мы можем генерировать кнопку любого цвета. В нашем случае кнопка будет иметь красный текст, рамку и фон при наведении.

JavaScript

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

Следующий пример (взят из слайдов) задает переменную через JS по движению мыши. Переменная используется в CSS для создания радиального градиента, который движется за курсором мыши.

Поддержка в браузерах

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

Источник: http://codepen.io/

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree