このページは 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);

詳しくは、Region Capture を使用したタブ共有の改善をご覧ください。

レベル 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 で新しいオリジントライアルとして開始されます。この機能を使用すると、遷移がドキュメント間（マルチページアプリなど）かドキュメント内（シングルページアプリなど）かにかかわらず、スムーズな遷移を実現できます。

以下に、シングルページアプリの遷移がどのように動作するかの大まかな例を示します。nav 関数で、新しいページコンテンツを取得し、遷移がサポートされているかチェックします。サポートされていない場合は、ページを遷移せずに更新します。変更が必要な場合は、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 の構文と評価によるメディアクエリの簡素化

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

その他

関連情報

登録