Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Новый в Chrome 64

Powered by Google Translate

  • Поддержка ResizeObservers , сообщит вам, когда прямоугольник содержимого элемента изменил свой размер.
  • Модули теперь могут обращаться к конкретным метаданным хоста с помощью import.meta .
  • pop-up blocker становится сильным.
  • window.alert() больше не изменяет фокус.

И есть plenty more !

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

ResizeObserver

Отслеживание при изменении размера элемента может быть немного болью. Скорее всего, вы присоедините слушателя к событию resize документа, затем вызовите getBoundingClientRect или getComputedStyle . Но, оба из них могут вызвать разметку макета.

И что, если окно браузера не изменило размер, но новый элемент был добавлен в документ? Или вы добавили display: none к элементу? Оба они могут изменять размер других элементов на странице.

ResizeObserver уведомляет вас о каждом изменении размера элемента и предоставляет новую высоту и ширину элемента, что снижает риск переполнения макета.

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

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);

Ознакомьтесь с ResizeObserver: It's like document.onresize for Elements для получения более подробной информации и примеров из реального мира.

Я ненавижу tab-unders. Вы знаете их, это когда страница открывает всплывающее окно для какого-либо пункта назначения и перемещает страницу. Обычно одним из них является объявление или что-то, чего вы не хотели.

Начиная с Chrome 64, эти типы навигаций будут заблокированы, а Chrome покажет собственный пользовательский интерфейс для пользователя, что позволит им выполнить перенаправление, если они захотят.

import.meta

При написании модулей JavaScript часто требуется доступ к метаданным, относящимся к конкретному хосту, о текущем модуле. Chrome 64 теперь поддерживает свойство import.meta рамках модулей и предоставляет URL-адрес модуля как import.meta.url .

Это действительно полезно, если вы хотите разрешить ресурсы по сравнению с файлом модуля в отличие от текущего HTML-документа.

И еще!

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

  • Chrome теперь поддерживает named captures и Unicode property escapes в регулярных выражениях.
  • По умолчанию preload значение <audio> и <video> элементов теперь metadata . Это приводит Chrome в соответствие с другими браузерами и помогает сократить пропускную способность и использование ресурсов, загружая только метаданные, а не сам носитель.
  • Теперь вы можете использовать Request.prototype.cache для просмотра режима кэширования Request и определить, является ли запрос запросом перезагрузки.
  • Используя API управления фокусом, вы можете теперь сфокусировать элемент, не прокручивая его с preventScroll атрибута preventScroll .

window.alert()

О, и еще один! Хотя это не является «особенностью разработчика», это делает меня счастливым. window.alert() больше не window.alert() фоновой вкладке на передний план! Вместо этого предупреждение будет отображаться, когда пользователь переключится на эту вкладку.

Нет более случайных переключений табуляции, потому что что-то произвело на меня window.alert . Я смотрю на вас старый Календарь Google.

Обязательно subscribe с subscribe с нашим YouTube channel , и вы получите уведомление по электронной почте всякий раз, когда мы запускаем новое видео, или добавим наш RSS feed в устройство чтения каналов.

Я Pete LePage, и как только Chrome 65 будет выпущен, я буду здесь, чтобы рассказать вам, что нового в Chrome!

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!