Если ты когда-нибудь верстал всплывающие подсказки, контекстные меню или выпадающие списки в веб-приложении, то наверняка помнишь, в какую инженерную акробатику это превращалось. Казалось бы, тривиальная задача — прикрепить маленький информационный блок к кнопке и удержать его рядом при прокрутке страницы.
Но в реальности разработчикам приходилось подключать увесистые сторонние библиотеки вроде Popper.js или Floating UI. Эти скрипты навешивали глобальные обработчики на события scroll и resize, на каждый чих вызывали тяжелый метод getBoundingClientRect(), провоцировали принудительный пересчет раскладки (reflow) и нередко вызывали раздражающее визуальное мерцание интерфейса при быстрой прокрутке.
Долгожданная спецификация CSS Anchor Positioning перенесла эту механику туда, где ей самое место — непосредственно в браузерный движок рендеринга. Браузер теперь сам рассчитывает координаты всплывающего элемента относительно целевого якоря на этапе компоновки страницы. Однако у этой свободы появилась обратная сторона: декларативное свойство position-area с его девятиклеточной матрицей и десятками вариаций ключевых слов вроде block-end inline-start или top span-left поначалу взрывало мозг даже опытным верстальщикам.
В осенних релизах Chrome 155 и 156 команда Chrome for Developers выкатила мощный ответ на эти трудности, о чем подробно рассказано в нововведениях Chrome DevTools. Разработчики получили интерактивный визуальный редактор сетки прямо в панели инспектора стилей, а кодинг-агенты — специализированный инструмент get_css_styles для программного анализа стилей.
Визуальная сетка: интуитивная настройка position-area
Меня в новом интерфейсе DevTools больше всего порадовало то, насколько наглядно авторы визуализировали математику якорей. Больше не нужно держать в голове шпаргалку по физическим и логическим осям CSS: достаточно открыть панель Elements, перейти на вкладку Styles и кликнуть по миниатюрной пиктограмме (swatch) рядом со свойством position-area.
Перед тобой мгновенно разворачивается интерактивная сетка размером три на три ячейки, моделирующая пространство вокруг опорного элемента:
- Центральная клетка: символизирует сам якорный элемент (
anchor); - Окружающие ячейки: отображают восемь внешних секторов (верхний, нижний, левый, правый и четыре угловых квадранта);
- Диапазоны охвата (
span-селекторы): позволяют одним движением мыши растянуть поповер вдоль стороны якоря (например,top span-allилиbottom span-left).
При клике на ячейку DevTools не только автоматически подставляет правильное значение свойства в CSS-правило, но и оптимизирует синтаксис, убирая избыточные ключевые слова. Параллельно на самом холсте страницы включается информативный оверлей (Viewport Overlay). Он подсвечивает границы так называемого содержащего блока с измененной вставкой (Inset-Modified Containing Block, IMCB), визуализирует текущие отступы (margin) и показывает предельные линии выравнивания, исключая ситуации, когда тултип неожиданно обрезается краем экрана.
Если в сложной верстке у элемента объявлено несколько неявных якорей (Implicit Anchors), в контекстном меню узла дерева DOM появился прямой пункт перехода к соответствующему опорному блоку, избавляя от ручного поиска по идентификаторам в HTML-разметке.
Декларативная верстка всплывающих подсказок без JavaScript
Давай взглянем, как на практике выглядит связка кнопки и поповера с использованием нативного якорного позиционирования и адаптивного отката стилей:
<!-- Кнопка-якорь и всплывающая подсказка в разметке -->
<button id="deploy-btn" class="anchor-button">
Запустить деплой
</button>
<div id="deploy-tooltip" popover="manual" class="tooltip-bubble">
Сборка артефактов и выкатка на серверы продакшена
</div>
/* Назначение имени якоря через системное свойство */
.anchor-button {
anchor-name: --deploy-action;
}
/* Стилизация и привязка всплывающего элемента */
.tooltip-bubble {
position: fixed;
position-anchor: --deploy-action;
/* Размещение подсказки строго над кнопкой по центру */
position-area: top center;
margin-bottom: 10px;
padding: 8px 14px;
background-color: #111827;
color: #f3f4f6;
border-radius: 6px;
font-size: 13px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Правило адаптивного отката: если сверху экрана не хватает места */
@position-try --flip-to-bottom {
position-area: bottom center;
margin-top: 10px;
margin-bottom: 0;
}
.tooltip-bubble {
/* Автоматическое переключение на нижнее положение при переполнении */
position-try-fallbacks: --flip-to-bottom;
}
Обрати внимание на блок @position-try: браузер берет на себя физический расчет геометрических коллизий. Если пользователь проскроллил страницу так, что кнопка оказалась у верхней кромки окна, движок мгновенно и без малейшего участия JavaScript активирует альтернативное правило --flip-to-bottom. Никаких утечек памяти, никаких слушателей событий и нулевой оверхед по скриптам.
DevTools for Agents: глаза для автономных кодинг-ботов
Второе фундаментальное нововведение осенней волны обновлений Chrome DevTools адресовано не столько людям, сколько искусственному интеллекту.
Автономные агенты программирования (Claude Code, Cursor, Windsurf) великолепно пишут алгоритмы и генерируют компоненты, но при верстке пользовательских интерфейсов они буквально действуют вслепую. Модель может изучить исходный CSS-файл, но она не знает, какие именно стили победили в каскаде, перекрыт ли блок соседним слоем и почему верстка поплыла на мобильном разрешении.
Инициатива DevTools for Agents открывает специальный протокол взаимодействия, адаптированный под жесткие лимиты контекстных окон LLM. Центральным элементом этого интерфейса стал инструмент get_css_styles.
Вместо того чтобы вываливать на модель сырой многомегабайтный дамп дерева стилей всей вкладки, инструмент предоставляет структурированный срез по конкретному узлу DOM с встроенной пагинацией:
{
"method": "get_css_styles",
"params": {
"nodeId": 284,
"pageSize": 20,
"pageIdx": 0,
"includeMatchedRules": true,
"includeInherited": false,
"includeAtRules": true
}
}
В ответ агент получает компактный JSON-объект, содержащий точные вычисленные стили (computedStyles), сработавшие селекторы (matchedRules), а также современные директивы @position-try и типизированные пользовательские свойства @property.
Для защиты инфраструктуры разработчика протокол строго разграничивает доступ к файловой системе: флаг командной строки --allow-unrestricted-paths предотвращает несанкционированное чтение файлов проекта за пределами рабочей директории. Кроме того, внутренняя подсистема парсинга трассировок Chrome была оптимизирована под потоковую обработку дампов производительности размером более 1 ГБ, исключая падения процесса отладки при длительных сессиях профилирования.
Эволюция браузерной платформы и инженерные выводы
Появление таких инструментов в Chrome отражает фундаментальный тренд: граница между браузером как средой рендеринга и средой разработки окончательно стирается. Мы уже наблюдали похожие сдвиги, когда разбирали кастомизацию веб-платформы в Chrome 154 с внедрением нативных скролл-маркеров и псевдоэлементов прокрутки.
Спецификация CSS Anchor Positioning уже полностью поддерживается в Chromium-браузерах (Chrome, Edge, Opera, Brave). В движках Safari (WebKit) и Firefox реализация находится в активной разработке за экспериментальными флагами, поэтому для критичных кроссбраузерных проектов пока сохраняется потребность в официальном полифиле @oddbird/css-anchor-positioning.
Однако вектор развития очевиден: нативная платформа последовательно забирает себе то, ради чего раньше приходилось тащить мегабайты внешних скриптов. А появление специализированных API для нейросетевых агентов превращает Chrome в полноценного напарника по парному программированию, способного не только исполнять код, но и на понятном языке объяснять моделям, как именно выглядит страница на экране реального пользователя.