9月11日、Appleが「WebKit Features in Safari 26.0」と題した記事を公開した。この記事では、Safari 26.0で追加・改善されたWebKitの新機能（CSS/HTML/JS/メディア/セキュリティ/開発者ツール/SwiftUI APIなど）について詳しく紹介されている。以下に、その内容を紹介する。

概要

Safari 26.0は75の新機能、3つの非推奨、171件の改善を含む大型リリースである。CSSのアンカー配置やスクロール連動アニメーション、<model>要素、Digital Credentials API、WebGPU、SwiftUI向けの新WebKit APIなど、プラットフォーム横断での強化が目立つ。

CSS

Anchor Positioning（アンカー配置）

相対する要素（anchor）に対して、ポップアップ等（anchor-positioned）を簡潔に配置できる新仕組みだ。position-areaで定型位置に置ける。

.thing-that-gets-anchored-to {
  anchor-name: --profile-button;
}
.item-that-pops-up {
  position: absolute;
  position-anchor: --profile-button;
  position-area: top right;
}

より細かく合わせる場合は anchor() 関数を使う。

.thing-that-gets-anchored-to { anchor-name: --profile-button; }
.item-that-pops-up {
  position: absolute;
  position-anchor: --profile-button;
  bottom: anchor(top);
  left: anchor(right);
}

衝突時の代替位置は position-try で指示できる。

.item-that-pops-up {
  position: absolute;
  position-anchor: --profile-button;
  position-area: top right;
  position-try: bottom right;
}

Scroll-driven animations（スクロール連動アニメーション）

要素がビューポートに入る割合や移動量をタイムラインにできる。

.item {
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: 0% 50%;
  &:nth-child(3n + 1) { animation-name: in-from-left; }
  &:nth-child(3n + 2) { animation-name: in-from-middle; }
  &:nth-child(3n + 3) { animation-name: in-from-right; }
}

`text-wrap: pretty`

段落全体の行末のデコボコやハイフネーション、末尾の短行を見栄えよく調整する。

`contrast-color()`

背景色に応じて白/黒のどちらがコントラストが高いかを自動選択する。

button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
}

`progress()` 関数

任意の開始値・終了値に対する進捗割合（単位なしの数値）を返す。

/* コンテナ幅の進捗を算出 */
--percent-of-box-width: progress(100cqw, 300px, 600px);
/* 内部式: (value - start) / (end - start) */

その他のCSS

margin-trim: block inline
overflow-block / overflow-inline
絶対配置における align-self / justify-self
::marker への animation-range 系プロパティ
@scope 直下の宣言許可など

iOS/iPadOS：すべてのサイトをWebアプリとして追加可能

ホーム画面に追加したサイトはデフォルトでWebアプリとして開く。ユーザーは追加時に「Open as Web App」をオフにすればブックマークとして開く挙動にできる。

HDR画像対応と `dynamic-range-limit`

HDR画像（動画は既存対応）をWebに埋め込める。CSSの dynamic-range-limit（no-limit / standard）で混在表示時の見え方を制御できる。

visionOS の没入型メディアと `<model>` 要素

`<model>` 基本

USDZモデルをimgやvideo感覚で埋め込み、インタラクション可能だ。

<model src="teapot.usdz">
  <img src="fallback/teapot.jpg" alt="a teapot">
</model>

ライティング（環境マップ）

<model src="teapot.usdz" environmentmap="night.hdr">
  <img src="fallback/teapot-night.jpg" alt="a teapot at night">
</model>

アニメーション

<model autoplay loop src="teapot-animated.usdz">
  <img src="fallback/teapot-animated.jpg" alt="a teapot with a stowaway!">
</model>

const model = document.querySelector('model');
model.playbackRate = 0.5;
model.currentTime = 6;
model.play();

回転・操作

<model stagemode="orbit" src="teapot.usdz">
  <img src="fallback/teapot-orbit.jpg" alt="a teapot for examining">
</model>

プログラマブルな変換:

<model id="rotating-teapot" src="teapot.usdz">
  <img src="fallback/teapot-rotater.jpg" alt="a teapot for turning">
</model>

const rotatingTeapot = document.getElementById("rotating-teapot");
await rotatingTeapot.ready;
function rotate() {
  rotatingTeapot.entityTransform = new DOMMatrix().rotate(0, performance.now()/10, 0);
  requestAnimationFrame(rotate);
}
rotate();

Digital Credentials API（高信頼の本人確認）

Apple WalletやIDプロバイダアプリから運転免許等のmDoc（ISO/IEC 18013-7 Annex C）を安全に提示要求できる。

<button onclick="verifyIdentity">Verify Identity</button>

async function verifyIdentity() {
  try {
    const response = await fetch("drivers/license/data");
    const data = await response.json();
    const request = { protocol: "org-iso-mdoc", data };
    const credential = await navigator.credentials.get({
      mediation: "required",
      digital: { requests: [request] },
    });
    const r = await fetch("/decrypt", {
      method: "POST",
      body: JSON.stringify(credential.data),
      headers: { 'Content-Type': 'application/json' }
    });
    presentDetails(await r.json());
  } catch (err) { /* error handling */ }
}

プロトコル可否を事前確認できる。

if (DigitalCredential.userAgentAllowsProtocol("org-iso-mdoc")) {
  // mDocを使用
} else {
  // フォールバック
}

※現時点でWKWebViewは未対応（追跡バグあり）。

Web API 強化

Trusted Types API（クライアントXSS抑止）
URL Pattern Standard

const pattern = new URLPattern({ pathname: "/blog/:title" });
pattern.test("https://example.org/blog/wwdc25"); // true

WebAuthn Signal API（資格情報更新の通知）
File System WritableStream API（直接書き込み）
WebCryptoのEdwards曲線JWK alg サポート
IntersectionObserverの scrollMargin
<dialog> の toggle イベント、Scoped Custom Element Registry
HTMLFrameElement.getSVGDocument() を削除など

JavaScript

RegExp Pattern Modifiers
Intl.PluralRules の notation オプション
Intl.Locale.prototype.variants

アイコンにSVG対応

SVGをファビコン等に使用可能。ベクター拡大や自動ラスタ化で多サイズに対応。Data URL画像も可。

WebGPU

WebGLを置き換える次世代APIとしてWebGPUを正式サポート。WGSLによる安全なシェーダ実行、Compute Shader対応、Metalへの良好なマッピング。主要フレームワーク（Babylon.js/Three.js/Unity等）で動作。

Media / WebCodecs / MSE

MediaRecorderでALAC/PCM

const video = await navigator.mediaDevices.getUserMedia({ audio: true });
const recorder = new MediaRecorder(video, { mimeType: "audio/mp4; codecs=alac" });

WebCodecsのAudioEncoder/AudioDecoder
MSEの detachable MediaSource、DecompressionSession優先、in-band tracks

WebRTC（主な追加）

RTCEncodedVideoStreamのCSRC情報
iOS/iPadOSのSpeaker Selection API
RTCEncodedAudio/VideoFrameのシリアライズとコンストラクタ
ImageCapture.grabFrame
RTcRtpScriptTransformer.generateKeyFrame(rid)
※WWDC後の追加としてデフォルトスピーカー露出、fec/rtxエンコーディングパラメータ除去。

編集体験

スクロールコンテナ内のネイティブ選択UI描画を改善。

HTTP

HTTP/2/HTTP/3 上でのWebSocketをサポート。

SVG

pointer-events="bounding-box" をグループコンテナに追加。

互換性・UA 文字列の更新

サイト問題の報告UI

問題発生時に「Report a Website issue…」から簡易アンケートで報告できる。

UA文字列

iOS/iPadOS/visionOSでOSバージョン文字列を固定し、互換性問題を低減。

Mozilla/5.0 (iPhone; CPU iPhone OS 18_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Mobile/15E148 Safari/604.1

macOSも同様方針。

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15

Web Inspector（開発者ツール）

Service Workerの自動検査/自動一時停止

DevelopメニューのApps and Devicesから、SW実行時に自動でWeb Inspectorを開き、必要なら即停止させられる。

TimelinesでのWorker計測

メモリ/パフォーマンスをWorker単位で属性付け。プロファイルやイベント、ヒープスナップショットを記録・エクスポート。

Elements の Slotted/Assigned バッジ

非同期デバッグ改善

await を同期的に「1行進む」感覚でステップ可能。
その他、@starting-style/@scope の可視化、ナビゲーション時のURIと時刻ログ、Workerでの console.profile、Workerターゲットのエクスポート/インポート等。

WebKit in SwiftUI（新API）

新たな WebView/WebPage 型でSwiftUIアプリにWebを統合しやすくなった。

struct ContentView: View {
    var body: some View {
        WebView(
            url: URL(string: "https://www.webkit.org")
        )
    }
}

WebPage は観測可能オブジェクトで、ナビゲーション制御やカスタムスキーム（URLSchemeHandler）、JSダイアログ方針（WebPage.DialogPresenting）等を提供。

struct ArticleView: View {
    @Environment(ArticleViewModel.self) private var model
    var body: some View {
        WebView(model.page)
            .navigationTitle(model.page.title)
    }
}

WebKit API（抜粋）

スクリーンタイム対応
WKWebViewのLocal/Session Storage復元API
透明WebView背後への backdrop-filter 適用
obscuredContentInsets による可視領域レイアウト調整
WKProcessPool / WKSelectionGranularity を非推奨

Web Extensions

App Store ConnectのWebベースPackagerで拡張をTestFlight/App Store配布用にパッケージ化可能。Selenium経由でSafariDriverに拡張をロード/アンロードするカスタムコマンドも。

driver = webdriver.Safari()
driver.command_executor._commands["load_web_extension"] = (
    "POST", "/session/$sessionId/webextension"
)
driver.command_executor._commands["unload_web_extension"] = (
    "DELETE", "/session/$sessionId/webextension/$extension_id"
)

新規：dom.openOrClosedShadowRoot() への対応。

Content Blockers（3機能）

unless-frame-url
request-method トリガー
isContentRuleListRedirect

WebAssembly

大規模モジュールの起動時間とメモリ効率を改善するin-place interpreterを導入。ウォームアップ後のスループットは維持。

ネットワーク最適化

<link rel=dns-prefetch> をiOS/iPadOS/visionOSでもサポート（macOSでは既存）。プライバシー改善版。

プライバシー

既知のフィンガープリンティングスクリプトに対し、デバイス特性APIのアクセスや長期ストレージ設定、リファラ等の読み取りを制限。

ロックダウンモード

Safe Font Parserで検証済みのWebフォントを許可する方針に変更。ほぼすべてのコンテンツが指定フォントで表示可能。

デバイス管理

管理ブックマークフォルダ
管理された新規タブ/新規ウィンドウページ設定

セキュリティ

Integrity-Policy ヘッダのscript宛先強制
Google Safe Browsing v5への新設定

バグ修正（抜粋）

アクセシビリティ、CSSの細部挙動、ブラウザの文字列表示や描画、content-visibility、Grid/Containment、getBoundingClientRect() など多岐にわたり修正が入っている。

詳細はPay-per-output? AI firms blindsided by beefed up robots.txt instructions.を参照していただきたい。

概要

CSS