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

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

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

Что?

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

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

* {
    outline: var(--outline);
    --outline: initial; // без этой строки любой дочерний элемент блока .block1 будет иметь значение .2em solid outline.
}
.block1 {
    --outline: .2em solid;
}

Синтаксис

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

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

--foo:; неправильно
--foo: ; правильно
--foo ≠ --FOO

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

body {
    --bgcolor: 20px;
    background-color: var(--bgcolor); // 20px (неправильно) = initial = transparent
}

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

var(--color1, var(--color2, var(--color3, red)))

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

// Это не сработает 
div {
  --height: 100;
  height: var(--height) + 'px';
}

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

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

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

div {
  --height: 100px;
  height: var(--height);
}

@media (max-width: 800px) {
  div {
   --height: 500px;
  }
}

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

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

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

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

#transition.slide {
    --bgcolor: yellow;
    background: var(--bgcolor);
    transition: 1s;
}

#transition.slide:active {
    --bgcolor: #0ca;
}

Темизация

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

button {
    --col: var(--color, black); 
    border: .1em solid var(--col);
    background: transparent;
    color: var(--col);
}

button:hover {
    background: var(--col);
    color: white;
}

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

<button>Click me</button>
<button style="--color: red">Click me</button>

JavaScript

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

// Получаем переменную из инлайновых стилей
element.style.getPropertyValue("--foo");
// Обычное получение переменной
getComputedStyle(element).getPropertyValue("--foo");
// Задаем переменную в инлайновых стилях
element.style.setProperty("--foo", 38 + 4);

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

var root = document.documentElement;

document.addEventListener("mousemove", evt => {
    let x = evt.clientX / innerWidth;
    let y = evt.clientY / innerHeight;

    root.style.setProperty("--mouse-x", x);
    root.style.setProperty("--mouse-y", y);
});
#mouse.slide {
    background-image: radial-gradient(
        at calc(var(--mouse-x) * 100%) calc(var(--mouse-y) * 100%),
        transparent, black);
}

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

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

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

Редакция: Команда 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