Сегодня вышел Chrome 89. Пит Лепаж и Джеселин Ин рассказали про новинки релиза.

Добавлена поддержка top level await для JavaScript-модулей.

Стали доступны по умолчанию новые API для работы с железом — WebHID, WebNFC и Web Serial. С их помощью web-приложения могут взаимодействовать с устройствами пользователя без установки драйверов или каких-либо дополнительных программ.

PWA-приложения можно установить только в том, случае когда они поддерживают offline-режим. Ранее была возможность обойти это требование. Начиная с Chrome 89 этот обходной путь будет триггерить сообщение с предупреждением в консоль, а в Chrome 93 будет заблокирован.

Добавлена поддержка Web Share API и Web Share Target API для удобной передачи любых данных из одного web-приложения в другое.

Очень много изменений в инструментах разработчика. Lighthouse был обновлён до седьмой версии. Улучшена работа с куками. Можно ставить точки останова на исключения, вызванные нарушениями Trusted Type. Добавлена поддержка эмуляции устройств со складным экраном и многое другое.

#chrome #release

https://developer.chrome.com/blog/new-in-chrome-89/
https://developers.google.com/web/updates/2021/01/devtools

Юна Кравец рассказала о недавних изменениях в Chrome, которые позволяют вынести обработку анимаций на GPU — "Updates in hardware-accelerated animation capabilities".

Chrome уже очень давно обрабатывает некоторые CSS-трансформации на GPU. В Chrome 89 на GPU также стали обрабатываться SVG-анимации. С точки зрения разработчиков, делать ничего не нужно, GPU подхватывает такие анимации автоматически. Также теперь с помощью GPU обрабатываются трансформации, использующие в качестве единиц измерения проценты. В будущих релизах Chrome будет добавлено GPU-ускорение анимаций CSS-свойств background-color и clip-path.

#chrome #css #performance

https://developer.chrome.com/blog/hardware-accelerated-animations/

Chrome 92 будет предотвращать небезопасный доступ к сервисам локальной сети. Обо всех подробностях рассказали Эиджи Китамура и Титуан Ригоди в статье "Private Network Access (CORS-RFC1918) updates".

Сейчас сайты могут без проблем обращаться к ресурсам из локальной сети. Например, внешний сайт компании может отправлять какую-нибудь статистику в интранет-сеть для тех пользователей, у которых есть к ней доступ. Такая политика небезопасна, так как любой внешний сайт может отправить любой запрос не только к внутреннем сайтам, но и к роутеру или принтеру пользователя. Подобным образом в 2014 году были взломаны более 300 тысяч роутеров по всему миру.

Начиная с Chrome 90 браузер будет предупреждать о небезопасных запросах при обращении к ресурсам локальной сети. В Chrome 92 такие запросы перестанут работать по умолчанию. Чтобы они продолжали работать, сайт-инициатор запроса и целевой сайт должны работать по HTTPS. Также в будущем будут проверяться CORS-заголовки, разрешающие доступ к ресурсу (пока эта часть спецификации находится на стадии обсуждения).

#security #chrome

https://developer.chrome.com/blog/private-network-access-update/

Швета Пандитрао и Мустафа Эмре-Асер из команды разработки Chrome рассказали о грядущем использовании HTTPS в качестве дефолтного протокола для навигации по интернету — "A safer default for navigation: HTTPS".

На сегодняшний день HTTPS использует подавляющее число сайтов. Поэтому начиная с Chrome 90 сайты по умолчанию будут открываться по HTTPS при вводе их адреса без указания протокола. Это позволит немного сократить время на установку HTTPS-соединения.

При переходе на сайт без поддержки HTTPS Chrome будет откатываться на использование HTTP. То есть если ваш сайт работает по HTTP, в новых версиях Chrome он будет загружаться немного медленнее из-за первичной попытки установки HTTPS-соединения.

#chrome #performance

https://blog.chromium.org/2021/03/a-safer-default-for-navigation-https.html

Сегодня вышел Chrome 90. Пит Лепаж и Джеселин Ин рассказали про новинки релиза.

В CSS была добавлена поддержка нового свойства overflow: clip из спецификации CSS Overflow. Это свойство позволяет скрыть часть контента, вышедшего за пределы контейнера при его переполнении, не переключая контекст форматирования, тем самым улучшая производительность рендеринга по сравнению с overflow: hidden.

В Chrome 74 был добавлен Feature Policy API для объявления списка API, которые разрешается использовать на странице. В Chrome 90 этот API был переименован в Permissions Policy, также был изменён синтаксис для определения параметров.

Появилась поддержка декларативного Shadow DOM, благодаря которому web-компоненты можно объявлять в коде HTML-страницы без использования императивного API. Declarative Shadow DOM полезен для улучшения SEO страниц, на которых используются web-компоненты.

В версии браузера для десктопа была добавлена поддержка видеокодека AV1, оптимизированного для видеоконференций.

В Chrome 90 (и во всех будущих версиях) при переходе на сайт без указания протокола теперь будет использоваться HTTPS, а не HTTP.

В Chrome DevTools был добавлен инструмент для визуальной отладки флексбоксов. Появилась экспериментальная поддержка отображения дерева доступности страницы. Добавлен новый оверлей, отображающий метрики Web Vitals для текущей страницы. Добавлена эмуляция медиафичи color-gamut, с помощью которой можно проверить, поддерживается ли дисплеем заданное цветовое пространство.

#chrome #release

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

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

В десктопной версии Chrome было добавлено API для доступа к файлам из буфера обмена. Доступ к файлам из буфера возможен только при обработке события paste.

Появилась возможность разделения сохранённой информации из менеджера паролей между разными доменами. Это полезно для тех сайтов, которые используют общий бэкенд для управления пользователями на разных доменах, например, google.com и google.ru.

В File System Access API добавлены новые опции для задания директории по умолчанию и задания дефолтного имени файла. Появилась полноценная поддержка Web Assembly SIMD. У фавиконок теперь можно использовать атрибут media, с помощью которого можно менять иконку сайта в зависимости от текущей темы операционной системы.

В DevTools появился инструмент для визуальной отладки scroll-snap. Добавлен инспектор памяти для анализа ArrayBuffer и памяти WebAssembly. Появилась опция для тестирования Content-Encoding. Улучшена поддержка дебага приватных полей классов. Улучшена фича для отображения структуры файла (outline) на вкладке "Sources" и т.д.

#chrome #release

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

Сегодня Стэфан Джудис твитнул про то, что в Chrome 91 появилась поддержка JSON-модулей. Это новая фича JavaScript, с помощью которой можно использовать import с JSON-файлами. Твит Стэфана дополнил Аксель Раушмайер ссылкой на статью про Import Assertions.

Синтаксис для импорта JSON немного отличается от стандартного импорта:

// статический импорт
import config from './data/config.json' assert { type: 'json' };

// динамический импорт
import('./data/config.json', { assert: { type: 'json' } })

Добавление assert декларирует намерение разработчика импортировать файл заданного типа. Это нужно делать явно, потому что на расширение имени файла в мире веба полагаться нельзя.

Import Assertions находится в статусе пропозала на stage 3. Он открывает дорогу для импорта не только JSON, но и WebAssembly-модулей и CSS-файлов.

#js #proposal #chrome

https://2ality.com/2021/01/import-assertions.html

Томас Штайнер написал статью про Storage Foundation API — "High performance storage for your app: the Storage Foundation API".

Современные веб-приложения не могут эффективно и гибко работать с большими массивами данных, сохранёнными на диске, что особенно критично для баз данных и программ редактирования аудио и видео.

Эту проблему призван решить Storage Foundation API. Он предоставляет средства для производительной работы с хранилищем данных и включает в себя набор примитивов, работа с которыми напоминает работу с обычной файловой системой. С его помощью можно получать информацию о доступном месте, создавать/удалять/переименовывать файлы, производить запись/чтение данных со смещением и т.п.

На данный момент экспериментальная поддержка Storage Foundation API есть только в Chrome в рамках программы Origin Trial.

#api #chrome #experimental

https://web.dev/storage-foundation/

Юна Кравец и Алекс Тотик рассказали о результатах работы над улучшением таблиц в 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/