Safari 17.2
2023 年 12 月 11 日に Safari 17.2 がリリースされました。
https://developer.apple.com/documentation/safari-release-notes/safari-17_2-release-notes
https://www.webkit.org/blog/14787/webkit-features-in-safari-17-2/
Safari 17.2 では多くの機能追加と、Interop 2023 による多くの修正や機能改善が含まれいています。Interop は、Google、Microsoft、Mozilla、Apple などによって全てのブラウザで全く同じように Web の機能を動作させるためのプロジェクトです。
Exclusive accordions
Chrome 120 に続いて、details 要素の name 属性がサポートされました。同じ name 属性で複数の details 要素を紐づけることで、どれか 1 つだけを開ける UI を実装できます。
<details name="cookies">
<summary>Chocolate chip</summary>
Yum yum chocolate chip.
</details>
<details name="cookies">
<summary>Snickerdoodle</summary>
Yum yum snickerdoodle.
</details>
<details name="cookies">
<summary>Maicenitas</summary>
Yum yum maicenitas.
</details>
<details name="cookies">
<summary>Sugar cookies</summary>
Yum yum sugar cookies.
</details>One time code
SMS などで受信したワンタイムコードをサジェストしてくれる autocomplete 属性の one-time-code がサポートされました。
<label for="onetimecode">Enter code:</label>
<input
name="onetimecode"
id="onetimecode"
type="text"
autocomplete="one-time-code"
/>緩和された CSS ネスト
Chrome 120 に続いて、& や is() を使用しなくても CSS をネストした状態で記述できるようになりました。
article {
h1 {
font-size: 1.8rem;
}
p {
font-size: 1.2rem;
}
}Custom Highlight API
Custom Highlight API がサポートされました。Custom Highlight API を利用すると、ドキュメント上にある任意の文字列にスタイルを適用することが出来ます。ほとんどの環境で利用できるようになりました。
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API
Import attributes
Chrome に続いて、Import 属性がサポートされました。これは、モジュールの import 文に型情報を追加する方法を提供します。
import json from "./foobar.json" with { type: "json" };
import("foobar.json", { with: { type: "json" } });Login cookies
ウェブサイトを PWA などでウェブアプリとして追加した場合に、クッキーがコピーされるようになりました。これにより追加後に再度ログインをする必要がなくなりました。