Safari 17.4

#Block layout with align-content

ブロックレイアウト及びテーブルレイアウトにも align-content を適用できるようになりました。この機能は Chrome 123 でもサポート予定です。

https://stackblitz.com/edit/js-6y3l4r?embed=1&file=index.html&hideExplorer=1&hideNavigation=1&view=preview

これにより Grid や Flexbox にしなくても良いケースが発生します。align-content: unsafe end; overflow: auto のパターンなどは、例えばチャットの表示などに使えるかもしれません。

#Promise.withResolvers()

Promise.withResolver()がほとんどの環境で利用できるようになりました。

Promise.withResolvers() - JavaScript | MDN

これは次の実装と等価です。

function withResolvers() {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
  });
  return { resolve, reject, promise };
}

これを使うと、例えば次のようにイベントリスナーの Promise 化が出来ます。

const confirm = () => {
  confirmDialog.showModal();
  const { promise, resolve, reject } = Promise.withResolvers();
  confirmDialog.addEventListener("cancel", () => {
    reject(false);
  });
  confirmDialog.addEventListerner("close", () => {
    resolve(true);
  });
  return promise;
};

const ok = await confirm();

#transition-behavior

CSS プロパティの transition-behavior もほとんどの環境で利用できるようになりました。transition-behavior: allow-discrete; を指定すると、離散プロパティ（display や box-shadowなど）に遷移を適用できます。

transition-behavior - CSS: Cascading Style Sheets | MDN

https://stackblitz.com/edit/js-nz9m9q?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1&view=preview

#@scope

セレクタの適用範囲を指定できる@scope がほとんどの環境で利用できるようになりました。

@scope - CSS: カスケーディングスタイルシート | MDN

https://stackblitz.com/edit/js-3xj7db?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1

#Switch control

WHATWG で提案されている input[type="checkbox"] 要素の switch 属性が Safari で先行サポートされました。これは role="switch" 及び関連する aria 属性にマッピングされます。現状、利用できる環境はほとんどありません。

https://stackblitz.com/edit/js-9dqi7k?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1

また下位互換性の問題はありますが、switch 要素が OpenUI で議論されている他 WHATWG でも触れられています。

https://github.com/whatwg/html/issues/4180

#Vertical form controls

フォーム関連要素の向きをコントロールできるようになりました。これは既に Chrome や Edge などでも部分的にサポートされています。

https://stackblitz.com/edit/js-agjqjj?embed=1&file=index.html&hideExplorer=1&hideNavigation=1&view=preview

あまり使うことはないと思いますが、記憶の隅に置いておくと有効活用できることがあるかもしれません。