Firefoxは9月29日に157、10月13日に158を公開しました。MDNの開発者向けリリースノートを読むと、派手さはないものの、サイト制作の現場で効いてきそうな変更がいくつか並んでいます。ここでは、ふだんのサイト制作や運用に関わりそうなものを順に拾ってみます。

その1 JPEG XL画像が既定で表示されるようになった

Firefox 158で、JPEG XL形式(image/jxl)の画像が既定で表示されるようになりました。JPEG XLは使用料のかからない画像形式で、非可逆と可逆の両方の圧縮、透過、アニメーション、HDRに対応しています。既存のJPEGを画質を落とさずに変換し直せる点も特徴とされています。

あわせて、画像を取りにいくときの既定のAcceptヘッダーにimage/jxlが加わり、AVIFの次、WebPの前という並びになりました。サーバー側でAcceptヘッダーを見て配信する形式を切り替えている場合は、この並びの変化が判定に影響しないか一度確かめておくと安心です。

その2 単位の違う値どうしをcalc()で割れる

158では、CSSの型付き算術(typed arithmetic)に対応しました。calc()などの中で、同じ種類の値であれば単位が違っても割り算ができ、その結果は単位のない数になります。この数をほかの種類の値に掛け直すことで、たとえば画面幅と要素の幅の比率から文字の大きさや余白を決める、といった関係づけをCSSだけで書けるようになります。

これまでJavaScriptで寸法を測って計算していた処理の一部が、CSS側に移せる可能性があります。ほかのブラウザの対応状況を見ながら、段階的に取り入れていく類いの機能です。

その3 スクロールの受け渡しだけを許すchain

157では、overscroll-behaviorとその個別プロパティにchainという値が加わりました。内側のスクロール領域の端まで来たときに外側へスクロールを引き継ぐ一方で、ブラウザ標準の跳ね返るような動きは起こさない、という指定です。

モーダルやドロワーメニューの中にスクロール領域があるページでは、端での挙動が気になる場面が少なくありません。既存のautoやcontainと比べて、中間の選択肢が増えたと考えるとわかりやすいと思います。

その4 アットルールの対応を@supportsで確かめる

同じく157で、@supportsの中でat-rule()関数が使えるようになりました。@supports at-rule(@scope) のように書くと、そのアットルールにブラウザが対応しているかを条件にできます。@importのsupports()の中でも使えます。

@scopeのように新しいアットルールを取り入れるとき、対応していないブラウザ向けの書き方を切り分ける手段がこれまで限られていました。条件分岐が素直に書けるようになるので、新しい指定を試すときの心理的な負担が少し下がりそうです。

その5 通知をクリックしたときの移動先を指定できる

158では、Notification()やServiceWorkerRegistration.showNotification()にnavigateという指定が加わりました。通知をクリックしたときに開くURLをあらかじめ渡しておけるので、ページを開くだけのためにクリック時の処理を書く必要がなくなります。157では試験的な扱いでしたが、158で正式に使えるようになっています。

その6 安全でない差し込み方でもjavascript:のURLを外せる

HTMLを安全に差し込むためのHTML Sanitizer APIにも手が入りました。158では、setHTMLUnsafe()のような安全確認を緩めた方法で差し込む場合でも、既定の設定ではhref=”javascript:…”のような属性が取り除かれるようになりました。setHTML()のような安全な方法では、これまでどおり常に取り除かれます。

試験的に入った機能にも目を向けておく

既定では無効ですが、158にはCSSのrandom()関数、角の形を変えるcorner-shape、必要になるまでモジュールの実行を遅らせるimport deferなども試験的に入っています。Speculation Rules APIでは、リンクに少しのあいだカーソルを重ねると先読みを始める段階の指定も試せるようになりました。

どれもすぐ実案件で使うものではありませんが、主要ブラウザの足並みがそろってきた機能から順に、中小企業のサイトでも使える場面が増えていきます。リリースノートを数か月おきに眺めておくだけでも、次の改修で何が使えそうかの見当がつけやすくなります。