Новое в Chrome 62

Пит ЛеПейдж

И это еще не все !

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

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

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

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

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 дают нам мощный новый инструмент для создания адаптивной типографики и уменьшения веса страницы. Ознакомьтесь с Introducing OpenType Variable Fonts Джона Хадсона для получения более подробной информации.

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

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

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

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

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

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

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

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

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