🔗 CSS Anchor Positioning: новая фича 2025, которую вы почти наверняка пропустили.

Tooltip без absolute, попап без JavaScript, адаптив без головной боли. Всё в пару строк чистого CSS.

Всем привет. И так в наших интернетах почти все пропустили одну важную новость.

🤯 Что вообще случилось?

В мае 2025 CSS наконец-то научился «приклеивать» один элемент к другому без JS и абсолютных координат.

Это называется Anchor Positioning, и оно уже работает в Chrome, Edge и даже в Safari 🙈(в Firefox пока за флагом).

Теперь вы можете сделать tooltip, выпадашку или подсказку, которая:

- всегда будет рядом с нужным элементом
- сама поменяет положение, если не влезает
- вообще ни разу не попросит JS

📲 Те теперь никаких position: absolute, left: 50%, transform: translateX(-50%), никаких Popper.js.

Тултип сам найдёт например кнопку, сам к ней приклеится и сам сдвинется, если не поместится.
Хочешь по центру сверху - пожалуйста. Не влезает то упадёт вниз. Не влезает и там прыгнет вправо.

🧪 Где уже работает:

✅ Chrome 118+
✅ Edge 118+
✅ Safari 17.4
🔜 Firefox (пока через флаг)
📊 Покрытие: уже ~71 % пользователей по данным Can I Use

🧠 Зачем оно тебе:

- Tooltip никогда не вылетит за экран.
- Не надо JS.
- Не надо вычислять высоту/ширину, чтобы двигать.
- Элемент «ведёт себя» сам, как взрослый.
- CSS наконец стал чуть умнее.

📦 Краткие выводы:

Anchor Positioning это не просто фича, это новый слой логики в CSS

Теперь браузер сам определяет наилучшее положение, а CSS впервые стал реагирующим без JS. Это значит:

Визуальные редакторы (Taptop, Webflow и пр) должны будут внедрять новую логику интерфейсов, чтобы дать доступ к anchor'ам, position-try, fallback'ам и пр.

Многие UI-библиотеки, особенно no-code и low-code, основанные на фиксированных координатах, устаревают. Примеры: Tippy.js, Dropdown'ы в Bootstrap, старые Popper-конструкторы.

ИИ верстка: это уже реальный огромный шаг в сторону "авто-импорта" из Figma

ИИ-сервисы раньше не могли точно предсказать поведение таких интерактивных элементов, потому что всё строилось на костылях.

Теперь же авто-верстка выходит за рамки flex/grid и может начать реально генерировать динамически адаптирующиеся интерфейсы.

Так что теперь у ИИ появляется шанс делать не просто красивые блоки, а функциональные, живые интерфейсы, без JS-хака.

🚀 Что это значит для сферы?

Мы уходим от эпохи, где интерфейс собирался из "блоков", "позиционируй и молись".

Теперь CSS сам умеет решать, где лучше показать элемент, без лишнего кода.
А значит: билдерам, редакторам и даже ИИ-помощникам придётся учиться по-новому.

👀 И походу это только начало. В интересное время живем однако. Всех обняли.