DESIGN / CODE / INFRA / AI

ニュース

Firefox 158が公開:JPEG XL・PDF・CSSの更新を制作目線でチェック

10月13日公開のFirefox 158を公式資料から整理。JPEG XL対応、PDF出力の改善、CSSの型付き計算など、Web制作で確認したいポイントをまとめたよ。

Firefox 158が公開:JPEG XL・PDF・CSSの更新を制作目線でチェック

Firefox 158.0が2026年10月13日に公開されたよ。今回の更新は、画像形式、PDF出力、CSSの計算など、サイトを作る側にも関係する内容がある。新機能を追いかけるときは、表示の確認項目に置き換えてみよう。

制作で気になる3つの更新

Mozillaのリリースノートでは、JPEG XL画像への対応、ページ保存やLinux・macOSでの印刷におけるPDFのアクセシビリティ改善、CSSの型付き計算への対応などを案内している。

フォーム入力を助けるSmart Windowの機能も紹介されているけれど、こちらは段階的な展開だよ。ブラウザを更新したことと、全員が同じ新機能を使えることは分けて見ておこう。

JPEG XL:画像の配信をどう確かめる?

開発者向けの変更一覧には、画像リクエストのAcceptヘッダーへimage/jxlが追加されたことも載っている。画像形式の対応が増えると、CDNや画像最適化サービスから受け取るファイルを見直すきっかけになるね。

制作側で試したいのは、同じページを開いて「どの形式が返るか」「見た目が崩れないか」をセットで記録すること。特定ブラウザの対応だけを理由に、ほかの利用者向けの形式を消してしまわないようにしよう。

画像配信・CSS・PDF出力を分けて確認するチェック図

画像の確認メモ

  • 通常表示と拡大表示で、細い線や文字の輪郭を比べる。
  • 透過画像なら、明るい背景と暗い背景の両方に置く。
  • 開発者ツールで、受け取ったContent-Typeとファイルサイズを残す。
  • 配信設定を変えたら、キャッシュの有無も分けて確認する。

画像のwidth・heightと読み込み、srcsetとsizesも合わせておくと、形式と表示サイズを別々に整理しやすいよ。

CSSの型付き計算:まずは対応状況を確認

MDNは、calc()などで同じデータ型の値を割り算でき、その結果を別の値との関係づけに使えるようになったと説明している。単位のある値を、ただの数値として好きに扱える、という話ではないよ。式に入る型と、計算後に必要な型を確認しよう。

制作の進め方としては、検証用の小さなページを一つ作り、対応ブラウザ、非対応ブラウザ、拡大表示の3条件を比べると追いやすい。文字サイズの設計は、clamp()の基本も参考にしてね。

PDF出力は、画面とは別に確認しよう

今回のPDF改善は、保存や印刷を使うサイトにも気になる更新。確認用のページに、見出し、リンク、日本語、表、画像を一つずつ含めてPDFへ出力してみよう。

見た目では、改ページで表が切れないか、リンクや注記が欠けないかを確認する。読み上げやテキストの選択順も確認できると、画面のスクリーンショットだけでは気づきにくい部分を見つけやすいよ。

更新後に残しておく3点

確認メモには「ブラウザとOSの版」「開いたURL」「操作と結果」を残そう。新機能が使えたかだけでなく、いつもの問い合わせフォームや画像一覧、印刷ページが引き続き使えるかも見ておくと、日々の保守につながるね。

参考・出典

みんなのコメント 0

感想や、試してみたことを聞かせてね。コメント・返信は承認後に公開されます。

最初のコメントをどうぞ。