Вышел Chrome 156: что перепроверить на ревью и приёмке сайта
20 октября Google перевела Chrome 156 в стабильный канал: версии 156.0.8078.47/.48 для Windows и macOS и 156.0.8078.47 для Linux. В релизе 353 исправления безопасности, из них шесть критических, а для вёрстки появились новые возможности CSS: функция random(), прокрутка по одной оси и новый режим привязки прокрутки. Это следует из официальных заметок к релизу на Chrome Platform Status и из разбора SecurityWeek.
Для тех, кто ревьюит и принимает сайты, сама новость не тревожная: старые страницы ломаться не должны. Но обновление браузера — удобный повод проверить, на какой версии вы смотрите макет и на какой его смотрит клиент. Расхождение «у меня всё ровно, а у заказчика поехало» почти всегда упирается в разные браузеры и разные версии.
Если сайт делает внешняя команда, оговорите это заранее: в каких браузерах и версиях проверяется вёрстка и кто отвечает за регресс после обновлений. Хороший подрядчик по созданию сайтов сам вносит список браузеров в критерии приёмки, а не обсуждает его после запуска.
Что нового в Chrome 156 для вёрстки
Функция random() в CSS. Она возвращает случайное число в заданном диапазоне, например random(0%, 100%). С её помощью можно разбросать декоративные элементы по контейнеру без JavaScript. Для ревью это значит, что одна и та же страница может выглядеть по-разному при каждой загрузке, и скриншот перестаёт быть точным эталоном.
Прокрутка по одной оси. Свойство overflow теперь принимает пары вроде scroll clip: контейнер прокручивается по одной оси и обрезает содержимое по другой. От этого зависит поведение «липких» элементов (position: sticky): шапки таблиц и боковые панели могут прилипать иначе, чем раньше.
Привязка прокрутки к одному элементу. Новое значение pair у scroll-snap-type заставляет контейнер привязываться к одному и тому же элементу сразу по горизонтали и вертикали. Это пригодится в галереях и каруселях.
Стиль для источника навигации. Новый псевдокласс позволяет оформить элемент, с которого началась навигация: ссылку, кнопку или форму. Значит, у интерфейса появляются новые состояния, и их тоже нужно смотреть на ревью.
Кроме того, новые базы IndexedDB теперь хранятся на SQLite вместо LevelDB (существующие данные не трогаются), неудачную загрузку модуля можно повторить новым вызовом import(), а элемент FencedFrame и API window.fence заменены заглушками и в Chrome 157 будут удалены полностью.
Безопасность: 353 исправления
По данным SecurityWeek, из 353 закрытых уязвимостей 6 критических, 61 высокой важности, 197 средней и 89 низкой. Больше всего ошибок работы с памятью: 163 случая повреждения памяти, 125 use-after-free и 17 чтений за пределами буфера. Об эксплуатации этих уязвимостей в реальных атаках Google не сообщает. Но по такому релизу понятно, почему клиенту и команде лучше смотреть сайт в обновлённом браузере, а не в версии полугодовой давности.
Что это значит для ревью и согласования
Фиксируйте окружение в каждой правке. Браузер, версия, ОС и ширина окна должны попадать в комментарий автоматически. Тогда разработчику не придётся переспрашивать, где именно «поехало». Подробнее о хорошей правке мы писали в материале о том, как собирать правки.
Договоритесь об эталоне для «живых» блоков. Если на странице есть random(), анимация или подгрузка данных, обсуждайте не пиксели, а правила: диапазон, отступы, что не должно перекрываться. Иначе одна и та же правка будет приходить по кругу.
Добавьте регресс-проход после обновления браузера. Липкие шапки, карусели и формы — первые кандидаты на проверку. Этот пункт стоит записать в чек-лист приёмки сайта.
Что делать сейчас
Обновите Chrome у себя и попросите обновиться клиента. Пройдите ключевые страницы текущих проектов: шапку и навигацию, таблицы с липкими заголовками, галереи и формы. Найденные расхождения собирайте комментариями прямо на странице, с отметкой версии браузера, чтобы потом их было видно в истории.
