Вышел Chrome 157: какие изменения вёрстки проверить на ревью сайта
3 ноября Google начала выкатывать Chrome 157 в стабильный канал: версии 157.0.8103.38/.39 для Windows и macOS и 157.0.8103.38 для Linux. Обновление доходит до пользователей постепенно, в течение нескольких дней и недель. В релизе 213 исправлений безопасности, а для вёрстки появились новые возможности CSS: управление формой углов, произвольный текст вместо многоточия при обрезке строки и настройка длины подчёркивания. Это следует из официального блога Chrome Releases и разбора SecurityWeek.
Старые страницы от этого не сломаются. Но новые свойства CSS быстро попадают в макеты: дизайнер рисует «срезанные» углы карточек, разработчик делает их одной строкой, и в Chrome всё выглядит как в Figma. В браузере без поддержки у тех же карточек останутся обычные скругления. Если такое расхождение не оговорить заранее, на приёмке оно превращается в спорную правку.
Когда сайт делает внешняя команда, этот вопрос лучше закрыть в договоре и критериях приёмки: какие браузеры поддерживаются, как ведут себя блоки там, где новое свойство не работает, и кто отвечает за регресс после обновлений. Команда, которая ведёт разработку сайта под ключ, обычно сама записывает такие правила в ТЗ, и спорить о них после запуска не приходится.
Что нового в Chrome 157 для вёрстки
Форма углов. Свойство corner объединяет радиус скругления и форму угла (corner-shape) в одной записи. Есть варианты для отдельных сторон и углов (corner-top, corner-bottom-left и другие), а также логические варианты, которые учитывают направление письма. С ними скошенные и нестандартно скруглённые углы делаются без картинок и SVG. Для ревью это новый класс правок: «угол не той формы» теперь может быть ошибкой в CSS, а не в макете.
Свой текст при обрезке строки. text-overflow теперь принимает произвольную строку. Вместо многоточия в обрезанном заголовке можно показать, например, «(продолжение)». Это удобно для карточек и таблиц, но такие строки нужно проверять так же внимательно, как остальные тексты интерфейса: на длину, перевод и смысл.
Длина подчёркивания. Новое свойство text-decoration-inset укорачивает или удлиняет подчёркивание, надчёркивание и зачёркивание. Подчёркнутые ссылки и пункты меню теперь можно сделать точно как в макете, и правки вида «подчёркивание шире текста» наконец решаются средствами CSS.
Привязка к якорю. Для position-visibility добавлены формы anchor-valid и anchor-visible, старые варианты во множественном числе остались как синонимы. Это касается всплывающих подсказок и меню, привязанных к элементу: проверьте, что они скрываются и появляются так, как задумано.
Кроме того, в Chrome 157 появилась возможность рисовать HTML внутри canvas, в Long Animation Frames API добавились метрики времени расчёта стилей, а на Android заработало определение языка прямо на устройстве.
Безопасность: 213 исправлений
По данным SecurityWeek, среди 213 закрытых уязвимостей 7 критических и 77 высокой важности. Чаще всего встречались ошибки авторизации (51) и use-after-free (45), ещё 19 случаев связаны с подменой интерфейса. Об эксплуатации этих уязвимостей в реальных атаках Google не сообщает. Но клиенту, который принимает сайт, лучше смотреть его в обновлённом браузере.
Что это значит для ревью и согласования
Записывайте поведение без поддержки. Для каждого нового свойства из макета договоритесь, как блок выглядит в браузерах, где оно не работает: обычные скругления, стандартное многоточие, подчёркивание на всю ширину. Это часть ТЗ, а не правка на финише.
Фиксируйте окружение в каждой правке. Браузер, версия, ОС и ширина окна должны попадать в комментарий автоматически. Подробнее о хорошей правке — в материале о том, как собирать правки.
Проверьте регресс после обновления. Карточки с нестандартными углами, обрезанные заголовки, подчёркнутые ссылки и всплывающие подсказки — первые кандидаты на проверку. Этот пункт стоит добавить в чек-лист приёмки сайта, а повторный проход — в план регрессионного тестирования после правок дизайна.
Что делать сейчас
Обновите Chrome у себя и попросите обновиться клиента. Пройдите ключевые страницы текущих проектов в Chrome 157 и хотя бы в одном браузере на другом движке, например в Safari или Firefox. Расхождения собирайте комментариями прямо на странице, с версией браузера в каждой правке, чтобы потом их было видно в истории.
