Chrome 64 の新機能

Pete LePage

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

他にもたくさんの機能があります。

ピート ルページです。Chrome 64 のデベロッパー向け新機能を詳しく見ていきましょう。

変更内容の完全なリストについては、Chromium ソース リポジトリの変更リストをご覧ください。

ResizeObserver

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

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

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

他の Observer と同様に、使い方は非常に簡単です。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 以降では、このようなナビゲーションはブロックされ、一部のネイティブ 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 チャンネルにご登録ください。新しい動画が公開されるたびに、メール通知が届きます。

Chrome 65 のリリースと同時に Chrome の新機能をお知らせします