Трансформация веб-платформы: кастомизация скролла в Chrome 154, протоколы MCP и новшества Chrome 155

Развитие современных веб-браузеров происходит сразу на двух взаимодополняющих уровнях: углубление декларативных стандартов CSS, избавляющих проекты от внешних JavaScript-хелперов, и превращение браузера в открытую программную среду для автономных AI-агентов. Сентябрьский срез экосистемы Chromium наглядно отражает этот тренд: стабильный релиз Chrome 154 решает давние задачи стилизации компонентов прокрутки и текста, интеграция протокола Model Context Protocol (MCP) в DevTools стандартизирует управление страницами для нейросетей, а бета-версия Chrome 155 готовит избавление контейнеров от лишних внешних отступов.

Chrome 154

Вышедший в стабильный канал релиз Chrome 154 принес веб-разработчикам сразу несколько мощных инструментов для чистой верстки интерфейсов.

Ключевым новшеством стала поддержка свойства scroll-marker-group для точной настройки точек прокрутки в каруселях и слайдерах. Раньше для реализации интерактивных индикаторов прокрутки (точек пагинации под слайдером) приходилось городить сложные связки JavaScript-обработчиков событий scroll и IntersectionObserver.

Свойство scroll-marker-group принимает ключевые слова after или before в связке с семантическими режимами links или tabs:

• after links позиционирует индикаторы после содержимого и присваивает им роль навигационных ссылок со стандартным порядком фокуса;
• before tabs генерирует маркеры с семантикой WAI-ARIA табов, обеспечивая нативную доступность каруселей для программ экранного доступа (screen readers) прямо на уровне CSS.

Вторым заметным улучшением стало свойство text-decoration-inset. До сих пор подчеркивания ссылок тянулись строго по всей ширине текстового блока, а для создания аккуратных укороченных линий дизайнерам приходилось использовать костыли с псевдоэлементами ::after и абсолютным позиционированием. Свойство text-decoration-inset: 12px сдвигает начало и конец декоративной линии внутрь на заданную величину, а отрицательные значения позволяют гармонично выносить подчеркивание за границы текста.

Ниже показана декларативная верстка доступной карусели и оформление заголовков в Chrome 154:

/* Стилизация карусели со скролл-маркерами в Chrome 154 */
.gallery-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Группируем маркеры снизу с WAI-ARIA семантикой табов */
  scroll-marker-group: after tabs;
}

.gallery-carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px;
}

/* Точечная настройка подчеркивания без псевдоэлементов */
.article-title {
  text-decoration-line: underline;
  text-decoration-color: #3b82f6;
  text-decoration-thickness: 3px;
  /* Укорачиваем линию подчеркивания на 10px с каждого края */
  text-decoration-inset: 10px;
}

Протокол MCP в браузерах

Параллельно с эволюцией рендеринга фундаментальные изменения происходят в инструментах разработчика. Команды Chrome DevTools и Microsoft Edge представили интеграцию открытого стандарта Model Context Protocol (MCP), разработанного для унификации взаимодействия AI-агентов с внешними системами.

Исторически нейросетевые помощники управляли браузерами через громоздкие обертки над Chrome DevTools Protocol (CDP) или браузерные эмуляторы вроде Playwright и Puppeteer. Это требовало постоянного запуска тяжелых headless-процессов и сложного парсинга дампов страницы.

Внедрение DevTools MCP и спецификации WebMCP открывает прямой структурированный мост: автономный агент может подключаться к открытой вкладке разработчика через легковесный протокол, запрашивать семантическое дерево доступности, считывать ошибки консоли, анализировать трассировки сетевых запросов и локально проверять применение CSS-стилей.

Второй блок кода показывает, как AI-агент взаимодействует со страницей через унифицированный интерфейс протокола MCP, инспектируя созданную ранее карусель:

{
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "name": "browser_inspect_accessibility",
    "arguments": {
      "selector": ".gallery-carousel",
      "properties": ["role", "scrollMarkers", "computedStyle"]
    }
  },
  "id": "mcp-req-01"
}

В ответ браузер возвращает валидированное состояние доступности с подтверждением, что элементы маркеров получили правильные роли tab и доступны для навигации.

Chrome 155 Beta

На горизонте следующего обновления экосистема Chromium готовит еще одну серию долгожданных улучшений, ставших доступными в бета-версии Chrome 155.

Главное событие для верстальщиков — появление свойства margin-trim. Десятилетиями разработчики сталкивались с проблемой, когда последний дочерний элемент в карточке или списке оставлял за собой лишний нижний отступ, ломая симметрию блока. Это вынуждало писать селекторы &:last-child { margin-bottom: 0; }. Свойство margin-trim: block-end автоматически обрезает внешние отступы у крайних элементов контейнера.

Кроме того, в Chrome 155 Beta дебютирует CSS-функция symbols() для быстрого создания кастомных списков без объявления громоздких правил @counter-style, а также продолжается расширение поддержки современного формата сжатия изображений JPEG XL, обеспечивающего превосходную цветопередачу и меньший вес файлов по сравнению с традиционными веб-форматами.

Эволюция веб-платформы наглядно демонстрирует баланс приоритетов: Chromium последовательно устраняет рутинные сложности верстки с помощью выразительного декларативного CSS и одновременно закладывает системный фундамент для безопасной и прозрачной работы AI-агентов через открытый протокол MCP.