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: 要素の 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 の新機能についてお知らせします。