View Transition API позволяет анимировать flex и grid позиционирование 🧑‍🎓

С его помощью ты сможешь делать плавные переходы align-content и justify-content, всего в пару строчек JS

function setRandomAlignments() {
  document.body.style.alignContent = positions[getRandomInt(3)]
  document.body.style.justifyContent = positions[getRandomInt(3)]
}

document.body.addEventListener('click', e => {
  if (!document.startViewTransition)
    setRandomAlignments()
  else
    document.startViewTransition(() => {
      setRandomAlignments()
    })
})

CodePen (работает в хроме начиная со 111 версии, 63.55% по caniuse)

Что нового из CSS я уже использую в продакшене? 🛁

Я всё время пишу про новые CSS фичи, но большинство из них ещё не готово к использованию в реальных проектах, сегодня хочу поделиться, какими современными CSS фичами я пользуюсь в продакшене

1. Псевдоселектор :has — мощный селектор для выбора родительского элемента, который содержит в себе конкретный дочерний элемент (87.43% на caniuse)
2. display: contents — перестаёт отображать элемент, как будто его не существует в DOM, очень удобно для адаптива (95.83% на caniuse)
3. Псевдоселектор :is — удобно для сокращения повторящихся вложенностей для конкретного селектора (96.91% на caniuse)
4. Псевдоселектор :where — для меня это альтернатива для :is, но с нулевой специфичностью (92.82% на caniuse)
5. Псевдоселектор :focus-within — удобно стилизовать контейнер, который содержит инпут с фокусом (95.81 на caniuse)