Пользовательские свойства CSS достигли приемлемой поддержки

Дата публикации: 2017-05-17

От автора: пользовательские свойства CSS достигли приемлемой поддержки, и теперь все компоненты значения можно менять отдельно друг от друга. В CSS у некоторых свойств есть сокращения. Одно свойство может принимать разделенные значения. Данный стиль упрощения называется синтаксический сахар. Разберем на примере свойства transition.

Его можно записать следующим образом:

.element {
  transition: border 0.2s ease-in-out;
}

.element {

transition: border 0.2s ease-in-out;

}

Мы также могли бы записать это свойство в такой форме:

.element {
  transition-property: border;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.element {

transition-property: border;

transition-duration: 0.2s;

transition-timing-function: ease-in-out;

}

Каждая часть значения в сокращении ссылается на отдельное свойство. Но такой принцип работает не везде. Например, свойство box-shadow:

.element {
  box-shadow: 0 0 10px #333;
}

.element {

box-shadow: 0 0 10px #333;

}

Это свойство не является сокращением от других. Нет свойств box-shadow-color и box-shadow-offset. Вот тут нам и помогут пользовательские свойства! Код можно написать следующим образом:

:root {
  --box-shadow-offset-x: 10px;
  --box-shadow-offset-y: 2px;
  --box-shadow-blur: 5px;
  --box-shadow-spread: 0;
  --box-shadow-color: #333;
}

.element {
  box-shadow:
    var(--box-shadow-offset-x)
    var(--box-shadow-offset-y)
    var(--box-shadow-blur)
    var(--box-shadow-spread)
    var(--box-shadow-color);
}

:root {

--box-shadow-offset-x: 10px;

--box-shadow-offset-y: 2px;

--box-shadow-blur: 5px;

--box-shadow-spread: 0;

--box-shadow-color: #333;

}

.element {

box-shadow:

var(--box-shadow-offset-x)

var(--box-shadow-offset-y)

var(--box-shadow-blur)

var(--box-shadow-spread)

var(--box-shadow-color);

}

Много букв, но код работает. С такой формой записи можно вытворять различные крутые штуки. Можно менять отдельные значения с помощью JS. Вот так:

document.documentElement.style.setProperty("--box-shadow-color", "green");

1	document.documentElement.style.setProperty("--box-shadow-color", "green");

Можно использовать каскадирование, если оно нужно. Если —box-shadow-color: blue задать на селектор, отличный от :root, то мы перезапишем цвет. Если переменная вообще не задалась, можно использовать фолбеки:

.element {
  box-shadow:
    var(--box-shadow-offset-x, 0)
    var(--box-shadow-offset-y, 0)
    var(--box-shadow-blur, 5px)
    var(--box-shadow-spread, 0)
    var(--box-shadow-color, black);
}

.element {

box-shadow:

var(--box-shadow-offset-x, 0)

var(--box-shadow-offset-y, 0)

var(--box-shadow-blur, 5px)

var(--box-shadow-spread, 0)

var(--box-shadow-color, black);

}

А что там со свойством transform? С ним все очень забавно. Оно принимает несколько значений через пробел, т.е. каждое из них можно задать через пользовательское свойство:

:root {
  --transform_1: scale(2);
  --transform_2: rotate(10deg);
}

.element{
  transform: var(--transform_1) var(--transform_2);
}

:root {

--transform_1: scale(2);

--transform_2: rotate(10deg);

}

.element{

transform: var(--transform_1) var(--transform_2);

}

А что делать с элементами, у которых есть свои свойства с сокращениями, но также есть несколько значений, разделенных запятой? Еще один кейс использования:

:root {
  --bgImage: url(basic_map.svg);
  --image_1_position: 50px 20px;
  --image_2_position: bottom right;
}

.element {
  background: 
    var(--bgImage) no-repeat var(--image_1_position),
    var(--bgImage) no-repeat var(--image_2_position);
}

:root {

--bgImage: url(basic_map.svg);

--image_1_position: 50px 20px;

--image_2_position: bottom right;

}

.element {

background:

var(--bgImage) no-repeat var(--image_1_position),

var(--bgImage) no-repeat var(--image_2_position);

}

Или transition?

:root {
  --transition_1_property: border;
  --transition_1_duration: 0.2s;
  --transition_1_timing_function: ease;
  
  --transition_2_property: background;
  --transition_2_duration: 1s;
  --transition_2_timing_function: ease-in-out;
}

.element {
  transition: 
    var(--transition_1_property) 
    var(--transition_1_duration) 
    var(--transition_1_timing_function),
    var(--transition_2_property) 
    var(--transition_2_duration) 
    var(--transition_2_timing_function),
}

:root {

--transition_1_property: border;

--transition_1_duration: 0.2s;

--transition_1_timing_function: ease;

--transition_2_property: background;

--transition_2_duration: 1s;

--transition_2_timing_function: ease-in-out;

}

.element {

transition:

var(--transition_1_property)

var(--transition_1_duration)

var(--transition_1_timing_function),

var(--transition_2_property)

var(--transition_2_duration)

var(--transition_2_timing_function),

}

Dan Wilson недавно использовал такой подход с анимацией, чтобы показать, как можно поставить на паузу отдельный шаг!

Поддержка в браузерах. Зеленый – полная поддержка от указанной версии и выше. Желтый – частичная поддержка. Красный – поддержка отсутствует. Более подробно о поддержке можно узнать на Caniuse.

Автор: Chris Coyier

Источник: //css-tricks.com/

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

Метки: css