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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Или transition?

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

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

Автор: Chris Coyier

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

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

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на 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