ブラウザの月ごとの更新というと、CSSの新機能に目が向きがちです。けれども先月は、画像の形式や通知、表示速度の計測、HTMLの差し込みといった、CSS以外のところにも現場に関わりそうな変更が入っていました。web.devの月次のまとめと、Chrome、Firefoxそれぞれの公式の説明から、制作の仕事に結びつきそうなものを並べてみます。

画像形式のJPEG XLがChromeとFirefoxで既定に

Chrome 155とFirefox 158が、画像形式のJPEG XL(拡張子は.jxl)を既定で表示できるようになりました。Safariは以前から対応しているので、主なブラウザでは表示できる範囲がかなり広がったことになります。一方、web.devの対応表ではEdgeがまだ未対応の扱いです。

Chromeの開発チームの説明によると、JPEG XLはJPEGに比べて30〜50%ほど圧縮の効率がよく、劣化のない圧縮やHDR、今あるJPEGを劣化させずに変換し直す機能も備えています。ただ、AVIFを置き換えるものという位置づけではなく、両方を試して結果のよいほうを選ぶことが勧められています。向いているのは、写真のように細部まで残したい画像や、劣化のない圧縮を使いたい場面とのことです。

Firefox 158では、画像を要求するときのAcceptヘッダーにも image/jxl が加わりました。サーバーや画像配信の仕組みがこのヘッダーを見て形式を出し分けている場合は、対応しているブラウザにだけJPEG XLを返す、という作りにしやすくなります。当面は picture 要素などで従来の形式を控えに置いておくのが無難でしょう。

通知を押したときの行き先をURLで書ける

Firefox 158で、通知を作るときの navigate という指定が使えるようになりました。通知を押したときに開くURLを、そのまま書いておける指定です。Safariにはすでに入っていて、Chromeはまだ対応していません。

これまでは、通知が押されたときのイベントをService Workerの側で受け取り、開くページを自分で指示する必要がありました。MDNの説明では、navigate を指定した通知は、押されるとイベントを起こす代わりにブラウザがそのURLへ移動します。予約の確定や発送の連絡のように、押した先のページが決まっている通知なら、書くコードが少なくて済みます。Chromeが未対応のあいだは、従来のイベントの処理も残しておくことになります。

キャッシュから読まれたかどうかを計測で見分けられる

表示速度を調べるときに使う PerformanceResourceTiming に、deliveryType という値があります。画像やスクリプトなどがどこから届いたかを示すもので、Firefox 158が対応したことで主なブラウザで使えるようになりました。MDNでも、先月から新しく広く使える機能として扱われています。

キャッシュから読まれた場合は cache という値が返るので、実際の訪問者の環境でキャッシュがどのくらい効いているかを集計しやすくなります。Firefoxが最初に対応したのはこの cache の値だけです。また、別のドメインから読み込むファイルは、相手側が計測を許可するヘッダーを返していないと空の値になります。外部のCDNに置いたファイルを調べたいときは、ここで数字が欠けることがあるので覚えておくとよさそうです。

HTMLを差し込むときの安全側の仕組みが整ってきた

利用者が入力した文字列などをページに差し込むとき、危ないタグや属性を取り除いてくれるHTML Sanitizer APIにも手が入りました。Firefox 158では、javascript: で始まるURLを含む属性を取り除くかどうかを設定で決められるようになっています。安全側のメソッドである setHTML() は、もともとこの種の属性を必ず取り除きます。今回の変更で、取り除く範囲を自分で決める setHTMLUnsafe() の側でも、既定の設定のままなら取り除かれるようになりました。

続くFirefox 159では、setHTML() が不要な要素や属性を取り除くタイミングが、DOMを組み立てたあとではなく解析の途中に改められています。MDNは、信頼できないHTMLを差し込む場面では innerHTML の代わりに setHTML() を使うよう勧めています。ただ、このAPI自体はまだ対応していないブラウザがあり、MDNでも広く使える機能には数えられていません。今すぐ切り替えるというより、検索結果の表示やコメント欄のように外から来た文字列を扱う箇所がどこにあるかを、先に洗い出しておく段階だと思います。

どれも派手な見た目の変化はありませんが、画像の配信、通知、計測、入力の扱いと、サイトの裏側の品質に関わるところばかりです。対応状況がそろうのを待つあいだに、画像の出し分けやキャッシュの計測のように、今の環境で試せるところから触れておくとよさそうです。