Safari 27.2でGrid Lanesのプロパティ名がfit-toleranceに変更

この記事の目次

Safari 27.2でGrid Lanesのプロパティ名が変わる──flow-toleranceはfit-toleranceへ
flow-toleranceはfit-toleranceに、旧名は非推奨エイリアス
fit-toleranceは「どの列を選ぶか」の許容幅
カスタマイズ可能なselectに::field-contentが加わる
20件のバグ修正のうち、実務で気になるもの
更新方法と、自分のサイトで確認しておきたいこと
改名に追従しながら使うなら
参考にした公式情報

Safari 27.2でGrid Lanesのプロパティ名が変わる──flow-toleranceはfit-toleranceへ

WebKitチームは2026年10月26日、「WebKit Features for Safari 27.2」を公開しました。Safari 27.2の変更は大きく2つで、1つはappearance: base-selectを使うカスタマイズ可能なselectの調整、もう1つはCSS Grid Lanes（Masonry型レイアウト）のプロパティ名変更です。20件のバグ修正も含まれています。Grid Lanesを実際のコードで使っている人は、flow-toleranceをfit-toleranceへ書き換える必要があります。旧名は当面エイリアスとして動き続けますが、公式は「早めにコードを更新するように」と促しています。

flow-toleranceはfit-toleranceに、旧名は非推奨エイリアス

Grid Lanesは、2026年3月のSafari 26.4で最初に出荷されました。その後、CSS Working Groupが、プロパティの目的をより正確に表すためにflow-toleranceをfit-toleranceへ改名することを決め、Safari 27.2がその新しい名前に追従した形です。

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  /* 旧：flow-tolerance → 新：fit-tolerance */
  fit-tolerance: 1em;
}

WebKitの説明では、旧名は「当面は非推奨のエイリアスとして動く」とされています。つまり、今すぐ表示が壊れる可能性は低いものの、いつまで残るかは示されていません。また、Safari Web Inspectorが、書き換えが必要な箇所を示してくれるとのことです。

fit-toleranceは「どの列を選ぶか」の許容幅

このプロパティは、次のアイテムをどこに置くかを決めるときの「許容幅」です。許容幅が0の場合、ブラウザは内容の終わりが最も上にある列（縦方向のレイアウトなら列、横方向なら行）をぴったり選びます。ところが、複数の列がほぼ同じ高さで終わっているとき、ミリ単位の差で配置を決めるのは、利用者にとって都合がよいとは限りません。

fit-toleranceを指定すると、その差以内の列は「同点」として扱われ、ブラウザは最初の候補を選びます。既定値はfit-tolerance: 1emです。

WebKitは、許容幅を大きめにすることの利点として、連続するアイテムが隣り合う列に入りやすくなる点を挙げています。キーボードでTabキーを押して進むとき、フォーカスが画面のあちこちに飛ばずに済み、特に目で画面を追うキーボード利用者にとって使いやすくなる、という説明です。そのため公式は、多くの場合は既定値よりかなり大きな値にすることを勧めています。どのくらいが適切かは、コンテンツの大きさとばらつき次第で、WebKitの「Field Guide to Grid Lanes」で挙動を試せると案内されています。

カスタマイズ可能なselectに::field-contentが加わる

カスタマイズ可能なselectは、Safari 27.0で最初に入りました。ボタンの部分に選択中の内容を表示するための<selectedcontent>要素が使えるようになったのが特徴です。ただし、これは必須ではなく、従来どおり<option>だけを並べたselectも書けます。

27.2で加わった::field-content疑似要素は、<selectedcontent>を使わなくても、画面に表示されている選択済みオプションのテキストにスタイルを当てられるものです。既存のマークアップを大きく変えずに見た目を整えたい場面で使えます。

あわせて、appearance: base-selectの既定のスタイルも見直されています。

ボタン内の内容が、縦方向により確実に中央へ寄るようになった
選択中のオプションのテキストが、selectからtext-overflowを継承するようになった
::picker-iconの描画が、負のマージンを使わない素直なレイアウトに変わった
ボタンの余白調整がflex: 1になり、<selectedcontent>が無くてもピッカーのアイコンが常に見える

さらに、大きなselectのピッカーが画面の外にはみ出すことがあった問題は、safeアラインメントを適用して画面内に収めるようになりました。これは、CSSの位置揃え全体の変更の一部で、絶対配置や固定配置のボックスでは、safeが元の包含ブロックの内側に収めるという意味になります。safeとunsafeのキーワードを、normalの位置揃えと組み合わせることもできるようになりました。

20件のバグ修正のうち、実務で気になるもの

公式はバグ修正を分野別に列挙しています。日々の開発に影響しそうなものを、投稿の記述に沿って拾います。

Cookie：サイトのホスト名が別の登録可能ドメインへCNAMEされている場合に、トップレベルのナビゲーションの応答で設定されたCookieが7日間に制限される問題を修正しました。CDNや外部サービスにCNAMEで向けているサイトでは、Cookieの有効期間が意図どおりになるかを確認する価値があります。
メディア：AudioContext.decodeAudioData()が正常なAAC/M4Aで失敗する問題、動画のデコーダーが無効になったあと映像が黒いまま音声だけ続く問題、WebCodecsのVideoEncoderがH.264のMain・Highプロファイルで止まる問題など、5件。
Web API：ユーザー操作の有効状態（transient activation）が誤って破棄され、Clipboard APIのようなユーザー操作が必要なAPIが最初の呼び出しで失敗する問題を修正しました。
アクセシビリティ：aria-labelledbyやaria-describedbyの参照先に含まれるリスト・表・ツリー・キャンバスの内容が欠ける問題、aria-live領域を再描画する形のストリーミングでVoiceOverが同じ文を繰り返す問題など、3件。
WebGPU・WebRTC・SVG・その他：executeBundles()での著しいフレームレート低下、システムの音声サービスのリセット後にgetUserMedia()がNotAllowedErrorで失敗し続ける問題、<foreignObject>のxとyの動的変更が反映されない問題などが修正されています。

更新方法と、自分のサイトで確認しておきたいこと

Safari 27.2は、iOS 27.2、iPadOS 27.2、visionOS 27.2、macOS 27.2 Golden Gate、macOS Tahoe、macOS Sequoiaで利用できます。iOS、iPadOS、visionOS、macOS 27.2 Golden Gateでは、OSのアップデートとして「設定」の「一般」にある「ソフトウェアアップデート」から入れます。古いmacOSでSafariだけを更新したい場合は、ソフトウェアアップデートの「詳細」から選べます。

Web制作の現場では、次の3点を確認しておくと安心です。

コードやCSSフレームワークにflow-toleranceが含まれていないか。検索で洗い出し、fit-toleranceに置き換える。
カスタマイズ可能なselectを使っているなら、27.2での見た目の変化（中央揃え、アイコンの表示、はみ出しの防止）を実機で確かめる。
CNAMEで別ドメインへ向けているサイトは、Safariでのログイン状態や同意の保持期間が想定どおりか、27.2で再確認する。

改名に追従しながら使うなら

個人的には、今回の改名は、新しいCSS機能を本番に入れるときのコストを示す好例だと思います。仕様が固まりきる前の機能は、ブラウザに出荷されたあとでも名前が変わることがあります。Grid Lanesを使うなら、プロパティ名を1か所にまとめ、変数やビルド時の置換で切り替えられる形にしておくと、今回のような改名に強くなります。対応ブラウザが限られる機能を使うときは、使えないブラウザでも崩れない代替のレイアウトを用意しておくことも欠かせません。

また、fit-toleranceの既定値の1emを「そのまま使ってよいのか」は、公式が「ほとんどの場合は大きくすべき」と書いている以上、一度見直す価値があります。ただし、適切な値はコンテンツ次第で、公式も具体的な数値を示していません。実際の画面とキーボード操作の両方で、フォーカスの移動順を確かめながら決めるのが現実的でしょう。

参考にした公式情報

2026年11月8日時点の情報です。