Новое в Chrome 93

Пит ЛеПейдж

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

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

Скрипты модуля CSS

Теперь вы можете загружать таблицы стилей CSS с операторами import , как и модули JavaScript. Таблицы стилей затем можно применять к документу или теневым корням таким же образом, как и конструируемые таблицы стилей.

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

Чтобы использовать его, импортируйте таблицу стилей с помощью assert {type: 'css'} , затем примените ее к document или shadowRoot , вызвав adoptedStyleSheets .

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Но будьте осторожны: если вы пропустите assert , файл будет рассматриваться как JavaScript и не будет работать!

Подробную информацию см. в статье Использование сценариев модуля CSS для импорта таблиц стилей на веб-сайте web.dev.

API размещения многоэкранных окон

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

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

Вы можете быстро проверить, подключено ли к устройству более одного экрана:

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

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

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

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

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

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

const screens = await window.getScreens();
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.

Сокращенный цикл выпуска

В марте мы объявили о наших планах сократить цикл выпуска и выпускать новую версию Chrome каждые четыре недели.

Это время пришло, и мы выпустим Chrome 94 21 сентября. Запланированные даты выпуска каждой версии можно найти в календаре Chrome .

Новые возможности PWA

Если вы создаете прогрессивное веб-приложение, стоит обратить внимание на две новые пробные версии Origin.

Обработчики URL-адресов для PWA

Если у вас установлен PWA и вы нажимаете ссылку на этот PWA, вы, вероятно, хотите, чтобы он открывался в PWA, а не на вкладке браузера.

Указав url_handlers в манифесте вашего веб-приложения и добавив файл web-app-origin-association в каталог .well-known/ , вы можете сообщить браузеру, что если пользователь нажимает ссылку на ваш PWA, он должен открыться в установил PWA.

Пример url_handlers в файле manifest.json :

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Пример файла web-app-origin-association :

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

А после небольшой дополнительной проверки вы даже сможете обрабатывать ссылки из других источников, которыми вы владеете.

Все подробности о пробной версии Origin находятся в PWA в качестве обработчиков URL-адресов на веб-сайте web.dev.

Наложение элементов управления окнами

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

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

Дополнительные сведения о пробной версии Origin см. в разделе Настройка наложения элементов управления окнами на строку заголовка вашего PWA .

Саммит PWA

Саммит PWA пройдет в октябре. Это бесплатная онлайн-конференция, призванная помочь каждому добиться успеха с помощью Progressive Web Apps. Саммит PWA — это сотрудничество представителей нескольких компаний, участвующих в создании технологий PWA: Google, Intel, Microsoft и Samsung.

Есть масса отличных докладов и контента. Узнать больше и зарегистрироваться можно на PWASummit.org .

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

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

  • В элементы Flexbox и flexbox добавлена ​​поддержка ключевых слов выравнивания: start , end , self-start , self-end , left и right .
  • API асинхронного буфера обмена теперь поддерживает файлы SVG.
  • Атрибут media будет учитываться при настройке meta theme-color , поэтому вы можете указать разные цвета темы для светлого и темного режимов. 
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

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

Это касается только некоторых ключевых моментов. Перейдите по ссылкам ниже, чтобы узнать о дополнительных изменениях в Chrome 93.

Подписаться

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

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