編集

Chrome 135 リリース

#Chrome #CSS #JavaScript #Web API

Chrome 135 がリリース。非常に多くの機能追加や変更が行われている。以降ではいくつかピックアップして紹介する。

出展：https://developer.chrome.com/release-notes/135?hl=ja

#CSS カルーセルのサポート

CSS のみでカルーセルを実装するための機能が非常に多く実装された。現在は Chrome 135 以降でのみのサポート。

関連：CSS カルーセルを試す

#Invoker Commands API

HTML による宣言的な記述により指定された要素に指定されたコマンドを実行できる機能。現在は Chrome 135 以降および Edge 135 以降でのサポートのみ。

ポップオーバーやダイアログの開閉を行う組み込みコマンドが用意されており、JavaScript を用いずにポップオーバーやダイアログ要素とボタン要素の紐づけが行える。

html
<button commandfor="mydialog" command="show-modal">Show modal dialog</button>
<dialog id="mydialog">
  <button commandfor="mydialog" command="close">Close</button>
  Dialog Content
</dialog>

また、JavaScript を利用する必要があるが、独自のコマンドを渡して処理することも可能。その場合、次のようにcommandイベントでコマンドを受け取り処理を行う。

js
element.addEventListener("command", (event) => {
  if (event.command == "--rotate-left") {
    element.style.rotate = "-90deg";
  } else if (event.command == "--rotate-right") {
    element.style.rotate = "90deg";
  }
});

参考：https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API

#Observable API

Observable API は、非同期イベントストリームを処理するための APi。現在は Chrome 135 以降でのサポートのみ。

命令型のaddEventListenerなどの記述に対して、宣言的な記述によるイベントハンドリングを可能。

要素がクリックされたログを出力する例：

js
element.when("click").subscribe({
  next: () => {
    console.log("clicked");
  },
});

追加で他の操作が完了するのを待つ例：

js
element
  .when("mousemove")
  .takeUntil(document.when("mouseup"))
  .subscribe({
    next: (e) => {
      console.log("mousemoved", e);
    },
  });

イベントから数値を計算する例：

js
const maxY = await element
  .when("mousemove")
  .takeUntil(element.when("mouseup"))
  .map((e) => e.clientY)
  .reduce((soFar, y) => Math.max(soFar, y), 0);

whenメソッドはObservableオブジェクトを返し、これに対してsubscribeメソッドを呼び出すことでイベントを購読する、takeUntilメソッドを呼び出すことで他の操作が完了するのを待つ、filterやreduceなどで処理を行うといったことが出来る。

参考：

#setInterval の 1ms 以上へのクランプ削除

Chrome 135 以降では、1ms 未満のsetIntervalの呼び出しが 1ms に強制されない。

例えば、setInterval(() => {}, 0)は今まで 1ms の遅延が発生していたが、今後は 0ms の遅延で実行される。

#clip-path での shape 関数のサポート

clip-pathでshape関数を利用することが可能になった。従来の方法に比べて、より柔軟な記述が可能。

css
.example {
  width: 100px;
  height: 100px;
  background-color: coral;
  clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
}

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape

編集