Safari 27 の WebKit の新機能

ハイライト

WebKit チームは過去1年で1,100件を超える基盤問題を修正しました。同時に Safari 27 は、CSS Grid Lanes による Masonry レイアウト、深くカスタマイズできる <select> 要素、クロスプラットフォームの <model> 3D モデルタグ、そして Xcode 不要の Safari Web Extension パッケージングツールを追加します。

主要内容

「新機能を増やす」から「技術的負債を返す」へ

フロントエンド開発者なら、Chrome では問題なく動くコードが Safari では壊れる、という場面に出会ったことがあるはずです。SVG グラデーションの描画位置がずれることもあれば、emoji 入力が文字化けすることもあり、sizes 属性内で min() 関数が効かないこともあります。

WebKit チームは今年、重心を「新機能を積み上げる」ことから「古い問題を直す」ことへ移しました。(01:06) 1,100件を超える機能改善と bug を修正し、チーム記録を更新しました。

典型例は emoji 入力の文字化けです。(02:05) 古いサイトは String.fromCharCode() でキーボード入力を処理しますが、このメソッドは16ビット以内の Unicode コードポイントしか扱えません。多くの emoji は17ビットを必要とするため、切り捨てられるとまったく別の文字になります。WebKit の解決策は実用的です。ユーザーが16ビットを超える文字を入力した場合、エンジンは数値コードポイントを送らず、直接テキストとして渡します。サイト側のコードを変更せずに問題を解決できます。

block-in-inline レイアウトの書き直し

インライン要素の中にブロック要素が入るケースは Web 全体に存在しますが、このレイアウトを扱うコードは20年以上ほとんど手が入っておらず、保守が難しくなっていました。(03:54) チームは新しいアーキテクチャで一から書き直し、長年残っていたレイアウト問題をまとめて修正しました。開発者にとって最も直接的な変化は、以前なら hack が必要だった一部の組版ケースが、今は自然に動くことです。

SVG 2 標準化の前進

SVG 仕様は長い間メンテナンスが不足し、同じ属性でもブラウザごとに解釈が異なっていました。(04:48) WebKit エンジニアは SVG ワーキンググループの復活と運営に直接関わり、SVG 2 仕様の明確化を進めました。たとえば、放射グラデーションの fx と fy 属性のデフォルト値は、以前はブラウザごとに解釈が異なっていましたが、現在は仕様で明示され、Safari 27 もそれに合わせて更新されています。これまでに SVG 関連の改善は75件を超えています。

詳細

CSS Grid Lanes：純粋な CSS による Masonry レイアウト

以前、Pinterest 風の Masonry レイアウトを作るには、JavaScript で各列の高さを計算するか、サードパーティライブラリに頼る必要がありました。(09:06) CSS Grid Lanes により、これは数行の CSS で実現できます。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 16px;
}

重要な点：

• grid-template-rows: masonry で Masonry モードを有効にし、要素を列ごとに自動配置します
• 横方向と縦方向の両方に対応します
• flow-tolerance で要素が流れるときの許容値を微調整し、キーボードの Tab ナビゲーション体験を改善できます
• Safari 26.4 では実装済みですが、他のブラウザはまだ未対応です

WebKit チームはインタラクティブなデモサイト gridlanes.webkit.org を作っており、パラメータをオンラインで調整しながら効果をリアルタイムで確認できます。

Customizable Select：ネイティブドロップダウンをようやくカスタマイズできる

<select> 要素のカスタマイズ性の低さは、フロントエンドコミュニティにとって長年の難題でした。(10:06) 見栄えのよい UI を作るために、開発者はネイティブコントロールを捨て、div で模倣することがよくありました。その代償として、アクセシビリティ対応とモバイル端末のネイティブ体験を失っていました。

Safari 27 は appearance: base-select を導入し、ネイティブコントロールの動作を保ったまま視覚的なカスタマイズを開放します。

select {
  appearance: base-select;
}

select::picker {
  appearance: base-select;
}

重要な点：

• appearance: base-select により、<select> はフォント、文字色、背景色など、より多くの CSS プロパティを継承できます
• ::picker 疑似要素でドロップダウンメニューのパネルスタイルを制御します
• ::checkmark と ::picker-icon は、それぞれ選択マークと展開アイコンを制御します
• <option> 内に副タイトルや画像など、追加の HTML を入れられます
• ドロップダウンメニュー内部は Grid や Flexbox で自由にレイアウトできます

<select>
  <option>
    <img src="icon-red.png" alt="">
    <span>赤</span>
    <span class="sub">#FF0000</span>
  </option>
</select>

この方式の中核的な trade-off は、ネイティブコントロールのインタラクションロジックとアクセシビリティツリーを保ち、視覚層だけをカスタマイズ可能にすることです。キーボードナビゲーションやスクリーンリーダー対応を自分で処理する必要はなく、モバイルでも引き続きネイティブ Picker を起動できます。

<model> 要素：3D モデルが一級市民になる

昨年、<model> 要素は visionOS とともに初登場しました。今年の Safari 27 は、それを iOS、iPadOS、macOS にも広げます。(11:24) <img>、<video>、<audio> と同じように、メディアファイルを扱うネイティブ HTML 要素です。

<model src="product.usdz" alt="3D 製品モデル">
  <img src="product.jpg" alt="製品画像">
</model>

重要な点：

• <source> タグで複数形式の代替候補を提供できます
• environmentmap 属性でカスタム環境光を指定できます
• stagemode 属性でデフォルトのインタラクション動作を設定します
• JavaScript でモデルを回転、拡大縮小など操作できます
• iOS と iPadOS では、<model> を <a rel="ar"> で包むことで、ユーザーがモデルを現実空間へ投影できます

Immersive API：Web サイトが visionOS の没入空間へ直接入る

visionOS 27 は <model> の能力をさらに拡張し、没入型 Web サイト環境をサポートします。(12:50) ユーザーがあなたのサイトにアクセスし、ボタンをクリックするだけで、あなたが提供する 3D 環境へ入れます。

const model = document.getElementById('theater-model');

// Fullscreen API に似た設計
await model.requestImmersive();

重要な点：

• API 設計は Fullscreen API と一致しており、学習コストが低いです
• ユーザー操作によるトリガーが必須です
• 適した用途：ゲームプレビュー、バーチャル内見、劇場座席プレビュー、商品展示
• visionOS 27 の Safari でのみ有効です

Safari Web Extension Packager：クロスプラットフォームなパッケージング

以前、Safari 拡張機能を作るには Mac 上の Xcode でパッケージングする必要がありました。(13:41) 今は Safari Web Extension Packager により、どの OS、どのブラウザでもパッケージングでき、App Store Connect 経由で Safari ユーザーに配布できます。

# Xcode も Mac も不要
# 任意のプラットフォームで packager ツールを使って拡張機能をパッケージ化
# App Store Connect にアップロードするだけ

重要な点：

• 拡張機能自体は標準の HTML/CSS/JavaScript のままで、1つのコードベースをブラウザ横断で使えます
• パッケージングと配布フローは Apple エコシステムのツールチェーンに依存しなくなります
• Safari 固有 API のデバッグには、引き続き Mac と Safari Technology Preview が必要です

重要な示唆

1. JS Masonry を CSS Grid Lanes に置き換える

何をするか： 既存プロジェクトの Masonry レイアウトを JavaScript 計算から純粋な CSS へ移行します。

なぜ価値があるか： 実行時の計算を減らし、レイアウトをブラウザエンジンに任せられるため、性能が上がり、コードも簡潔になります。flow-tolerance はキーボードナビゲーション体験も改善できます。

どう始めるか： Safari 26.4+ を対象にできる場面では、display: grid に grid-template-rows: masonry を加え、@supports でフォールバックを用意します。

2. appearance: base-select でカスタムドロップダウンを置き換える

何をするか： プロジェクト内で div によって模倣していたドロップダウンセレクタを、ネイティブの <select> に戻します。

なぜ価値があるか： ネイティブのアクセシビリティ対応、モバイルのネイティブ Picker、少ない JavaScript コードを得られます。視覚的なカスタマイズ能力は、多くのデザイン要件を十分に満たせるようになっています。

どう始めるか： <select> と ::picker に appearance: base-select を追加し、::checkmark と ::picker-icon で細部を調整します。

3. EC サイトに 3D 商品プレビューを埋め込む

何をするか： 商品詳細ページに <model> タグを追加し、3D モデルを表示します。

なぜ価値があるか： ユーザーは Web 上で直接商品を回転させて確認でき、iOS/iPadOS ではワンタップで現実空間に投影できます。Three.js のような重いライブラリを導入する必要はありません。

どう始めるか： USDZ 形式の 3D モデルを用意し、<model src="product.usdz"> で埋め込み、2D 画像をフォールバックとして提供します。

4. visionOS ユーザー向けに没入型 Web 体験を構築する

何をするか： 3D 表示をサポートするサイトに Immersive API を追加し、visionOS ユーザーが完全没入環境へ入れるようにします。

なぜ価値があるか： これは現在、Web から 3D 没入へつなぐ最も軽量な入口です。API 設計はシンプルで、WebXR の複雑な設定は不要です。

どう始めるか： <model> 要素にクリックイベントをバインドし、requestImmersive() を呼び出します。機能検出とフォールバックも用意します。

5. ブラウザ拡張を Safari へ持ち込む

何をするか： すでに Chrome/Firefox 拡張があるなら、ほぼ追加コストなしで Safari 対応を増やせます。

なぜ価値があるか： Safari のユーザー基盤は大きい一方、以前は Xcode の壁がありました。今はパッケージングフローが完全にクロスプラットフォームになりました。

どう始めるか： 既存拡張を Safari Web Extension Packager でパッケージングし、App Store Connect から提出します。

関連セッション

• HTML Select Element を再発見する — appearance: base-select の完全な使い方とベストプラクティスを詳しく解説
• HTML Model Element を始める — 3D モデルの制作、最適化、JavaScript 操作
• visionOS で没入型ウェブサイト環境を探る — Immersive API の完全な実装ガイド
• Safari 向け Web Extensions を作成する — Safari 拡張機能をゼロから構築し、App Store Connect で配布する
• CSS Grid Lanes を学ぶ — CSS Grid Lanes の完全チュートリアルと高度な使い方