メインコンテンツへスキップ

All Posts

News bits

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 を実装できます。

jsx
<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 がサポートされました。

html
<label for="onetimecode">Enter code:</label>
<input
  name="onetimecode"
  id="onetimecode"
  type="text"
  autocomplete="one-time-code"
/>

#緩和された CSS ネスト

Chrome 120 に続いて、& や is() を使用しなくても CSS をネストした状態で記述できるようになりました。

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 文に型情報を追加する方法を提供します。

jsx
import json from "./foobar.json" with { type: "json" };
import("foobar.json", { with: { type: "json" } });

#Login cookies

ウェブサイトを PWA などでウェブアプリとして追加した場合に、クッキーがコピーされるようになりました。これにより追加後に再度ログインをする必要がなくなりました。

著者について

Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.

In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.

In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.

In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.

I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.