🏄
Matsuri-tech Frontend Weekly 2023-12-15

hrdtbs

hrdtbs

2023年12月15日
SafariDenoMFW

社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。

社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# Safari 17.2

2023年12月11日にSafari 17.2がリリースされました。

Safari 17.2 Release Notes | Apple Developer DocumentationReleased December 11, 2023 — Version 17.2 (19617.1.17)Safari 17.2 Release Notes | Apple Developer Documentation

WebKit Features in Safari 17.2Web technology is constantly moving forward, with both big new features and small subtle adjustments.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要素を紐づけることで、どれか一つだけを開ける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>

details name property sample - StackBlitzBlank starter project for building ES6 apps.details name property sample - StackBlitz

# 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を利用すると、ドキュメント上にある任意の文字列にスタイルを適用することが出来ます。ほとんどの環境で利用できるようになりました。

CSS Custom Highlight API - Web APIs | MDNThe CSS Custom Highlight API provides a mechanism for styling arbitrary text ranges on a document by using JavaScript to create the ranges, and CSS to style them.CSS Custom Highlight API - Web APIs | MDN

# 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がリリースされました。

Deno 1.39: The Return of WebGPUWe've re-added WebGPU, added new deno coverage reporters, made substantial Node.js compatibility improvements, and more.Deno 1.39: The Return of WebGPU

次のような変更がありました。

  • WebGPU APIの再導入
  • HTML形式のカバレッジレポートを表示 deno coverage --html
  • Jestのexpectと互換があるstd/expectが追加
  • コマンドライン引数をパースするstd/cliの追加

# SvelteKit 2

2023年12月14日にSvelteKit 2がリリースされました。

https://svelte.dev/blog/sveltekit-2