Safari 27.2が公開：selectの表示改善とGrid Lanesの名前変更を確認

WebKitは2026年10月26日、Safari 27.2の変更点を公開した。選択欄の見た目を調整するCustomizable Selectの改善、Grid Lanesのプロパティ名の変更、アクセシビリティやメディアなど20件の不具合修正が含まれている。

新しいCSSを使っているサイトでは、追加機能だけでなく、実装と標準の名前が揃ったかを確かめたい更新だよ。

選んだ項目の表示を調整しやすく

Customizable Selectは、HTMLのselectを使った選択欄を、従来より柔軟に整える仕組み。Safariでは27.0から導入されていて、27.2が最初の提供ではない。

今回加わった::field-contentは、画面上に表示される選択済み項目の文字を調整する疑似要素。WebKitは、selectedcontent要素を明示しない構成でも表示を調整できると説明している。

あわせて、appearance:base-selectの標準スタイル、アイコンの配置、大きな選択リストが画面外へはみ出す場合の位置調整などが改善された。自前で余白を補っていたサイトは、ブラウザ更新後に二重の調整になっていないか見たいね。

作例は「今使っているブラウザ」の対応を表示

ページ内の作例では、同じ選択肢を持つ通常のselectと、対応時だけbase-selectを使うselectを並べた。選択を変えると、現在の値を文字でも表示するよ。

1. 二つの選択欄で別の項目を選び、値が変わることを確かめる。
2. 「対応時に拡張表示」を切り替え、利用中のブラウザで見た目が変わるかを見る。
3. 対応表示でbase-selectと::field-contentを個別に確認する。
4. 「最初から試す」で最初の選択へ戻す。

未対応なら通常の選択欄を使う。対応判定は機能を構文として受け付けるかの確認で、見た目や読み上げの正しさを保証するものではない。Chromiumで作例の選択・判定・リセットを確認したが、Safari実機で今回の修正を検証した記録ではないよ。

Grid Lanesはfit-toleranceへ

Grid Lanesは、高さの違うカードなどを配置する仕組み。新しいfit-toleranceは、列などの終端がどの程度近ければ、配置先を選ぶときに同じ高さとみなすかを調整する。

WebKitによると、古い名前は当面、非推奨の別名として動く。今すぐ必ず表示が壊れる変更とは説明されていないけれど、該当するCSSや共通部品を検索し、Web Inspectorの指摘も見ながら移行を確認しよう。ほかのブラウザの対応は別途確認が必要だよ。

更新後に見たい、操作と読み上げ

修正には、aria-labelledby・aria-describedbyで参照された要素の内容が名前や説明から抜ける問題や、aria-live領域の再描画でVoiceOverが既読の文字を繰り返す問題なども含まれる。

編集部としては、選択欄のキーボード操作、長い項目名、ズーム時の表示、フォームの名前と読み上げを、実際の対応端末で確認することを勧める。ブラウザの更新で独自の補正CSSが不要になっても、確認せずに一括削除しないようにしよう。

公式案内では、Safari 27.2は対応するiOS・iPadOS・visionOS・macOSで提供される。端末ごとのOSとソフトウェアアップデートを確認しよう。基礎の選択欄はselectとdatalist、操作中の見え方はフォーカスと選択中も参考になるよ。