Googleのweb.devが毎月まとめている「ウェブプラットフォームの新機能」の9月版が公開されました。9月はChromeとFirefoxが隔週リリースに移った最初の月で、Chrome 153と154、Firefox 155から157、そしてSafari 27が安定版として出ています。とくにSafari 27の登場で、Chrome、Firefox、Safariの三つがそろって対応した機能、いわゆる「Baseline Newly available」に入ったものが一気に増えました。
派手な新機能というより、これまで回避策で書いていた部分がそのまま書けるようになる、という種類のものが多い印象です。ここでは中小企業のサイト制作で出番がありそうなものを選んで紹介します。
その1 遅延読み込み画像のsizesを自動にできる
loading="lazy" を付けた画像で、sizes 属性に auto を指定できるようになりました。ブラウザが実際に表示される幅を見て、srcset の候補から適切な画像を選んでくれます。Chrome、Firefoxに続いてSafari 27が対応したことで、三つのブラウザがそろいました。
レスポンシブ画像の sizes は、レイアウトを変えるたびに書き直しが必要で、正直なところ正確に保守されていない現場も多いはずです。WordPressのように画像の表示幅がテーマやブロックによって変わる環境では、とくに恩恵がありそうです。
その2 読んでいる途中で画面がずれにくくなる
Safari 27でスクロールアンカリングが有効になり、overflow-anchor プロパティにも対応しました。スクロールアンカリングとは、見えている範囲より上で要素が増えたり減ったりしたときに、スクロール位置を自動で補正して、読んでいる場所が飛ばないようにする仕組みです。
広告枠や後から読み込まれる埋め込み、Cookie同意の帯などで本文がずれる問題は、スマートフォンでよく起きます。Safariが加わったことで、iPhoneの利用者にも同じ補正が効くようになりました。特定の要素を補正の基準から外したいときは overflow-anchor: none を指定します。
その3 ダークモードで画像も切り替えられる
light-dark() 関数は、これまで色の値にしか使えませんでした。今回、背景画像やグラデーションといった画像の値も指定できるようになり、Safari 27の対応で三つのブラウザがそろっています。ロゴや装飾の背景を、明るい表示と暗い表示で出し分けたい場合に、メディアクエリを書き分けずに済みます。
関連して、Firefox 157では alert() や confirm() のダイアログ、日付や色の選択画面、フォームの入力候補の一覧が、ページの明暗の設定に合わせて表示されるようになりました。ダークモード対応のサイトで、ブラウザ標準の部品だけ白く浮いてしまう違和感が少し減りそうです。
その4 色の透明度だけを変えるalpha関数
CSS Color 5の alpha() 関数も、Firefox 155とSafari 27の対応で三つのブラウザがそろいました。元の色をそのままに、透明度だけを変えた色を返す関数です。たとえば、サイトのブランドカラーを変数で持っておき、半透明の重ね色として使いたいときに、別の色の値を用意しなくて済みます。
配色を変数で管理しているテーマなら、色の追加や変更があっても半透明の派生色が自動で追従するので、手直しの手間が減ります。
その5 直前の指定だけを取り消すrevert-rule
CSS全体に使えるキーワードとして revert-rule が加わり、こちらもSafari 27で三つのブラウザがそろいました。いま書いているルールがなかった場合の値に戻す、という働きをします。既存の revert はブラウザ標準などの段階まで戻し、revert-layer は一つ前のカスケードレイヤーまで戻すので、それよりも細かい単位で取り消せるわけです。
他社が作ったテーマや、プラグインが出力するCSSの上から調整をかけるとき、上書きの上書きを重ねるより見通しのよい書き方ができるかもしれません。
使い始める前に確かめておきたいこと
「Baseline Newly available」は、主要ブラウザの最新版がそろって対応したという意味で、古い端末やOSの更新が止まったiPhoneでは動かないことがあります。上で挙げた機能の多くは、対応していないブラウザでは単に無視されるだけなので、見た目が多少変わる程度で済むものから取り入れるのが無難です。sizesの自動指定や overflow-anchor はその代表で、既存のサイトに足しても壊れにくい部類に入ります。
web.devのまとめには、このほかSafari 27でのカスタマイズ可能な <select> への対応や、ベータ版に入ったCSSの新機能なども並んでいます。毎月の一覧を眺めて、手元のサイトで書いている回避策が不要になっていないか確かめる習慣は、地味ですが効き目があります。
