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

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

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

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

.element {
  transition: border 0.2s 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;
}

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
: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");

Можно использовать каскадирование, если оно нужно. Если —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);
}

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

: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);
}

Или 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),
}

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

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

Автор: Chris Coyier

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика 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