#такое дня

Полку способов центровки элемента относительно родителя прибыло!

inset-area: center;

Нашёл это Темани Афиф aka CSS Challenges и суть-то в следующем: inset-area это часть CSS Anchor Positioning API для поповеров (извините, слово смешное просто. popover, конечно же): https://developer.chrome.com/blog/anchor-positioning-api

То есть предназначено оно чтобы прибить всплывающее нечто к центру элемента. Но каким-то образом протекло наружу.

Демо: https://codepen.io/t_afif/pen/OJYwybK

Обсуждение: https://github.com/w3c/csswg-drafts/issues/10500

TL;DR: не надо это использовать, это просто курьёз, не более.

#css #vertical #center

#codepen дня

Фокусы с типографикой в CSS весьма ограничены, но даже имея на руках лишь их — можно вытворять эффектные вещи.

Например, комбинируя грид и вертикальный режим вывода текста можно получить забавную змейку, как на демо от Adam Argyle: https://codepen.io/alinaki/pen/VwOJoXY

Я форкаю кодпены, потому что они имеют особенность пропадать.

Заодно демо являет собой хороший пример контейнерных запросов, зажимая размер шрифта в адекватных рамках:

grid
font-size: max(1rem, 15cqmin)
writing-mode: vertical-rl
line-height: 1.1cap

Пользуемся :)

#css #vertical #text