9月17日、AppleはSafari 18.0をリリースした。iOS 18、iPadOS 18、macOS Sequoia、そしてvisionOS 2と共に、53の新しいウェブプラットフォーム機能、25の非推奨機能、そして209の修正が加えられた。このリリースでは、特にCSS、HTML、JavaScriptの新機能に注目すべき点が多く、Webエンジニアにとっては重要なアップデートである。

image.png

Safari 18.0における新機能

1. Distraction Control

Safari 18では「Distraction Control」が導入された。この機能により、ウェブ閲覧中に表示されるサインインバナーやクッキー通知、ニュースレターのサインアップオーバーレイなど、煩わしい要素を非表示にできる。Distraction ControlはiOS 18、iPadOS 18、macOS Sequoia上で使用可能であり、Page Menuから「Hide Distracting Items」を選択することで、非表示にしたい要素をクリックし、画面から消すことができる。

2. Viewer

SafariのViewer機能は、動画をフルスクリーンで表示できるようにしたものだ。ページメニューから「Video Viewer」を選択すると、動画が画面全体に拡大され、別のタブに切り替えたり、ウィンドウを閉じたりしても、動画がピクチャ・イン・ピクチャモードで表示され続ける。WebサイトにはセマンティックHTMLを使用することが推奨されており、これによりSafariのReaderやViewerが最適に動作する。

3. iPhone Mirroringとリモートインスペクション

macOS Sequoiaでは、iPhone Mirroring機能を使用して、iPhoneをMacから直接操作することが可能だ。この機能とリモートインスペクションを組み合わせることで、iPhone上のウェブサイトのテストやデバッグが簡単になる。Safariのデベロッパーツールを有効にし、iPhoneの設定から「Web Inspector」をオンにして、Macに接続することで、無線でのデバッグも可能になる。

開発者向けの新機能

1. CSS: View Transitions API

Safari 18.0では「View Transitions API」のサポートが追加された。このAPIは、ページの状態間のアニメーションを簡単に作成するために導入された。開発者は document.startViewTransition() メソッドを使って、状態のキャプチャとアニメーションの制御を行うことができる。

.page-view {
    view-transition-name: page-view;
}
::view-transition-old(page-view) {
    animation: 500ms ease-in-out transition-out-animation;
}
::view-transition-new(page-view) {
    animation: 500ms ease-in-out transition-in-animation;
}

2. CSS: Style Queries

Style Queriesは、CSSカスタムプロパティに対して条件付きでスタイルを適用するための新しい機能だ。この機能を使うことで、カスタムプロパティの値に基づいてスタイルを変えることができ、再利用可能なスタイルを効率的に管理できる。

@container style(--background: black) {
  h2, h3, p {
    color: white;
  }
}

この機能は、レスポンシブデザインや特定のデザイン条件に基づくスタイル適用に大きく貢献し、デザインの柔軟性が向上する。

3. CSS: Relative Color Syntaxのサポート強化

Safari 16.4で導入された「Relative Color Syntax」が、Safari 18.0ではさらに強化された。この機能は、既存の色から新しい色を動的に生成できるもので、Webエンジニアが色を柔軟に扱うのに役立つ。特に、currentcolor やシステムカラーキーワードを使って色を定義できるようになった点が大きな進化である。

section { background: oklch(from currentcolor calc(L * 4) C H); }

4. CSS: displayプロパティのアニメーション

従来、displayプロパティは「ブロック」「インライン」「なし」などの値を持つもので、要素の表示・非表示を制御するために使用されてきた。しかし、displayプロパティの値は即座に切り替わり、アニメーションでのトランジションを実装することが困難であった。このため、display: noneやdisplay: blockの切り替えにアニメーションを付ける場合、JavaScriptを用いた複雑な処理が必要となっていた。

Safari 18.0では、displayプロパティのトランジションが可能になり、より簡単に滑らかな表示・非表示のアニメーションが実現できるようになった。これにより、要素が表示される際や非表示になる際に自然な動きを伴うアニメーションがサポートされる。

例えば、次のコードでは、displayプロパティのトランジションを使用して、要素がフェードインし、フェードアウトするアニメーションを実装している。

.element {
    display: block;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.element-show {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

この新機能の最大の特徴は、displayのアニメーションが状態遷移の一環として動作することで、これまで手動で制御していた複雑なスクリプトが不要になる点である。これにより、UIの動作が滑らかになり、ユーザー体験が向上する。また、この機能は、フォームの要素やメニュー、モーダルウィンドウの表示・非表示に特に役立つ。

さらに、この機能はSafari 18.0において新たに追加されたtransition-behavior: allow-discreteと共に動作する。これにより、displayの値が「none」から「block」に変わる際、あるいはその逆に切り替わる際に、連続的なトランジションが実現される。

5. HTML: Writing Suggestions

Safari 18.0では、Webページのフォームやテキスト入力フィールドでのインライン予測テキストがサポートされた。この機能は、特定の入力状況でユーザーの入力を補助し、より高速かつ効率的な入力を可能にする。

<input type="text" writingsuggestions="true">

予測テキストの無効化も可能で、ユーザー体験を柔軟に調整できる。

6. HTML: DateとTimeの入力フィールドの改善

Safari 18.0では、<input type="date">、<input type="datetime-local">、<input type="time"> フィールドのアクセシビリティが向上した。これにより、スクリーンリーダーのユーザーもこれらのフィールドを簡単に操作できるようになった。

7. JavaScript: Unicode 15.1.0対応

Safari 18.0は、Unicode 15.1.0に対応しており、627の新しい文字が使用可能になった。また、正規表現での新しい v フラグのサポートにより、特定のスクリプト（例：ラテン文字とキリル文字の区別）を容易にマッチングできる。

const regex = /\p{sc=Latin}/v;
console.log(regex.test('A')); // true, 'A' はラテン文字
console.log(regex.test('А')); // false, 'А' はキリル文字

8. JavaScript: URL.parse()メソッド

新たに追加された URL.parse() メソッドは、無効なURLを解析する際に例外をスローせずに null を返すため、URL解析がより堅牢になった。

const url = URL.parse(input, base);

9. JavaScript: Web APIの拡張

Safari 18.0では、Shadow DOMに関するサポートが拡張され、shadowRootDelegatesFocusやshadowRootSerializableといった属性が追加された。これにより、Web開発者は影のルートのフォーカス制御やシリアライズに対応できるようになった。

Safari 18.0のリリースは、Webエンジニアにとって多くの新機能とツールを提供し、CSS、HTML、JavaScriptの作業がさらに効率的かつ柔軟になる。このアップデートにより、より直感的で高速なウェブ開発が可能となるだろう。詳細は[WebKit Features in Safari 18.0]を参照していただきたい。