Chrome 64 の新機能

Pete LePage

  • ResizeObservers のサポート。要素のコンテンツ レクタングルのサイズが変更されたときに通知します。
  • モジュールは import.meta を使用してホスト固有のメタデータにアクセスできるようになりました。
  • ポップアップ ブロッカーが強化されます。
  • window.alert() でフォーカスが移動しなくなりました。

他にもさまざまな機能があります。

Pete LePage と申します。Chrome 64 のデベロッパー向けの新機能について詳しく見てみましょう。

変更点の詳細なリストについては、Chromium ソース リポジトリの変更リストを確認する。

ResizeObserver

要素のサイズが変更されたタイミングを追跡するのは少し面倒です。通常は、ドキュメントの resize イベントにリスナーをアタッチしてから、getBoundingClientRect または getComputedStyle を呼び出します。ただし、どちらもレイアウト スラッシングを引き起こす可能性があります。

ブラウザ ウィンドウのサイズは変更されなかったが、ドキュメントに新しい要素が追加された場合はどうなりますか？または、要素に display: none を追加しましたか？どちらの場合も、ページ内の他の要素のサイズが変更される可能性があります。

ResizeObserver は、要素のサイズが変更されるたびに通知し、要素の新しい高さと幅を提供します。これにより、レイアウト スラッシングが発生するリスクを軽減できます。

他のオブザーバーと同様に、使用方法は非常に簡単です。ResizeObserver オブジェクトを作成し、コンストラクタにコールバックを渡します。コールバックには、要素の新しいディメンションを含む ResizeOberverEntries の配列（観測された要素ごとに 1 つのエントリ）が渡されます。

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: Elements の document.onresize に似ていますをご覧ください。

タブの下は嫌いです。ページで目的の移動先へのポップアップを開き、ページをナビゲートするものです。通常、そのうちの 1 つは広告や、望ましくないものです。

Chrome 64 以降、このようなタイプのナビゲーションはブロックされ、Chrome からネイティブ UI が表示されます。ユーザーは、必要に応じてリダイレクトに従うことができます。

import.meta

JavaScript モジュールを記述する際に、現在のモジュールに関するホスト固有のメタデータにアクセスしたいことがよくあります。Chrome 64 では、モジュール内の import.meta プロパティがサポートされ、モジュールの URL が import.meta.url として公開されるようになりました。

これは、現在の HTML ドキュメントではなく、モジュール ファイルに関連するリソースを解決する場合に特に便利です。

その他

これらは、デベロッパー向けの Chrome 64 の変更のほんの一部です。もちろん、他にも多くの変更があります。

  • Chrome で、正規表現の名前付きキャプチャと Unicode プロパティのエスケープがサポートされるようになりました。
  • <audio> 要素と <video> 要素のデフォルトの preload 値が metadata になりました。これにより、Chrome は他のブラウザと整合性が保たれ、メディア自体ではなくメタデータのみが読み込まれるため、帯域幅とリソースの使用量を削減できます。
  • Request.prototype.cache を使用して Request のキャッシュ モードを表示し、リクエストが再読み込みリクエストかどうかを判断できるようになりました。
  • Focus Management API を使用して、preventScroll 属性でスクロールせずに要素にフォーカスできるようになりました。

window.alert()

もう 1 つ、これは「デベロッパー向け機能」ではありませんが、私にとってはうれしい機能です。window.alert() でバックグラウンド タブがフォアグラウンドに表示されなくなりました。代わりに、ユーザーがそのタブに戻ったときにアラートが表示されます。

何かが window.alert をトリガーしてタブがランダムに切り替わることもなくなりました。古い Google カレンダーを参照しています。

YouTube チャンネルにチャンネル登録すると、新しい動画が公開されるたびにメール通知が届きます。

Pete LePage と申します。Chrome 65 がリリースされ次第、Chrome の新機能についてお知らせします。