Новое в Chrome 62

Пит ЛеПейдж

И есть еще много всего !

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

Хотите полный список изменений? Ознакомьтесь со списком изменений репозитория исходного кода Chromium .

Индикатор качества сети

API сетевой информации уже некоторое время доступен в Chrome, но он обеспечивает только теоретическую скорость сети с учетом соединения пользователя. Представьте, что вы подключены к Wi-Fi, но подключены к точке доступа сотовой связи, которая поддерживает только скорость 2G? API сообщит о Wi-Fi!

console.log(navigator.connection.type);
> wifi

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

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

console.log(navigator.connection.effectiveType);
> 4G

Эти сигналы также будут доступны в виде заголовков HTTP-запросов и включены через Client Hints . Ознакомьтесь с образцом и ознакомьтесь со спецификацией для более глубокого погружения.

Переменные шрифты OpenType

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

Переменный шрифт OpenType — это эквивалент нескольких отдельных шрифтов, которые можно компактно упаковать в один файл шрифта. Настраивая CSS-свойство font-variation-settings , можно легко настроить растяжение, стиль, вес и многое другое, обеспечивая бесконечное количество стилистических вариаций. Эти три шрифта теперь можно объединить в один компактный файл.

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

Переменные шрифты OpenType дают нам новый мощный инструмент для создания адаптивной типографики и уменьшения веса страницы. Для получения более подробной информации ознакомьтесь с статьей «Введение в переменные шрифты OpenType» Джона Хадсона.

Захват мультимедиа из элементов DOM

Теперь вы можете захватывать в реальном времени контент в MediaStream непосредственно из HTMLMediaElements например аудио и видео, с помощью API захвата мультимедиа из DOM Elements .

После вызова captureStream() для медиа-элемента HTML потоковым контентом можно манипулировать, обрабатывать, отправлять удаленно или записывать. Представьте себе, что вы используете веб-аудио для создания собственного эквалайзера или вокодера. Или передавайте контент на удаленный сайт с помощью WebRTC. Возможности практически безграничны.

Метки «Небезопасно» для некоторых HTTP-страниц

Как мы объявляли ранее, начиная с Chrome 62, когда пользователь вводит данные на HTTP-странице, Chrome помечает страницу как «Небезопасную» с помощью метки в адресной строке. Эта метка также будет отображаться в режиме инкогнито для всех HTTP-страниц.

И более!

Это лишь некоторые изменения в Chrome 62 для разработчиков. Конечно, их гораздо больше.

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

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