Новое в Chrome 65

Пит ЛеПейдж

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

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

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

API CSS-рисования

API CSS Paint позволяет программно генерировать изображение для таких свойств CSS, как background-image или border-image .

Вместо ссылки на изображение вы можете использовать новую функцию рисования для его рисования — примерно как элемент холста.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

Например, вместо добавления дополнительных элементов DOM для создания эффекта ряби на кнопке в материальном стиле вы можете использовать API рисования.

Это также мощный метод полифилла CSS-функций, которые пока не поддерживаются браузером.

У Сурмы есть отличный пост с несколькими демонстрациями в его объяснении .

API синхронизации сервера

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

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

Вы можете отслеживать столько метрик, сколько захотите: время чтения базы данных, время запуска или любые другие важные для вас показатели, добавив заголовок Server-Timing к своему ответу:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

Они отображаются в Chrome DevTools, или вы можете извлечь их из заголовка ответа и сохранить вместе с другими данными аналитики производительности.


display: contents

Новое свойство CSS display: contents очень удобное!

При добавлении в элемент контейнера все дочерние элементы занимают его место в DOM, и он по сути исчезает. Допустим, у меня есть два div , один внутри другого. У моего внешнего div красная граница, серый фон, и я установил ширину 200 пикселей. У внутреннего div синяя граница и светло-голубой фон.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

По умолчанию внутренний div содержится во внешнем div .

Я внутренний <div>

Добавление display: contents к внешнему div приводит к исчезновению внешнего div и его ограничения больше не применяются к внутреннему div . Внутренний div теперь имеет ширину 100%.

Используйте DevTools для проверки DOM и обратите внимание, что внешний div все еще существует.

Есть много случаев, когда это может быть полезно, но наиболее распространенный из них — flexbox. С flexbox только непосредственные потомки flex-контейнера становятся flex-элементами.

Но как только вы примените display: contents к дочернему элементу, его дочерние элементы станут гибкими и будут размещаться с использованием тех же правил, которые применялись бы к их родителю.

Более подробную информацию и другие примеры можно найти в замечательной статье Рэйчел Эндрю « Исчезающие коробки с демонстрационным содержимым» .

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

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

Обязательно ознакомьтесь с разделом Новое в Chrome DevTools , чтобы узнать, что нового в DevTools в Chrome 65. А если вас интересуют Progressive Web Apps, посмотрите новую серию видеороликов PWA Roadshow . Затем нажмите кнопку подписки на нашем канале YouTube , и вы будете получать уведомления по электронной почте всякий раз, когда мы запускаем новое видео.

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