position: sticky — штука, которая превращает relative-элемент в fixed-элемент, как только он доезжает до заданного инсет-порога, и отлипает в момент, когда скроллинг выталкивает родителя за край.

Работает круто, пока вы не включите overflow, не забудете задать top, не положите элемент в flex c align-items: stretch, не сделаете таблицу из <thead> и не упрётесь в кейс с вложенными скролл-контейнерами.

А недавно я подумал: а вдруг есть фронтендеры, которые хотят сделать ужасный интерфейс? Ну не любят они пользователей. Или хотят сделать пакость работодателю, который их обидел. Где им взять советы?

Допустим, вы проводите популярный опрос по веб-разработке, посвященный CSS, и вам нужно решить, что включить в релиз этого года.

Вы можете подумать, что можете просто ввести “новые функции CSS 2025” в Google. Но хотя это и дает многообещающих зацепок, оно выводит множество шаблонного контента, который провозглашает CSS Grid “следующим большим событием”, несмотря на то, что поддерживается уже более восьми лет.

Нам нужен другой подход. В этой статье я сосредоточусь на CSS, но все ресурсы, ссылки на которые приведены здесь, охватывают все функции веб-платформы, включая JavaScript и HTML.

Сегодня я хотел бы поговорить о логических свойствах CSS — новом (и, возможно, более эффективном) способе определения свойств, которые по своей природе являются направленными.