社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。
社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。
# Safari 17.2
2023年12月11日にSafari 17.2がリリースされました。
Safari 17.2では多くの機能追加と、Interop 2023による多くの修正や機能改善が含まれいています。Interopは、Google、Microsoft、Mozilla、Appleなどによって全てのブラウザで全く同じようにWebの機能を動作させるためのプロジェクトです。
# Exclusive accordions
Chrome 120に続いて、details要素のname属性がサポートされました。同じname属性で複数のdetails要素を紐づけることで、どれか一つだけを開ける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を利用すると、ドキュメント上にある任意の文字列にスタイルを適用することが出来ます。ほとんどの環境で利用できるようになりました。
# 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がリリースされました。