10月26日、AppleのWebKitチームがSafari 27.2の新機能をまとめた記事を公開しました。今回は大きな新機能の追加というより、すでに入っている機能の仕上げが中心です。とはいえ、セレクトボックス(プルダウン)の見た目を整える仕組みと、石積み風のレイアウトを作るGrid Lanesのプロパティ名に変更が入っており、実際にコードを書く側には見逃せない内容になっています。
あわせて、アクセシビリティやメディア、CSSなどにまたがる20件の不具合修正も含まれています。順番に見ていきます。
セレクトボックスの表示部分をCSSだけで整えられる
セレクトボックスを自由に装飾できる「カスタマイズ可能なselect」は、Safari 27.0で入った機能です。その後も標準化の議論で細部が詰められていて、各ブラウザの実装もそれに合わせて更新されているとのことです。
これまで、選んだ項目をボタン部分にどう表示するかを細かく指定するには、<selectedcontent>という要素をボタンの中に置く書き方が用意されていました。今回のSafari 27.2では、新しい疑似要素::field-contentが加わり、この要素を書かなくても、ページ上に表示される選択中の文字をCSSから装飾できるようになりました。つまり、昔ながらの<select>と<option>だけのHTMLのままでも、表示部分の見た目に手を入れられるということです。
既存サイトのフォームは、CMSやフォーム系のプラグインが出力したHTMLを触りにくいことが多いものです。HTMLを書き換えずにCSSの側だけで調整できる余地が増えるのは、制作の現場ではかなりありがたい変化だと感じます。
既定の見た目も細かく直された
appearance: base-selectを指定したときの既定のスタイルにも手が入っています。ボタン内の文字が上下中央により安定してそろうようになり、選択中の文字は<select>に指定したtext-overflowを引き継ぐようになりました。長い項目名を省略記号で切りたいときに、指定が素直に効くようになるわけです。
開閉の印である::picker-iconも描き方が変わり、位置合わせのために負のマージンを使う必要がなくなったと説明されています。ボタン側の余白の取り方も変わり、<selectedcontent>を使わない書き方でも印が常に見えるように整えられました。
大きな選択肢一覧が画面からはみ出さなくなった
項目の多いセレクトボックスでは、開いたときの一覧が画面の外に一部はみ出すことがありました。Safari 27.2では、配置にsafeの考え方を当てはめることで、一覧が画面内に収まるようになっています。
これはセレクトボックスだけの修正ではなく、CSSの配置の仕様そのものの変更から来ています。絶対配置や固定配置の要素では、safeを指定すると元の包含ブロックの中に収まるように扱われるようになりました。また、safeやunsafeのキーワードをnormalの配置と組み合わせて書けるようになったとのことです。ポップアップやツールチップのように、はみ出しが起きやすい部品を作るときに覚えておきたい点です。
関連して、モーダルの<dialog>の中にアンカー配置を使った要素を置いたとき、ページをスクロールすると画面外に配置されて見えなくなる不具合も直っています。
Grid Lanesのflow-toleranceはfit-toleranceへ
Grid Lanesは、高さのそろわないカードを隙間なく詰めて並べる、いわゆる石積み風のレイアウトをCSSで作るための仕組みで、Safariでは今年3月の26.4から使えるようになっていました。その後、CSSの標準化を担う作業部会で、flow-toleranceというプロパティ名を、役割がより伝わるfit-toleranceに改めることが決まりました。Safari 27.2はこの新しい名前に対応しています。
古い名前もしばらくは非推奨の別名として動きますが、WebKitチームは早めの書き換えをすすめています。Safariの開発者ツール(Web Inspector)が、書き換えが必要な箇所に印を付けて知らせてくれるそうです。試作や検証でGrid Lanesを使っている場合は、今のうちに検索して置き換えておくと後で慌てずに済みます。
fit-toleranceは何を決めるのか
このプロパティは、次の項目をどの列に置くかを選ぶときの「こだわり具合」を決めるものです。許容幅がなければ、ブラウザは中身がいちばん上で終わっている列を厳密に探してそこに置きます。fit-toleranceを指定すると、その幅の中に収まる差の列は同じ高さとみなされ、先頭の列が選ばれます。既定値は1emです。
記事では、許容幅を大きくすると、続く項目がとなりの列に並びやすくなり、わずかな高さの差を追ってページの左右を行ったり来たりしなくなると説明しています。キーボードで項目を順に移動しながら画面を見ている利用者にとって、フォーカスの動きが追いやすくなるという利点があり、多くの場合はこの値をかなり大きめにするのがよいとのことです。どこまで上げるかは、中身の大きさやばらつき次第です。
見た目の整い方だけでなく、操作の順番まで考えて値を決めるという視点は、事例紹介や商品一覧をカード型で並べることの多い中小企業のサイトでも参考になります。Grid Lanesを本番で使うかどうかは対応ブラウザの広がりを見ながらの判断になりますが、名前が固まりつつある今は、手元で触って感覚をつかんでおくにはよい時期だと思います。
