Обзор новинок фронтенда: Chrome 145, CSS‑border‑shape, MCP и AI‑агенты

#Введение

Недавно в подкасте «Вебстандарты» (эпизод 515) наши любимые ведущие — Никита Дубко, Полина Гуртовая и Вадим — обсудили кучу новинок, от свежего релиза Chrome 145 до экспериментальных возможностей LLM в браузерах. Давайте разложим всё по полочкам и посмотрим, какие из этих новинок уже могут пригодиться в ваших проектах, а какие пока остаются «на пробу».

#Chrome 145: свежие возможности браузера

Chrome 145, выпущенный 10 февраля, оказался настоящим кладезем новых фич. Среди них:

• text‑justify – теперь можно выравнивать текст по ширине. Впрочем, в кириллическом тексте часто появляются «реки» пробелов, поэтому используйте с умом.
• letter‑spacing и word‑spacing поддерживают процентные значения. Это спасает, когда дизайнеры задают странные отступы в Figma – теперь можно привязать их к реальному шрифту.
• column‑wrap и column‑height – новые свойства для мульти‑колоночных макетов, работающие как flex‑wrap, но для колонок. Идеальны для газетных и журналных шаблонов.
• Стилизация <select> – расширена возможность менять внешний вид выпадающих списков, включая стрелки и атрибут size.
• focus‑visible – метод focus() теперь принимает опцию focusVisible, позволяя явно вызвать стили :focus-visible.
• Map.getOrInsert – лаконичный способ получить значение из Map или вставить новое, если ключа нет. Сократит кучу boilerplate‑кода.
• Crash Report API – простейший «ключ‑значение» API для сбора данных в момент краша страницы. Отличный помощник в отладке редких падений.
• User‑Agent – строка UA сокращена до основной версии, что усложняет fingerprint‑инг. Для детального определения возможностей браузера теперь рекомендуется использовать Client Hints.
• Device‑bound session credentials (DBSC) – механизм привязывания cookie к конкретному устройству через криптографические подписи. При попытке «перенести» сессию на другое устройство она просто исчезает.
• JPEG XL – через Origin Trials включён декодер JPEG XL, написанный на Rust. Декодировать уже можно, но кодировать (например, в Canvas) пока нет. Эти новшества дают нам больше гибкости, но и требуют внимательности: не каждый дизайнер готов к процентным отступам, а не все сайты готовы к новым ограничениям UA.

#CSS‑Kit (Kit Circle): Rust‑инструмент для CSS‑разработчиков

Если вы устали от устаревшей подсветки новых CSS‑свойств в IDE, вам понравится CSS‑Kit. Это набор на Rust, который одновременно форматирует, линтит, минифицирует, бандлит и анализирует CSS. Плюс к этому – LSP‑сервер, который автоматически обновляет список поддерживаемых свойств каждую неделю. Благодаря этому ваш VS Code (и не только) всегда в курсе последних фич, а вы избавляетесь от «красных» подчёркиваний в коде.

#CSS‑border‑shape: свобода формы без компромиссов

Новое CSS‑свойство border‑shape открывает двери к произвольным формам границ: бублики, пузырьки‑со‑стрелкой, сложные контуры. Оно меняет только визуальное представление, оставляя модель раскладки прямоугольной – значит, ваш layout‑engine не ломается, а выглядит по‑новому. Примеры:

• Кнопка‑«бублик», где клик проходит только по краям.
• Инлайн‑SVG, где область клика точно соответствует контуру.
• Демо‑bubble со‑стрелкой, где тени и отступы учитываются автоматически. Главный подвох – размеры, margin и padding остаются прямоугольными, так что планировать layout нужно как обычно, а border‑shape лишь «надстраивает» визуал.

#MCP и WebMCP: LLM в браузере

Model‑Completion‑Protocol (MCP) – пока ещё не официальный, но уже ставший де‑факто‑стандартом способ, позволяющий большим языковым моделям (LLM) вызывать внешние инструменты прямо из промпта. Есть два подхода:

• Декларативный – через HTML‑атрибуты (например, data-mcp) задаётся контекст, который LLM может использовать без кода.
• Императивный – JavaScript‑API navigator.mcp (пример) позволяет программно регистрировать функции и вызывать их. Практические сценарии уже в деле:
• Отладка Next.js – вместо копипаста ошибок в чат‑бот, MCP может «стримить» вывод терминала в реальном времени, давая LLM полный контекст.
• Навыки (skills) – набор предопределённых промптов, описывающих, какие инструменты LLM может вызвать (запуск тестов, запрос к API и т.д.).
• Автоматическая верификация – LLM запускает тесты, проверяет результаты и повторяет попытки, пока не получит рабочее решение. Безопасность при этом критична: нельзя раскрывать секреты (ключи, токены) через MCP, а доступ к продакшн‑ресурсам следует ограничивать. Если браузер MCP не поддерживает, следует показывать fallback‑контент.

#AI‑агенты в веб‑разработке: возможности и ограничения

Код‑агенты уже умеют писать функции, предлагать архитектурные решения и даже генерировать UI‑элементы (border‑radius, сложные фигуры). Но, как напоминают ведущие, их предложения нужно проверять – LLM может «переусердствовать» и сгенерировать нерабочий код. Идеологические метки вроде «AI‑free» пока больше рекламный трюк, чем реальное качество. Тем временем LLM‑модели становятся всё надёжнее: Firefox уже внедрил LLM‑поддержку для улучшения доступности PDF‑документов. Безопасность остаётся главным вопросом. Next.js, по мнению ведущих, – «самое дырявое сито» в веб‑разработке, с частыми критическими уязвимостями (CVE). MCP может помочь обнаруживать такие уязвимости заранее, но пока нет метода fixCriticalVulnerability в браузерах. Не забываем и о старых, но опасных Spectre‑уязвимостях: их исправление часто влечёт падение производительности, а полностью избавиться от них пока невозможно.

#Документация и сообщество: учимся вместе

Русскоязычный ресурс «DOC» (MDN‑подобный) пополнился подробным гайдом по позиционированию от Романа Ахмадулина. Гайд полон живых демо‑примеров и охватывает как базовые, так и продвинутые сценарии. Ведущие призывают всех участвовать: писать PR‑ы, улучшать примеры, делиться опытом. Хорошая документация – фундамент, без которого LLM и инструменты вроде MCP теряют свою «умную» часть.

#Вывод

Chrome 145 подарил нам кучу полезных CSS‑фич и улучшений безопасности, а Rust‑инструмент CSS‑Kit избавил от проблем с подсветкой новых свойств. Свойство border‑shape открывает новые визуальные горизонты, не ломая раскладку. MCP (WebMCP) уже показывает, как LLM могут стать настоящими помощниками в браузере, автоматизируя отладку и проверку кода, но требует строгих мер безопасности. AI‑агенты становятся всё более полезными, однако их результаты всегда нужно проверять вручную. И, конечно, без активного сообщества и качественной документации ни одна из этих новинок не будет по‑настоящему полезной. Поддерживайте подкаст, делитесь знаниями и экспериментируйте – будущее веб‑разработки уже здесь!