Safari最新版(15.4)で使えるようになったHTML/CSS

2022年3月14日にSafari15.4がリリースされました。
今回のアップデートでSafari非対応だった便利なHTML/CSSがいくつか使えるようになりましたのでご紹介します。

画像の遅延読み込み

HTML

<img src="image.png" width="100" height="100" loading="lazy">

<img>のloading属性がSafariでも使えるようになりました。
これでほぼ全てのモダンブラウザで、属性による画像の読み込み遅延が行えるようになります。
画像遅延読み込みはJSによるベストプラクティスが（個人的に）悩ましい状況でしたので、ブラウザの機能が使えるのは安心感があります。
なお、<iframe>のloading属性についてはまだ非対応ですが、試験的な機能にはすでに含まれており、近いうちに実装される可能性は高いです。

Can I Use…
https://caniuse.com/?search=loading

scroll-behavior

CSS

html{
  scroll-behavior:smooth;
}

「scroll-behavior」はアンカーリンクなどのページ内スクロールの挙動を設定するプロパティです。
これも主要ブラウザではSafariのみ非対応だったのが、15.4から使えるようになりました。

アニメーションについてはブラウザに依存するので、こだわる場合は従来通りJSで制御したほうが良さそうです。

動的ビューポート：dvw, dvh

CSS

.box{
  height: 100dvh;
}

IOSのSafariでは、メニューなどのUIを考慮したビューポートが存在しておらず、全画面表示（height: 100vh）をするにはJSでの調整が必要でした。
この動的ビューポート（dvw, dvh）を使えば現在表示されている画面の幅・高さを設定できます。
メニューが表示されているとき「height: 100dvh」はメニューを除いた高さになり、メニューが表示されていないときは全画面の高さになります。
またこの動的ビューポートにに加えて
・最小ビューポート（メニュー表示時の画面の幅・高さ）＝svw, svh
・最大ビューポート（メニュー非表示時の幅・高さ）＝lvw, lvh
も追加されました。
これらの単位は今のところSafariのみの仕様のため、従来の単位と併記する必要があります。

.box{
  height: 100vh;
  height: 100dvh;
}

まとめ

他にもカスケードレイヤー（@layer）の実装など興味深いトピックがあります。詳しくは以下のリリースノートを参照してみてください。良いコーダーライフを！
参考：リリースノート
https://developer.apple.com/documentation/safari-release-notes/safari-15_4-release-notes