今週のブラウザ／Web標準の更新を制作現場の目線で読む——2026年10月第2週

結論から書くと、今週（2026年10月4日〜11日）のブラウザとWeb標準の公式発表は、「次の案件で使う」ものはなく、「見積もりの前提が少し変わるかもしれない」ものが3つでした。Safariのプレビュー版とFirefoxのナイトリー版にCSSの新機能が載り、W3Cでは色とSVGの仕様が一歩進みました。どれも本番サイトで前提にする段階ではありません。

私はこの手のニュースを機能名で追うのをやめて、「Baselineに入っているか」「入っていないなら、落ちても困らない使い方があるか」の2点でだけ読むようにしています。その目線で3つを仕分けします。

Safari Technology Preview 254：サイズのアニメーションまわりがまとめて入った

WebKitの公式ブログが10月8日にSafari Technology Preview 254のリリースノートを出しています。CSSの新機能として、interpolate-sizeプロパティ、calc-size()関数、size系のショートハンド、SVGに値を渡す「CSS linked parameters」などが挙がっています。

現場で影響が大きいのはinterpolate-sizeです。MDNの説明によると、長さの値とautoやfit-contentのような内在サイズの間をトランジションできるようにするプロパティです。アコーディオンの「高さautoへのアニメーション」は、私の経験ではJavaScriptで高さを測って書く小さな面倒の筆頭でした。それがCSSだけで済む方向に、Safariも揃い始めたという読み方になります。

ただしMDNは同じページで、この機能を「限定的な提供」としてBaselineではないと明記しています。正式版のSafariに入る時期も公式発表にはありません。「秋のリリースで使える」と見積もりに書くのはまだ早いです。

Firefox Nightly 160：corner-shapeとrandom()、Fetchのストリーミング送信

MozillaのFirefox Nightly 160.0a1のリリースノートは10月8日付で、corner-shapeプロパティ、CSSのrandom()関数、Fetch APIでのリクエストボディのストリーミング送信が載っています。

corner-shapeは角丸の「丸の形」そのものを変えるプロパティ、random()は値をある範囲でランダムに生成する関数です。どちらもMDNでは「限定的な提供」「実験的」の扱いです。装飾の幅は広がりますが、落ちたときに普通の角丸に戻る使い方に限るのが現実的です。

Fetchのストリーミング送信は、エンジニア視点では大きい変化です。大きなファイルや逐次生成されるデータを、全部メモリに溜めてから送るのではなく、ReadableStreamで小出しに送れます。ただし正式版のバージョンと時期は書かれていません。アップロード機能の設計を今すぐ変える材料ではなく、「将来こうなる」という頭出しとして記録する段階です。

W3C：CSS Color 4とSVG 2が一歩進んだ

W3CのCSSホームページの更新履歴には、10月6日に「Scalable Vector Graphics (SVG) 2」の更新版勧告候補、10月7日に「CSS Color Level 4」の更新版勧告候補草案が掲載されています。

どちらも勧告ではなく、その手前の段階の更新です。実務で何かが変わる発表ではありませんが、CSS Color 4はoklch()やcolor-mix()など、すでに広く使われている色の仕様の土台です。仕様が安定に向かっていること自体が、「色の指定をoklchで統一する」といった設計判断を後押しします。

読み方のまとめ：3段階に仕分ける

今週の発表を、私が案件で使う3段階に置き直すと次のようになります。

段階	今週の該当	現場での扱い
今の案件で使う	なし	—
装飾限定で使う	corner-shape、random()	@supportsで囲い、フォールバックを先に書く
記録だけしておく	interpolate-size、calc-size()、Fetchストリーミング、CSS Color 4／SVG 2	見積もりの前提にしない。半年後にBaselineを再確認する

プレビュー版とナイトリー版と草案は、どれも「できるようになる予定」です。この区別をつけるだけで、クライアントへの説明で言い過ぎることが減ります。

明日から試せる一手

手元のプロジェクトで、JavaScriptで高さを測ってアコーディオンを開閉している箇所を1つ探してください。そこに@supports (interpolate-size: allow-keywords)で囲ったCSS版を足し、対応ブラウザではCSSに任せ、非対応ではJavaScriptのままにする二重構造を作ってみる。動作の差を自分の目で見ておくと、Baselineに入った日に迷わず切り替えられます。