#CSS ハイライトが継承されるように

::selectionと::target-textを利用したハイライトが、::highlightや::spelling-error、::grammar-errorを利用した場合と同じく子要素へ継承されるようになった。

今までは次のようなコードを書いた場合、em を選択しても色は変わらなかったが、Chrome 131 からは色が変わる。

<style>
  p {
    color: deeppink;
  }

  .blue::selection {
    color: blue;
  }
</style>
<p class="blue">
  This is
  <em>emphasized</em>
  text.
</p>

#details 要素のカスタマイズ

details要素へのdisplayプロパティの変更、::details-content疑似要素を利用した開閉部分のスタイリングが可能になった。

https://developer.chrome.com/blog/styling-details

<style>
  details {
    display: flex;
    overflow: hidden;
    width: min-content;
    /* ... */
    summary {
      &::marker {
        content: "";
      }
      /* ... */
    }
    ::details-content {
      transition: 0.5s ease;
      width: 0;
      height: 0;
    }
    [open]::details-content {
      width: 320px;
      height: 28em;
    }
    /* ... */
  }
</style>
<details name="accordion" open>
  <summary>🐈</summary>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam.
      Veritatis consequatur, soluta molestiae voluptates accusamus qui odio,
      error, repellat rem harum id similique omnis quod dignissimos saepe quas
      mollitia.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, aliquam.
      Veritatis consequatur, soluta molestiae voluptates accusamus qui odio,
      error, repellat rem harum id similique omnis quod dignissimos saepe quas
      mollitia.
    </p>
  </div>
</details>

#@page margin boxes

印刷時にページのマージン領域へのコンテンツの挿入が可能になった。 これによりヘッダーやフッターを独自のものに置き換えることも可能。

https://developer.chrome.com/blog/print-margins

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

印刷する

#Debug CSS with Gemini in DevTools

検証ツールから CSS などについて Gemini に質問できる機能が追加された。

https://developer.chrome.com/blog/new-in-devtools-131

#Gemini nano は不明

Google I/O で Chrome 126 から、Gemini Nano は Chrome デスクトップクライアントに組み込まれるという発表がありましたが、残念ながら組み込まれていないようです。リリースノートに延期という記載もないため不明です。Chrome 127 Beta で利用可能です。

const canCreate = await window.ai.canCreateTextSession();

if (canCreate !== "no") {
  const session = await window.ai.createTextSession();

  const result = await session.prompt("日本の一番高い山は何ですか？");
  console.log(result);

  const stream = session.promptStreaming(
    "次のキーワードを使って短い物語を書いてください：海、鳥"
  );
  for await (const chunk of stream) {
    console.log(chunk);
  }
}

#CSS のみで View Transitions を MPA で行えるようになった

以前から SPA では、View Transitions API を利用することでスムーズな遷移を実現できましたが、MPA でも View Transitions API を利用できるようになりました。

今まで MPA でスムーズな遷移を実現するには、Astro などのように遷移先のページを取得しておくなど JavaScript による処理が必要でした。

View Transition API によるスムーズな遷移 | View Transitions | Chrome for Developers

次の指定を遷移元・遷移先に行うことで、SPA の場合と同じように View Transitions API を利用できます。ただし同一ドメインである制約はあります。

@view-transition {
  navigation: auto;
}

#import assertion ‘assert’ 構文の使用中止と削除

他の環境と同様に import assertion が削除され、SyntaxError を吐くようになりました。with syntax に置き換える必要があります。

- import m from 'foo' assert { type: 'json' }
+ import m from 'foo' with { type: 'json' }

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

#CPU のスロットルを 20 倍にする - DevTools

パフォーマンスタブの CPU で 20x slowdown を選択できるようになりました。M3 MacBook Pro では、CLS の問題を確実に測定および診断することができない問題があったため、より強力な CPU スロットルが必要になったようです。

https://issues.chromium.org/issues/324978881

#その他

Chrome 以外の環境で利用できないものやニッチなものなど。

• URL.parse()
  • リリースノートに書かれていないが出荷されている。
  • このようなコードを書くと二重でパースされてしまう。これを避けるために生えた。
  jsx

  if (URL.canParse(str)) {
    return new URL(str);
  }

  • https://developer.mozilla.org/en-US/docs/Web/API/URL/parse_static
• CloseWatcher API の再有効化
  • dialog 要素や popover 要素を閉じるキー操作や Android の操作を簡単に扱うための API。
  • Chrome 120 で導入されたが、バグがあったため無効化された。
• Gamepad API のトリガーランブル拡張機能
  • ブラウザで Gamepad を使うための API
  • https://developer.mozilla.org/ja/docs/Web/API/Gamepad_API/Using_the_Gamepad_API
  • トリガーを振動させることが出来るようになった（？）
• GeolocationCoordinates、GeolocationPosition の toJSON メソッド
  jsx

  navigator.geolocation.getCurrentPosition((position) => {
    console.log(position.toJSON());
  });

#WebGPU API

WebGL にはいくつか問題がありました。

• WebGL の登場以降、新たなネイティブ GPU API が登場しましたが、OpenGL(WebGL)に更新は予定されていないため、新機能が利用できない
• WebGL はグラフィックをキャンバスにレンダリングするというケースを前提にしていたため、GPGPU などは不得意

WebGPU はこれらの問題に対応した WebGL の後継として作られ、最新 GPU API との互換性向上、GPGPU のサポート、より高度な GPU 機能へのアクセスを提供します。

また API は Promise が使える他、関数名などもまともなため、WebGL と比べるとかなり使いやすくなっています。とはいえ、実際利用する際は何らかのライブラリを使うことが多いと思います。既に有名な WebGL ライブラリは WebGPU サポートに取り込んでおり、特に Babylon.js は完全なサポートを既に提供しています。

https://doc.babylonjs.com/setup/support/webGPU

#レスポンスヘッダーの上書き

DevTools でレスポンスヘッダーを上書きできるようになりました。

https://developer.chrome.com/blog/new-in-devtools-113/

#CSS update Media Query

https://developer.chrome.com/blog/css-update-media-query/

あまり使う機会はないと思いますが、デバイスのリフレッシュレート（デバイスのアニメーションや更新の頻度）によってスタイルを分けることが出来ます。

@media (update: slow) {
   // ....
}

リフレッシュレートは以下の 3 つから選びます。

fast：通常のコンピュータやスマホなど

slow：電子書籍リーダーなど

none：紙に印刷されるドキュメントなど