От автора: в блоге WebKit подробно описано, как использовать отдельные свойства transform CSS в последней версии Safari Technology Preview. Это приводит браузер в соответствие со спецификацией CSS Transforms Module Level 2, которая выделяет функции translate(), rotate() и scale() из transform в отдельные свойства: translate, scale и rotate.
Итак, вместо того, чтобы связывать эти три функции со свойством transform:
.some-element { transform: translate(50px 50px) rotate(15deg) scale(1.2);
}… мы можем записать их индивидуально как отдельные свойства:
.some-element { translate: 50px 50px; rotate: 15deg; scale: 1.2;
}Если вы такие же, как я, вы сразу же подумаете: «какого черта нам нужно писать БОЛЬШЕ строк кода?» Я имею в виду, что мы привыкли видеть, что индивидуальные свойства становятся суб-свойствами сокращенного свойства, а не наоборот, как мы уже видели с background, border, font, margin, padding, place-items, и так далее.
Но команда WebKit выделяет несколько веских причин, по которым мы хотели бы это сделать:
Когда нужна только одна функция, проще написать одно свойство, например scale: 2; вместо transform: scale(2);.
Нужно намного меньше беспокоиться о случайном переопределении других свойств transform, когда они связаны вместе.
Намного проще изменить анимацию ключевого кадра для отдельного свойства, чем «предварительно вычислять» и «пересчитывать» промежуточные значения при их связывании transform.
Мы получаем более точный контроль над временем и ключевыми кадрами отдельных свойств.
В этом посте также есть несколько полезных советов. Например, сначала применяются новые отдельные свойства преобразования — translate, rotate и scale в указанном порядке — перед функциями в свойстве transform.
О, и мы не можем игнорировать поддержку браузера! На момент написания она крайне ограничена… в основном, это только Safari Technology Preview 117 и Firefox 72 и выше для колоссальной глобальной поддержки 3,9%: translate, rotate, scale.
В посте предлагается использовать, @supports, если вы хотите начать использовать свойства:
@supports (translate: 0) { /* Individual transform properties are supported */ div { translate: 100px 100px; }
} @supports not (translate: 0) { /* Individual transform properties are NOT supported */ div { transform: translate(100px, 100px); }
}Это пример кода, взятый прямо из поста. Изменение его может помочь нам избежать использования оператора not. Я не уверен, что это улучшение кода, но это больше похоже на прогрессивное улучшение, если сделать что-то вроде этого:
div { transform: translate(100px, 100px);
} @supports (translate: 0) { /* Individual transform properties are supported */ div { transform: none; translate: 100px 100px; }
}Таким образом, мы убираем сокращенные функции и уступаем место отдельным свойствам, но только если эти свойства поддерживаются.
Автор: Geoff Graham
Источник: css-tricks.com
Редакция: Команда webformyself.