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

Chrome 104 の新機能

Pete LePage

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

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

ピートルページです。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- クエリは包括的です。たとえば、幅が 400 ピクセル以上の min-width: 400px テストです。新しい構文を使用すると、意味をより明確に示すことができます。

@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 の構文と評価を使用した簡単なメディアクエリ

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

など多数

関連情報

登録

リージョンキャプチャで切り抜き領域を指定する

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