Новое в Chrome 100

Пит ЛеПейдж

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

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

Хром 100

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

Логотип Chrome и Firefox

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

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

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

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

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

Промо-изображение «100 крутых веб-моментов»

Было интересно наблюдать за развитием Интернета и видеть все удивительные вещи, которые вы создали за последние 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 размещения многоэкранных окон

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

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.

Подписаться

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

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