Новое в Chrome 71

Пит ЛеПейдж

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

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

Я Пит ЛеПейдж . Давайте углубимся и посмотрим, что нового для разработчиков в 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'

Использовать его просто: создайте новый экземпляр и укажите локаль, а затем просто вызовите формат с относительным временем. Для получения полной информации ознакомьтесь с публикацией Матиаса 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

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

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

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

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

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

Подписаться

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

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