8月31日（米国）、Chrome93がリリースされましたので、さっそく最新版に更新してみました。今回のChrome93で新たに追加された機能もあり、興味深いバージョンアップになっています。

以下は、Chrome Developersのツイート。

Chrome92.0.4515.159から93.0.4577.63へ

Chromeのヘルプを開くと、自動的にバージョンの更新が走ります。その後、再起動を求められますので、再起動ボタンをクリックするだけで、Chrome93へのバージョンアップは完了です。

Chrome93の新機能

Chrome93の新機能は、小さな変更や機能追加を除くと、大きなものが４つ、新機能として追加されたとしています。

  • CSSモジュールスクリプト
  • マルチスクリーンウィンドウ配置API
  • リリースサイクルの短縮
  • 新しいPWA機能

CSSモジュールスクリプト

Chrome93から新たに追加されたCSSモジュールスクリプト。この新しい機能を使用すると、Javascriptモジュール importと同じように”ステートを含むCSSスタイルシート”をロードすることができるようになります。

以下は、Chrome Blogにサンプルとして挙げられていたものですが、assert {type: ‘css’}; の後に、document. やshadowRootを呼び出して適用しています。

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

web.devでは、CSSモジュールの利点として、重複の排除、評価順序、セキュリティなどの観点が挙げられるとされています。パフォーマンスが気になるところではありますが、どこかで一度試してみることにしましょう(;^ω^)

マルチスクリーンウィンドウ配置API

これは使い方によっては、便利な機能として使えそうですね。プレゼンテーション時に、プレゼンテーション用の画面をメインディスプレイに配置して、スピーカーノートをサブディスプレイに表示するといった使い方が一例として挙げられていますが、日本の場合、会議室などで、持参してきたノートパソコンをHDMIケーブルに接続して、、といったケースがほとんどかと思うので、そのまま使えるという訳ではなさそうですが、 マルチスクリーンウィンドウ配置APIは、新たな用途を考えることによって、便利な機能として活躍してくれそうな新機能です。

↓もブログにサンプルとしてあがっていたコードですが、これでデバイスに接続されている複数の画面を確認することができるのは便利ですね。

const isExtended = window.screen.isExtended;
// returns true/false