Новое в Chrome 93

Пит ЛеПейдж

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

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

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

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

Новая функция CSS Module Scripts отлично подходит для пользовательских элементов. И в отличие от других способов применения 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 размещения окон на нескольких экранах

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

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

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

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 Calendar .

Новые функции 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/*"]
      }
    }
  ]
}

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

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

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

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

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

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

Саммит PWA

PWA Summit пройдет в октябре. Это бесплатная онлайн-конференция, направленная на помощь всем в достижении успеха с помощью Progressive Web Apps. PWA Summit — это совместная работа людей из нескольких компаний, занимающихся созданием технологий 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 Developers на YouTube , и вы будете получать уведомления по электронной почте каждый раз, когда мы выпускаем новое видео.

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