iOS・macOSと同時に大型アップデートがSafariにも到来、新たな「高さ」の基準やカスケードレイヤーが追加される

2022年3月14日にmacOS Monterey 12.3およびiPadOS・iOS 15.4がリリースされ、同時にSafariが新しいバージョン「15.4」にアップデートされました。Google ChromeやFirefoxに先行搭載されている多数の機能が追加されたほか、動的に変化するビューポートのサイズに応じて要素の高さを決める「dvh」という新たな指定方法などの機能が他のブラウザに先駆けて搭載されました。

New WebKit Features in Safari 15.4 | WebKit
https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/

◆img要素にlazy loading機能が搭載へ
img要素に「loading="lazy"」属性を付与することで、「付近にスクロールするまで画像を読み込まない」という遅延読み込み機能を利用することが可能になりました。

◆dialog要素と「::backdrop」疑似要素がサポートされる
画面内にダイアログボックスやサブウィンドウを出すのに利用可能な「dialog」要素がサポートされました。同時に、ダイアログボックスを表示した時の背景色を指定できる「::backdrop」疑似要素もサポートされています。こうした機能を利用すると、下の画像のようなダイアログを簡単に表示することが可能です。

◆CSSでカスケードレイヤーをサポート
CSSをレイヤーごとに配置することで、CSSが重複して適用される場合の優先順位を分かりやすく整理できる仕組み「カスケードレイヤー」がサポートされました。

◆:has()疑似クラスのサポートが追加される
「子にimg要素を持つaタグ」や「直後にdtタグが来るdtタグ」など他の要素を絡めたセレクターを記述することが可能になります。

◆新たな「高さ」の基準が追加される
スマートフォンは画面のスペースが限られているため、Safariではページの閲覧中にナビゲーションバーを小さく縮小し、コンテンツをより大きい画面で閲覧できるようになっています。そうした「動的にビューポートのサイズが変化する」際のレイアウトを簡単にするために、Safari 15.4では画面の高さを基準に要素の高さを決定できる従来の「vh」に加えて「svh」「lvh」「dvh」という3つの指定方法が追加されました。svhはビューポートの最小サイズで、lvhは最大サイズ、dvhは現在のビューポートサイズを示しています。

なお、横のサイズを指定する「vw」にも「svw」「lvw」「dvw」が実装されているほか、vminやvmaxに対応する「svmin」「svmax」「lvmin」「lvmax」「dvmin」「dvmax」などの指定も可能になっています。

◆「accent-color」がサポートされる
チェックボックスやラジオボタンの「チェックを入れる部分」の色を変更可能になりました。

◆グラデーションの遷移が改善される
途中で濁った色になっていたのを修正したとのこと。

◆「font-palette」をサポート
いくつかのバリエーションが含まれているカラーフォントにおいて、どの色を利用するのかを指定する「font-palette」プロパティが利用可能になりました。

◆新たなWeb APIの機能を搭載
複数のタブ間で通信できる機能の「BroadcastChannel」が実装され、タブ間でログイン状態などを同期可能になったほか、リソースへのアクセスを管理する「Web Locks API」がサポートされました。

また、「window.scroll()」「window.scrollTo()」「window.scrollBy()」のオプションで「behavior」を設定することでスクロールの動作を変更可能になったとのこと。

なお、Safari 15.4では上記の他にJavaScriptの関数や拡張機能で利用できるAPIが新たにサポートされました。全ての変更点については公式ページのパッチノートに記載されています。