Матиас Байненс — разработчик V8 и Chrome — написал статью о том, как была реализована симуляция недостатков зрения в Chrome DevTools — "Simulating color vision deficiencies in the Blink Renderer".

Результаты исследования WebAIM говорят о том, что контраст текста — самая распространённая проблема доступности сайтов. Вы скорее всего встречали его упоминание в DevTools или Lighthouse и с большой вероятностью удивлялись тому, что эти инструменты жаловались на плохой контраст, в то время как вы могли легко всё прочитать. Дело в том, что анализ контраста включает в себя разные особенности восприятия цвета: кто-то не видит красный цвет, кто-то зелёный и т.п.

Для реализации симуляции недостатков зрения разработчики сделали прототип на обычных web-технологиях. Для этого они воспользовались SVG-фильтром на root-элементе. В этом фильтре описывается преобразование цветов на основе научной работы "A Physiologically-based Model for Simulation of Color Vision Deficiency". Чтобы не внедрять на страницу лишние элементы, решение с SVG было перенесено в движок браузера.

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

#a11y #internals #chrome

https://developers.google.com/web/updates/2020/11/cvd

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

В Chrome 88 появилась поддержка Manifest V3 — новой платформы для создания расширений. Расширения, построенные на базе новой платформы, более прозрачны для пользователей, потребляют меньше системных ресурсов и проще для аудита (процесс ревью будет проходить быстрее). Предыдущая версия платформы расширений в будущем будет задеприкейчена.

С этой версии будет работать жёсткий троттлинг цепочек таймеров. Цепочка таймеров — это таймеры, создаваемые с помощью setInterval или с помощью setTimeout внутри коллбека другого setTimeout. Chrome будет троттлить на одну минуту цепочки более чем из 5 таймеров на неактивных страницах, которые не воспроизводят звук. Вместо цепочек таймеров разработчики Chrome предлагают использовать альтернативные API. Подробности можно почитать в статье Джека Арчибальда.

В CSS была добавлена поддержка явного указания соотношения сторон у любого элементе с помощью свойства aspect-ratio.

В HTML ссылки с атрибутом target="_blank" будут вести себя по умолчанию также как с установленным rel="no-opener".

Метод addEventListener теперь поддерживает удаление обработчиков с помощью AbortController.

Много изменений в инструментах разработчика. Они теперь открываются на 37% быстрее предыдущей версии. Появилась возможность эмуляции квот доступного места. На вкладке Performance можно включить отображение событий Web Vitals. Было улучшено отображение ошибок, связанных с CORS. Теперь можно эмулировать отсутствие поддержки WebP и AVIF.

#chrome #release

https://developers.google.com/web/updates/2021/01/nic88
https://developers.google.com/web/updates/2020/11/devtools

Алекс Руденко из команды разработки Chrome DevTools написал статью про добавление поддержки редактирования стилей, создаваемых с помощью CSS-in-JS-библиотек — "CSS-in-JS support in DevTools".

Возможность редактирования CSS-in-JS стилей появилась в Chrome 85. Для поддержки редактирования стили должны быть представлены как статический текст. В случае с CSS-in-JS статического текста нет, так как такие стили размещаются в памяти во внутренней структуре данных CSSOM. Для добавления возможности редактирования их стали преобразовывать в текст. Для синхронизации мутируемых стилей был добавлен новый механизм, который оповещает бэкенд DevTools при изменении стилей с помощью CSSOM API.

Хорошая статья. Рекомендую почитать, если интересуетесь внутренней работой браузеров.

#internals #chrome #cssinjs

https://developers.google.com/web/updates/2021/02/css-in-js

Сегодня вышел 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