Google выпустила бета-версию Chrome 64

Выпущена очередная бета-версия браузера Chrome 64 для Android, Chrome OS, Linux, Mac и Windows. Основными нововведениями стали улучшенный блокировщик всплывающих окон, поддержка Resize Observer API и новое свойство import.meta.

Улучшенный блокировщик окон

Как заявляют разработчики, в каждом пятом отчете, собранном с десктопных версий Chrome, упоминается тот или иной тип нежелательного контента. Примеры включают ссылки на сторонние сайты, замаскированные под кнопки воспроизведения или другие элементы управления сайтом. Кроме того, упоминаются прозрачные накладки на веб-сайтах, которые захватывают все клики и открывают новые вкладки и окна. В новой бета-версии браузера блокировщик пресекает такое поведение сайтов и не дает открывать нежелательные вкладки или окна. Проверить свой сайт на указанные злоупотребления и улучшить пользовательский интерфейс владельцы ресурсов могут через Google Search Console, выбрав пункт Abusive Experiences Report.На изображениях приведены 2 примера обманчивого поведения сайта. В первом случае при нажатии на кнопку проигрывания видео начинается нежелательная загрузка. Во втором случае при нажатии на кнопку закрытия окна открываются всплывающие окна.

Resize Observer — отслеживание событий изменения элемента

Традиционно веб-приложения использовали CSS-медиазапросы или метод window.onresize для создания компонентов, адаптирующихся к различным размерам экранов. Однако оба эти метода требуют, чтобы для адаптивного ответа сайта менялось все отображение. Теперь Chrome поддерживает Resize Observer API,что дает веб-приложениям возможность использовать более тонкие настройки для отслеживания изменений размеров элементов на странице.

			const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px / ${cr.left}px`);
  }
});
 // Observe one or multiple elements
ro.observe(someElement);
		

В приведенном выше фрагменте кода для отслеживания изменений элемента используется Resize Observer API.

Мета-свойство import.meta

Chrome теперь поддерживает мета-свойство import.meta, которое может хранить метаданные, относящиеся к хосту. Например, с его помощью можно получить URL-адрес модуля через import.meta.url. В будущем Chrome планирует добавить больше свойств в import.meta.

Более подробно с этими и другими изменениями, вошедшими в новую бета-версию Chrome, можно ознакомиться в блоге разработчиков.