Индивидуальные свойства преобразования CSS в Safari Technology Preview

Индивидуальные свойства преобразования CSS в Safari Technology Preview

От автора: в блоге WebKit подробно описано, как использовать отдельные свойства transform CSS в последней версии Safari Technology Preview. Это приводит браузер в соответствие со спецификацией CSS Transforms Module Level 2, которая выделяет функции translate(), rotate() и scale() из transform в отдельные свойства: translate, scale и rotate.

Итак, вместо того, чтобы связывать эти три функции со свойством transform:

… мы можем записать их индивидуально как отдельные свойства:

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

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

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

Если вы такие же, как я, вы сразу же подумаете: «какого черта нам нужно писать БОЛЬШЕ строк кода?» Я имею в виду, что мы привыкли видеть, что индивидуальные свойства становятся суб-свойствами сокращенного свойства, а не наоборот, как мы уже видели с background, border, font, margin, padding, place-items, и так далее.

Но команда WebKit выделяет несколько веских причин, по которым мы хотели бы это сделать:

Когда нужна только одна функция, проще написать одно свойство, например scale: 2; вместо transform: scale(2);.

Нужно намного меньше беспокоиться о случайном переопределении других свойств transform, когда они связаны вместе.

Намного проще изменить анимацию ключевого кадра для отдельного свойства, чем «предварительно вычислять» и «пересчитывать» промежуточные значения при их связывании transform.

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

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

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

Мы получаем более точный контроль над временем и ключевыми кадрами отдельных свойств.

В этом посте также есть несколько полезных советов. Например, сначала применяются новые отдельные свойства преобразования — translate, rotate и scale в указанном порядке — перед функциями в свойстве transform.

О, и мы не можем игнорировать поддержку браузера! На момент написания она крайне ограничена… в основном, это только Safari Technology Preview 117 и Firefox 72 и выше для колоссальной глобальной поддержки 3,9%: translate, rotate, scale.

В посте предлагается использовать, @supports, если вы хотите начать использовать свойства:

Это пример кода, взятый прямо из поста. Изменение его может помочь нам избежать использования оператора not. Я не уверен, что это улучшение кода, но это больше похоже на прогрессивное улучшение, если сделать что-то вроде этого:

Таким образом, мы убираем сокращенные функции и уступаем место отдельным свойствам, но только если эти свойства поддерживаются.

Автор: Geoff Graham

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

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

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

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

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

PSD to HTML

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

Смотреть

Метки:

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

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

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

Комментирование закрыто.