このページは Cloud Translation API によって翻訳されました。

Chrome 104 の新機能

Pete LePage

必知事項は次のとおりです。

getDisplayMedia() を使用して現在のタブをキャプチャするときに、リージョンキャプチャを使用して切り抜き領域を指定できるようになりました。
メディアクエリの構文は、数学的な比較演算子を使用して記述できます。
共有要素遷移: オリジントライアルが開始されます。
他にも多数の機能があります。

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

領域キャプチャでクロップ領域を指定する

getDisplayMedia() を使用すると、現在のタブから動画ストリームを作成できます。ただし、タブ全体ではなく、その一部のみを共有したい場合があります。これまで、動画の各フレームを手動で切り抜くしかありませんでした。

リージョンキャプチャを使用すると、ウェブアプリで共有する画面の特定の領域を定義できます。たとえば、Google スライドでは、標準の編集ビューのまま、現在のスライドを共有できます。

メインコンテンツ領域とクロスオリジン iframe がハイライト表示されたウェブアプリを表示するブラウザウィンドウのスクリーンショット。 — メインコンテンツエリアは青色で、クロスオリジン iframe は赤色です。

使用するには、共有する要素を選択し、その要素に基づいて新しい CropTarget を作成します。次に、getDisplayMedia() を呼び出して画面共有を開始します。画面の共有許可を求めるメッセージが表示されます。次に、track.cropTo() を呼び出して、前に作成した cropTarget を渡します。

const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);

const stream = await navigator.mediaDevices
                    .getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();

await track.cropTo(cropTarget);

詳しくは、リージョンキャプチャによるタブの共有の改善をご覧ください。

レベル 4 の構文と評価によるメディアクエリの簡素化

メディアクエリはレスポンシブデザインに不可欠で、さまざまなビューポートサイズに固有のスタイルを定義できます。ただし、毎日使用しない限り、構文が少しわかりづらい場合があります。

Chrome 104 では、メディアクエリ - レベル 4 - 構文と評価がサポートされるようになりました。これにより、通常の数学演算子を使用してメディアクエリを記述できるようになります。

たとえば、400 ～ 600 ピクセルのビューポートを示すには、次のようにします。

@media (min-width: 400px) and (max-width: 600px) {
  /* Styles for viewports between 400px and 600px. */
}

次のように記述できます。

@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}

新しい構文では、メディアクエリの冗長性が軽減されるだけでなく、より正確に指定できるようになります。min- クエリと max- クエリは包括的です。たとえば、min-width: 400px は幅が 400 ピクセル以上のテストです。新しい構文を使用すると、意図する内容をより明確に指定できます。

@media (width < 400px) {
  /* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
  /* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
  /* Styles for viewports between 601px and 1000px. */
}

Firefox ではすでにサポートされており、新しい構文を古い構文に書き換えてブラウザの互換性を確保する PostCSS プラグインもあります。

詳しくは、Rachel の記事「Chrome 104 の範囲メディアクエリの新しい構文」をご覧ください。

共有要素遷移の新しいオリジントライアルの開始

プラットフォーム固有のアプリは通常、さまざまなビューをスムーズに遷移し、美しく、ユーザーのコンテキストを維持し、エクスペリエンスのパフォーマンスを高めることができます。一方、ウェブでは、完全なナビゲーションが不自然に感じられ、画面が短時間空白になることもあります。シングルページアプリの場合は改善できますが、遷移は依然として困難です。

共有要素遷移は、Chrome 104 で新しいオリジントライアルとして開始されます。この機能を使用すると、遷移がドキュメント間（マルチページアプリなど）かドキュメント内（シングルページアプリなど）かにかかわらず、スムーズな遷移を実現できます。

シングルページアプリで遷移がどのように機能するかの例を次に示します。ナビゲート関数で新しいページのコンテンツを取得し、遷移がサポートされているかどうかを確認します。サポートされていない場合は、遷移なしでページを更新します。変更が必要な場合は、transition() を作成し、start() を呼び出して、DOM の変更が完了したことを API に通知します。

async function spaNavigate(path) {
  // Get new page content.
  const data = await fetchPage(path);

  // Check if transitions are supported, if not, use classic method.
  if (!document.createDocumentTransition) {
    await updateDOM(data);
    return;
  }

  // Create transition
  const transition = document.createDocumentTransition();

  // Start transition, let API know when DOM change is complete.
  transition.start(() => updateDOM(data));
}

共有要素遷移は、内部で CSS アニメーションを使用しているため、フェードインエフェクトからスライドインなど、任意のエフェクトに変更できます。

ここまではほんの一部に過ぎません。詳しくは、Jake の動画「Bringing Page Transitions to the Web」または説明動画をご覧ください。

その他

もちろん、他にもたくさんあります。

明示的な Expires 属性または Max-Age 属性を使用して Cookie が設定される場合、値の上限は 400 日以内に制限されます。
マルチスクリーンウィンドウの配置 API が強化されました。
overflow-clip-margin CSS プロパティは、要素のコンテンツをクリップする前にペイントできる範囲を指定します。

Chrome 104 の新機能

領域キャプチャでクロップ領域を指定する

レベル 4 の構文と評価によるメディアクエリの簡素化

共有要素遷移の新しいオリジン トライアルの開始

その他

関連情報

登録

共有要素遷移の新しいオリジントライアルの開始