- Chrome 62 делает API сетевой информации более полезным, предоставляя фактические показатели производительности вместо теоретических результатов.
- Появилась поддержка переменных шрифтов OpenType .
- Вы можете захватывать медиапотоки из элементов HTML Media.
- У меня есть специальное напоминание о важном изменении , которое появится в 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 для разработчиков. Конечно, их гораздо больше.
- API запроса платежа теперь доступен в Chrome для iOS.
- Вы можете начать создавать экспериментальные возможности виртуальной реальности с помощью пробной версии WebVR Origin .
Затем подпишитесь на наш канал YouTube , и вы будете получать уведомления по электронной почте всякий раз, когда мы запускаем новое видео.
Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 63, я буду здесь, чтобы рассказать вам, что нового в Chrome!
,- Chrome 62 делает API сетевой информации более полезным, предоставляя фактические показатели производительности вместо теоретических результатов.
- Появилась поддержка переменных шрифтов OpenType .
- Вы можете захватывать медиапотоки из элементов HTML Media.
- У меня есть специальное напоминание о важном изменении , которое появится в 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 для разработчиков. Конечно, их гораздо больше.
- API запроса платежа теперь доступен в Chrome для iOS.
- Вы можете начать создавать экспериментальные возможности виртуальной реальности с помощью пробной версии WebVR Origin .
Затем подпишитесь на наш канал YouTube , и вы будете получать уведомления по электронной почте всякий раз, когда мы запускаем новое видео.
Меня зовут Пит ЛеПейдж, и как только выйдет Chrome 63, я буду здесь, чтобы рассказать вам, что нового в Chrome!