Frontend Weekly 2023-12-15
Safari 17.2、Deno 1.39、SvelteKit 2などについて紹介する。
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>https://stackblitz.com/edit/js-bjwzi1?file=index.html
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などでウェブアプリとして追加した場合に、クッキーがコピーされるようになりました。これにより追加後に再度ログインをする必要がなくなりました。
Deno 1.39
2023年12月14日にDeno 1.39がリリースされました。
次のような変更がありました。
- WebGPU APIの再導入
- HTML形式のカバレッジレポートを表示
deno coverage --html - Jestのexpectと互換がある
std/expectが追加 - コマンドライン引数をパースする
std/cliの追加
SvelteKit 2
2023年12月14日にSvelteKit 2がリリースされました。