mefody.dev

Проблемы @starting-style

Директива @starting-style — это такой способ указать браузеру, какие стили у элемента должны быть в тот момент, когда он только появился на странице. И если у него ещё есть указанный transition, то можно сотворить красивую анимацию появления.

Джош Комо подсвечивает нюансы такого подхода:
- Стили внутри @starting-style имеют ту же специфичность, что и селектор, для которого они объявлены. Что, в целом, логично. Но ломает работу с инлайн-стилями, например.
- Когда в стилях появляется !important, то поддержка становится ещё веселее.

В общем, классические проблемы со специфичностью и каскадом. Джош в статье предлагает решения этих проблем. Правда, в конце приходит в выводу, что ему пока проще использовать обычные анимации через @keyframes.

Имхо, оба подхода создают какие-то трудности. Анимации так-то тоже могут перебить стили, которые ты не ожидаешь нечаянно затереть, потому что у них очень высокий приоритет над почти любыми другими стилями. Но, справедливости ради, я пока ни разу в своих проектах @starting-style не применял, как-то не было нужды.

https://www.joshwcomeau.com/css/starting-style/

Joshwcomeau

The Big Gotcha With @starting-style • Josh W. Comeau

CSS has been on fire lately, with tons of great new features. @starting-style is an interesting one; it allows us to use CSS transitions for enter animations, something previously reserved for CSS keyframe animations. But is the juice worth the squeeze?

👍17❤4🥴1

www.tgoop.com/mefody_dev/413

3.17K viewsOct 2 at 09:55

Проблемы @starting-style

Директива @starting-style — это такой способ указать браузеру, какие стили у элемента должны быть в тот момент, когда он только появился на странице. И если у него ещё есть указанный transition, то можно сотворить красивую анимацию появления.

Джош Комо подсвечивает нюансы такого подхода:
- Стили внутри @starting-style имеют ту же специфичность, что и селектор, для которого они объявлены. Что, в целом, логично. Но ломает работу с инлайн-стилями, например.
- Когда в стилях появляется !important, то поддержка становится ещё веселее.

В общем, классические проблемы со специфичностью и каскадом. Джош в статье предлагает решения этих проблем. Правда, в конце приходит в выводу, что ему пока проще использовать обычные анимации через @keyframes.

Имхо, оба подхода создают какие-то трудности. Анимации так-то тоже могут перебить стили, которые ты не ожидаешь нечаянно затереть, потому что у них очень высокий приоритет над почти любыми другими стилями. Но, справедливости ради, я пока ни разу в своих проектах @starting-style не применял, как-то не было нужды.

https://www.joshwcomeau.com/css/starting-style/

BY mefody.dev