Новое в Chrome 71

Pete LePage

В Chrome 71 мы добавили поддержку:

• Отображение относительного времени теперь является частью Intl API.
• Указание того , с какой стороны текста должно появляться подчеркивание для текста, расположенного вертикально.
• Требование активации пользователя перед использованием API синтеза речи.

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

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

Журнал изменений

Здесь рассмотрены лишь некоторые из основных моментов. Дополнительные изменения в Chrome 71 можно найти по ссылкам ниже.

• Список изменений в исходном репозитории Chromium
• Обновления ChromeStatus.com для Chrome 71
• Устаревание и удаление Chrome 71

Отображение относительного времени с помощью Intl.RelativeTimeFormat()

Многие веб-приложения используют фразы вроде «вчера», «через два дня» или «час назад», чтобы указать, когда что-то произошло или должно произойти, вместо отображения полной даты и времени.

Отображение относительного времени стало настолько обычным, что большинство библиотек даты/времени предоставляют локализованные функции для обработки этого для нас. Фактически, почти в каждом веб-приложении, которое я создаю, Moment JS является одной из первых библиотек, которые я добавляю специально для этой цели.

Chrome 71 представляет Intl.RelativeTimeFormat() , который переносит работу на движок JavaScript и позволяет локализованное форматирование относительного времени. Это дает нам небольшой прирост производительности и означает, что нам нужны эти библиотеки только как полифил, когда браузер еще не поддерживает новые API.

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

Использовать его просто, создайте новый экземпляр и укажите локаль, затем просто вызовите format с относительным временем. Ознакомьтесь с постом Mathias' The Intl.RelativeTimeFormat API для получения полной информации.

Указание местоположения подчеркивания для вертикального текста

Когда китайский или японский текст отображается вертикально , браузеры по-разному определяют, где располагается подчеркивание: оно может быть слева или справа.

В Chrome 71 свойство text-underline-position теперь принимает left или right как часть спецификации оформления текста CSS3. Спецификация оформления текста CSS3 добавляет несколько новых свойств, которые позволяют указывать такие вещи, как тип используемой линии , стиль , цвет и положение .

.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}

Синтез речи требует активации пользователем

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

Начиная с Chrome 71, API синтеза речи теперь требует какой-либо активации пользователя на странице, прежде чем он заработает. Это приводит его в соответствие с другими политиками автовоспроизведения . Если вы попытаетесь использовать его до того, как пользователь взаимодействовал со страницей, он выдаст ошибку.

const utterance = new window.SpeechSynthesisUtterance('Hello');
utterance.lang = lang || 'en-US';
try {
  window.speechSynthesis.speak(utterance);
} catch (ex) {
  console.log('speechSynthesis not available', ex);
}

Нет ничего хуже, чем прийти на объект и обнаружить, что он удивил вас и ваших коллег, сидящих рядом.

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

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

• Метод Element.requestFullscreen() теперь можно настраивать на Android , он позволяет выбирать между отображением панели навигации и полностью иммерсивным режимом, в котором элементы управления пользовательского агента не отображаются до тех пор, пока пользователь не выполнит жест.
• Режим учетных данных по умолчанию для запросов скриптов модулей изменился с omit на same-origin .
• А благодаря интеграции Chrome со спецификацией Shadow DOM v1 Chrome 71 теперь вычисляет специфичность для псевдоклассов :host() и :host-context() , а также для аргументов для ::slotted() .

Видео с Chrome DevSummit

Если вы не попали на Chrome Dev Summit или, может быть, попали, но не посмотрели все доклады, посмотрите плейлист Chrome Dev Summit 2018 на нашем канале YouTube.

Ева и Фил рассмотрели несколько интересных приемов использования сервис-воркеров в статье «Создание более быстрых и надежных приложений с помощью сервис-воркеров» .

Марико и Джейк рассказали о том, как они создают Squoosh в сложных веб-приложениях с большим объемом JS, избегая медленного .

Кэти и Хуссейн рассмотрели несколько замечательных приемов, позволяющих максимально повысить производительность вашего сайта, в книге «Основы скорости: ключевые приемы для быстрых веб-сайтов» .

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

Подписаться

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

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