Юна Кравец и Алекс Тотик рассказали о результатах работы над улучшением таблиц в Chrome — "TablesNG Resolves 72 Chromium Bugs for Better Interoperability".

На протяжении нескольких лет разработчики Chrome переделывали механизм рендеринга таблиц, так как старая архитектура не отвечала новым требованиям. Эта инициатива получила название TablesNG. Благодаря ей было решено много проблем. Например, была исправлена совместимость таблиц и position: sticky, улучшен рендеринг границ и исправлены проблемы с субпиксельной геометрией, которые приводили к проблемам с выравниванием при изменении масштаба страницы.

TablesNG был включён по умолчанию в Chrome 91.

#chrome

https://developer.chrome.com/blog/tablesng/

Бесшовные переходы между экранами SPA с помощью shared element transition API

Джейк Арчибальд рассказал о новом пропозале для создания бесшовных переходов между экранами SPA — "Smooth and simple page transitions with the shared element transition API".

Бесшовные переходы сложны в реализации. При их создании нужно обеспечить плавность анимации, корректность обработки событий при изменении состояний и убедиться в том, что одновременное присутствие двух экранов не ломает доступность.

Эти проблемы призван решить shared element transition API. С его помощью можно легко создавать простые переходы между экранами и сложные переходы с разделяемыми элементами. Вот так реализуется простой переход:

async function navigateToSettingsPage() {
  await document.documentTransition.prepare({
    rootTransition: 'cover-left',
  });
  updateDOMForSettingsPage();
  await document.documentTransition.start();
}

Shared element transition API пока доступен в Chrome в экспериментальном режиме. Также на данный момент его можно использовать только в рамках одной страницы, но у авторов спецификации есть планы по его расширению для обеспечения бесшовных переходов между разными страницами сайта.

#chrome #api #spa

https://developer.chrome.com/blog/shared-element-transitions-for-spas/

Скрытые проблемы preload

Шаби Паникер из Google рассказала о скрытых проблемах preload — "The cost of preload".

Предзагрузка ресурсов с помощью preload может помочь улучшить метрики FCP, LCP и TTI. В тоже время она может мешать быстрой загрузке критических ресурсов и блокировать отрисовку страницы.

Ситуация усугубляется тем, что в Chrome есть баг, из-за которого любой предзагружаемый ресурс попадает в начало очереди загрузок. Тем самым заставляя разработчиков расставлять preload у всех критических ресурсов для достижения оптимальной последовательности загрузки.

Пока в Chrome не исправлен баг, Шаби советует использовать preload только в самых крайних случаях.

Очень рекомендую почитать документ всем, кто занимается производительностью.

#performance #chrome

https://docs.google.com/document/d/1ZEi-XXhpajrnq8oqs5SiW-CXR3jMc20jWIzN5QRy1QA/

Релиз Chrome 93

Сегодня вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали об основных фичах релиза — "New in Chrome 93".

Была добавлена поддержка CSS Module Scripts — импорт CSS-файлов в JavaScript. Импортированный CSS можно подключается к document или shadowRoot с помощью свойства adoptedStyleSheets.

На второй этап origin trial перешёл Multi-Screen Window Placement API, с помощью которого можно получить информацию о всех экранах пользователя и программно управлять размещением окон.

Теперь PWA могут быть зарегистрированы в качестве обработчиков URL (эта фича стала доступна в Chrome 92). Добавлена возможность кастомизации контролов управления окном PWA.

В инструментах разработчика добавлена поддержка отладки выражений от контейнера. Появилась поддержка отображения содержимого web bundle во вкладке Network. Добавлены новые опции для копирования строк из консоли. Lighthouse обновился до версии 8.1.

Chrome переходит на четырёхнедельный цикл релизов.

#chrome #release

https://developer.chrome.com/blog/new-in-chrome-93/
https://developer.chrome.com/blog/new-in-devtools-93/

Сокращение информации в User-Agent Chrome

В январе 2020 года разработчики Chrome объявили о намерении сократить передаваемую информацию в User-Agent для улучшения приватности. Из-за пандемии этот процесс отложили, и вот несколько дней назад был опубликован обновлённый план — "User-Agent Reduction Origin Trial and Dates".

Начиная с Chrome 92 (июль 2021) при обращении к методам navigator.userAgent, navigator.appVersion, navigator.platform выводится предупреждение. С четвёртой фазы (в Chrome 101) актуальной станет только мажорная версия; MINOR.BUILD.PATCH будут обнулены — Chrome 101.0.0.0. В шестой фазе (Chrome 110) на смартфонах будет удалена информация о модели устройства. В седьмой фазе (Chrome 113) миграция на новый формат User-Agent будет завершена. Если сайтам нужна детальная информация о клиенте, то они смогут получить к ней доступ с помощью User Agent Client Hints.

#chrome #announcement

https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html

Релиз Chrome 94

Вчера вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали о новинках релиза — "New in Chrome 94".

При создании двумерного контекста рисования canvas появилась возможность выбора цветового пространства. По умолчанию используется sRGB (оно было и раньше, сейчас это закреплено на уровне спеки), можно также выбрать цветовое пространство P3.

Стал доступен WebCodecs API. Благодаря ему приложения могут использовать кодеки для декодирования видеопотока с поддержкой аппаратного ускорения. Это очень полезно для видеоредакторов, приложений видеоконференций и стриминга.

В рамках Origin Trial можно включить WebGPU. WebGPU позволяет эффективно использовать ресурсы видеокарты для обработки графики и других вычислений.

Был добавлен метод scheduler.postTask() для управления задачами. Под капотом этот метод использует планировщик браузера. Добавлена экспериментальная поддержка CSS-свойства scrollbar-gutter. Добавлена поддержка VirtualKeyboard API. Поддержка WebSQL задеприкейчена и запланирована к удалению в Chrome 97.

В инструментах разработчика появилась локализация интерфейса на 80 языков. Теперь можно посмотреть список всех активных Origin Trials на вкладке Application при выборе фрейма верхнего уровня. Появилась индикация для контейнеров, инвертирование активного фильтра на вкладке Network и т.д.

#chrome #release

https://developer.chrome.com/blog/new-in-chrome-94/
https://developer.chrome.com/blog/new-in-devtools-94/

Новая CSS-инфраструктура Chrome DevTools

Крити Сапра написала статью про обновлённый подход подключения CSS в кодовой базе Chrome DevTools — "Modernising CSS infrastructure in DevTools".

В кодовой базе DevTools очень долгое время использовалась устаревшая модульная система. С её помощью происходило разрешение зависимостей между JS-файлами и подключение CSS. При переходе на TypeScript возник вопрос отказа от старой модульной системы и миграции существующих стилей. Самым подходящим вариантом стала автоматическая конвертация стилей в JS-файлы, которые экспортируют объект CSSStyleSheet. Таким образом из любого сконвертированного файла можно импортировать стили и применить их к веб-компонентам с помощью adoptedStyleSheets.

Такое решение позволило избавиться от проблемы дублирования стилей, от потенциальной коллизии названия классов и подготовило код для дальнейшей миграции на CSS Module Scripts. В статье также говорится о том, что сама спецификация CSS Module Scripts родилась из задачи обновления модульной системы в DevTools.

#css #migration #chrome

https://developer.chrome.com/blog/modernising-css-infra-in-devtools/

Спекулятивный пререндеринг в Chrome

Лина Сохони и Эдди Османи рассказали про новый способ пререндеринга страниц — "Bringing instant page-loads to the browser through speculative prerendering".

Хинт производительности prerender сообщает браузеру о необходимости отрендерить новую страницу заранее (спекулятивно). Если браузер неактивен и если в нём отключен режим сохранения траффика, то он загрузит необходимые ресурсы и запустит процесс рендеринга, тем самым страница будет открываться быстрее.

В Chrome 94 в рамках origin trail появилась поддержка Speculation Rules API. В отличии от хинта prerender c помощью API можно гибко управлять пререндером страниц и предзагрузкой ресуров. На данный момент реализована только часть API — возможно пререндерить только заранее указанный список URL. В будущем появится возможность пререндеринга набора URL по шаблону. Также можно будет указать вероятность открытия страницы, чтобы браузер оптимально тратил вычислительные ресурсы пользователя.

#chrome #performance #api

https://web.dev/speculative-prerendering/

Автоматическая тёмная тема в Chrome

В Origin Trial Chrome 96 на Android появится поддержка автоматической тёмной темы — "Auto Dark Theme".

Автоматическая тёмная тема — это автоматическая адаптация цвета фона страницы и текста под тёмную тему операционной системы без вмешательства разработчика.

Сейчас автотема находится на этапе эксперимента, поэтому при её использовании есть неудобства. Для тонкого управления цветами отдельных элементов нужно с помощью JavaScript определить поддержку автотемы, выставить класс на корневом элементе и использовать его в CSS-правилах.

Есть возможность отказа от автотемы с помощью метатега <meta name="color-scheme" content="only light">. Также для отключения автотемы на всей странице или отдельных её элементах можно использовать CSS-декларацию color-scheme: only light.

#ux #chrome

https://developer.chrome.com/blog/auto-dark-theme/

Релиз Chrome 96

Вчера вышла новая версия Chrome. Пит Лепаж и Джеселин Ин по традиции рассказали обо всех новинках релиза — "New in Chrome 96".

В рамках Origin Trail появилась поддержка хинтов приоритета (priority hints). Хинты приоритета устанавливаются с помощью атрибута importance. Они используются в качестве сигналов на уровне разметки документа для управления последовательностью загрузки ресурсов.

Включена поддержка флага #force-major-version-to-100 для поднятия версии Chrome до 100. Этот флаг был добавлен для поиска потенциальных проблем парсинга строки User-Agent.

Реализована поддержка оптимизации Back/Forward Cache (BFCache). Теперь при каждой навигации браузер не удаляет из памяти ресурсы, использующиеся страницей, а отправляет их в BFCache на несколько минут. Если пользователь захочет вернуться назад на предыдущую страницу, то она будет восстановлена из этого кеша. Данная оптимизация использовалась только в Firefox и Safаri. Теперь она есть во всех браузерах.

Сделано несколько улучшений для PWA. В Chrome 96 была добавлена поддержка указания явного идентификатора приложения в манифесте с помощью поля id. Также теперь PWA-приложения могут регистрироваться в качестве обработчиков протоколов. Например, если PWA почтового клиента зарегистрируется как обработчик протокола mailto, тогда это приложение будет открываться автоматически при кликах по ссылкам с префиксом mailto:.

Есть много изменений в инструментах разработчика. Отображение содержимого запроса переехало из вкладки "Headers" в новую вкладку "Payload". В тестовом режиме добавлен CSS Overview. Появилась возможность копирования CSS-деклараций в формате, пригодном для вставки в JS, — полезное новшество для всех, кто использует CSS-in-JS. Теперь ошибки CORS в консоли можно спрятать. Добавлена поддержка эмуляции prefers-contrast и тёмной автотемы.

#chrome #release

https://developer.chrome.com/blog/new-in-chrome-96/
https://developer.chrome.com/blog/new-in-devtools-96/

Релиз Chrome 97

На прошлой неделе вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали про новинки релиза — "New in Chrome 97".

В Chrome 97 по умолчанию включён WebTransport API. С его помощью обеспечивается быстрый обмен данными между клиентом и сервером в сетях с высокими задержками. Поддерживается передача данных без гарантии доставки пакетов с помощью Datagram API и с гарантиями доставки пакетов с помощью Streams API. WebTransport API работает только с HTTP/3.

Добавлена поддержка экспериментального метода HTMLScriptElement.supports(). Благодаря ему можно определить, какой вид скриптов поддерживается браузером.

В JavaScript-движке у массивов появились методы findLast(), findLastIndex() для поиска элементов с конца.

В Chrome DevTools добавлена вкладка "Recorder". С её помощью можно записывать и повторно воспроизводить действия на странице (user flows). Обновлён список эмулируемых устройств. На вкладке "Elements" появилось автодополнение при редактировании HTML. Настройки DevTools теперь можно синхронизировать между разными устройствами.

#chrome #release

https://developer.chrome.com/en/blog/new-in-chrome-97/
https://developer.chrome.com/blog/new-in-devtools-97/

Релиз Chrome 98

Позавчера вышла новая версия Chrome. Пит Лепаж и Джеселин Ин рассказали обо всех новинках релиза — "New in Chrome 98".

В рамках Origin Trial автоматической тёмной темы на Android теперь можно отказаться от применения темы на отдельных страницах с помощью <meta name="color-scheme" content="only light"> и CSS-свойства color-scheme: only light;.

Появилась поддержка COLRv1 — нового формата шрифтов c поддержкой цветных глифов, градиентов и смешивания. COLRv1 обеспечивает максимальное сжатие большого количества небольших изображений.

При обращении к приватным сетям теперь отправляются CORS Preflight-запросы. Запущен новый Origin Trial кроппинга захватываемого видео с помощью Region Capture API.

В инструментах разработчика теперь используется редактор на базе Codemirror 6. Благодаря ему была улучшена поддержка очень больших файлов, исправлена проблема со смещением прокрутки во время отладки. Появилась новая панель для отладки дерева доступности. Lighthouse был обновлён до девятой версии. Добавлен новый инструмент для упрощения отладки проблем с Back/Forward Cache.

#chrome #release

https://developer.chrome.com/blog/new-in-chrome-98/
https://developer.chrome.com/blog/new-in-devtools-98/