Новое в Chrome 100

Пит ЛеПейдж

Вот что вам нужно знать:

Меня зовут Пит ЛеПейдж . Давайте углубимся и посмотрим, что нового для разработчиков в Chrome 100.

Хром 100

Когда браузеры впервые достигли версии 10, возникло несколько проблем, поскольку основной номер версии изменился с одной цифры на две. Надеюсь, мы узнали несколько вещей, которые облегчат переход с двух цифр на три.

Логотип Chrome и Firefox

Chrome 100 уже доступен, а Firefox 100 выйдет очень скоро. Эти трехзначные номера версий могут вызвать проблемы на сайтах, которые каким-то образом полагаются на идентификацию версии браузера. За последние несколько месяцев команда Firefox и команда Chrome проводили эксперименты, в которых браузер сообщал номер версии 100, хотя это было не так.

Это привело к нескольким сообщенным проблемам, многие из которых уже исправлены. Но нам все еще нужна ваша помощь.

  • Если вы занимаетесь поддержкой веб-сайта, протестируйте свой сайт с помощью Chrome и Firefox 100.
  • Если вы разрабатываете библиотеку анализа User-Agent, добавьте тесты для анализа версий, больших и равных 100.

Более подробную информацию можно найти на web.dev , где можно узнать о скором достижении Chrome и Firefox версии 100 .

100 крутых веб-моментов

Рекламное изображение 100 Cool Web Moments

Было волнительно наблюдать за ростом сети и видеть все те удивительные вещи, которые вы создали за последние 100 релизов Chrome. Мы подумали, что было бы забавно прогуляться по переулкам памяти и отпраздновать #100CoolWebMoments, которые произошли за последние 14 лет.

Расскажите, какие моменты вам понравились больше всего. Если мы что-то пропустили (а мы уверены, что пропустили), твитните нам @Chromiumdev с хэштегом #100CoolWebMoments . Наслаждайтесь!

Сокращенная строка User-Agent

Говоря о пользовательском агенте, Chrome 100 станет последней версией, которая будет поддерживать несокращенную строку User-Agent по умолчанию. Это часть стратегии по замене использования строки User-Agent новым API User-Agent Client Hints .

Начиная с Chrome 101, пользовательский агент будет постепенно сокращаться.

Ознакомьтесь с пробной версией и датами User Agent Reduction Origin в [блоге Chromium][crblog], чтобы узнать больше о том, что будет удалено и когда.

API размещения окон на нескольких экранах

Для некоторых приложений открытие новых окон и размещение их в определенных местах или на определенных дисплеях является важной функцией. Например, при использовании Slides для презентации я хочу, чтобы слайды отображались на весь экран на основном дисплее, а мои заметки докладчика — на другом дисплее.

API размещения окон на нескольких экранах позволяет перечислять дисплеи, подключенные к компьютеру пользователя, и размещать окна на определенных экранах.

С помощью window.screen.isExtended можно быстро проверить, подключено ли к устройству более одного экрана.

const isExtended = window.screen.isExtended;
// returns true/false

Однако ключевая функциональность находится в window.getScreenDetails() , который предоставляет подробную информацию о подключенных дисплеях.

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Например, вы можете определить основной экран, а затем использовать requestFullscreen() чтобы отобразить элемент на весь экран на этом дисплее.

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

И он предоставляет возможность отслеживать изменения, например, если подключается или отключается новый дисплей, изменяется разрешение и т. д.

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Для более подробного изучения ознакомьтесь с обновленной статьей Тома «Управление несколькими дисплеями с помощью API размещения окон на нескольких экранах» на web.dev .

И многое другое!

Конечно, есть еще много чего.

Для HID-устройств появился новый метод forget() , который позволяет отозвать разрешение на доступ к HID-устройству, предоставленное пользователем.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

А для WebNFC метод makeReadOnly() позволяет сделать теги NFC постоянно доступными только для чтения.

const ndef = new NDEFReader();
await ndef.makeReadOnly();

Дальнейшее чтение

Это охватывает только некоторые из основных моментов. Проверьте ссылки ниже для дополнительных изменений в Chrome 100.

Подписаться

Чтобы оставаться в курсе событий, подпишитесь на канал Chrome Developers на YouTube , и вы будете получать уведомления по электронной почте каждый раз, когда мы выпускаем новое видео.

Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 101, я сразу же расскажу вам, что нового в Chrome!