新しいCSSの機能を見つけて試してみたものの、Chromeでしか動かず結局使わなかった。制作の現場では、こうした経験がめずらしくありません。ブラウザごとの対応のずれは、新機能を実案件に入れるかどうかを決めるうえで、いちばん大きな壁になってきました。
そのずれを計画的に埋めていく取り組みとして、主要なブラウザの開発元が共同で進めている「Interop」があります。いま来年分にあたるInterop 2027の対象選びが進んでおり、どの機能が入るかによって、来年の制作で安心して使えるCSSの範囲が変わります。CSSの解説で知られる開発者のJosh Comeau氏が、自分が投票した候補を10件紹介する記事を10月下旬に公開していたので、それを手がかりに、候補の中身と今から使えるかどうかを整理してみます。
ブラウザの足並みをそろえるInteropという仕組み
InteropはGoogle、Apple、Microsoft、Mozillaの各社に、Igalia、Bocoupを加えた体制で進められている年単位の取り組みです。毎年「重点分野」を決め、各ブラウザがその分野の自動テストにどれだけ合格しているかを公開の集計画面で追いかけます。Comeau氏によると、重点分野に入った機能は、1年ほどで主要ブラウザすべての対応がほぼ100%に届くことが多いとされています。
わかりやすい例が、Gridレイアウトを入れ子の要素にも引き継げるサブグリッド(subgrid)です。Firefoxは2019年に実装していましたが、ほかのブラウザでは何年も動きがありませんでした。それがInterop 2023の対象に入ると、その年の終わりには主要ブラウザで広く使える状態になりました。今年のInterop 2026に入ったスクロール連動アニメーションも、すでに全ブラウザで実装済みとされ、要素を別の要素に結びつけて配置するアンカー配置も、広く使える段階に来ています。
「いつか全部のブラウザで使えるようになる」を待つのではなく、「この機能はこの年に進む」という見通しが立てやすくなった点が、制作側にとってInteropのいちばんありがたいところだと感じます。
候補の選ばれ方と開発者の声の入り口
web.devでRachel Andrew氏が9月3日に公開した告知によると、Interop 2027の提案受付は9月23日までで、その後、決められた手順に沿って全候補が検討されます。提案の条件として挙げられているのは、仕様が安定していること、どのブラウザの開発元からも反対が出ていないこと、そして合否の判定に使える十分なテストがそろっていることです。過去の対象は、少なくとも1つのブラウザで実装済みのものが多かったとも書かれています。
つまりInteropは、まったく新しい機能を生み出す場ではなく、標準化の手続きを終えたものを全ブラウザで同じように動かすための場です。今年の対象の多くは、The State of CSSのような開発者アンケートで要望の多かった機能や、開発者の要望を集めたリポジトリで上位に入った機能だったとも説明されています。
Comeau氏の記事によると、今回はMozillaのチームが候補に投票できる順位づけの仕組みを用意しており、その結果を来年の対象選びに使う予定とのことです。告知の時点でも、提案一覧に「いいね」やコメントを付けて重要だと思うものを後押ししてほしいと呼びかけられています。海外の取り組みですが、日本の制作者が投票や意見で関われる窓口が開いているのは知っておいてよい点です。
角と枠の形を変えるcorner-shapeとborder-shape
ここから候補の中身を見ていきます。Comeau氏が挙げた機能の多くは、10月時点でChrome 155とEdge 154では動き、Firefox 157とSafari 27ではまだ動かない、という状態です。
見た目への効き方がわかりやすいのがcorner-shapeです。border-radiusは角を四分の一の円で丸めますが、corner-shapeではその角のつなぎ方を、角を斜めに落とすbevel、内側にえぐるscoop、切り欠きのnotch、なめらかな角丸のsquircleなどから選べます。これまでもclip-pathやマスクで近い形は作れましたが、corner-shapeは要素の枠の形そのものを変えるため、枠線やアウトライン、影も変えた形に沿って描かれるのが大きな違いです。
その一段下の仕組みとして提案されているのがborder-shapeで、直線や円弧、ベジェ曲線を組み合わせて枠の形を自分で描けます。こちらも枠そのものの形が変わるので、枠線や影がきちんと追従し、形どうしをアニメーションでつなぐこともできるそうです。
Comeau氏は、corner-shapeは対応していないブラウザでは普通の角丸に戻るだけなので、今から段階的な強化として使ってよいと書いています。ボタンやカードの角を少し個性的にしたい、という中小企業サイトの小さな演出なら、未対応のブラウザで崩れる心配がほとんどない使い方です。
書き方を短くする自作関数と継承の調整
Comeau氏がいちばん期待を寄せているのが、CSSの中で関数を定義できる@functionです。引数を受け取り、resultで返す値を書くという、JavaScriptに近い書き方で、たとえば「指定した色から透明へ向かうグラデーション」をひとつの関数にまとめ、各所では色だけを渡して呼び出す、といった使い方ができます。サイト全体で似た指定を何度も書いている場合、修正の手間を減らせる仕組みです。ただしこれは、未対応のブラウザでは指定自体が効かなくなる種類の機能なので、全ブラウザでそろうまでは、見た目の土台になる部分には使いにくいと考えておくのが無難です。
まだどのブラウザにも実装されていない段階の提案として、inherit()関数も紹介されています。親の値をそのまま受け継ぐinheritキーワードと違い、受け継いだ値をcalc()で加工できるものです。角丸の箱を入れ子にするとき、内側の丸みを少し小さくしたい、といった場面で役立ちます。Comeau氏自身も、今回の対象に入る可能性は高くないとみています。
Gridのすき間に線を引ける「すき間の装飾(gap decorations)」も候補です。Gridではセルが空だと線を引く要素がなく、区切り線を入れるのに工夫が必要でしたが、ruleという枠線に似た指定で、行や列のあいだに直接線を引けるようになります。料金表や会社概要の表組みを、Gridで組んでいる現場には便利な機能です。
動きと状態を読み取る指定
開閉式の見出し、いわゆるアコーディオンを作るとき、高さを0からautoへなめらかに動かせないことに悩んだ人は多いはずです。interpolate-sizeとcalc-size()は、このautoのようなキーワードの値どうしのあいだでアニメーションできるようにするものです。Chromeでは2024年から実装されていて、Comeau氏は今から段階的な強化として使えるとしています。ただし、未対応のブラウザでは開閉にわずかな遅れが出るため、@supportsで対応を確かめてから動きを付けるよう注意を添えています。
スクロールに関しては、指定した位置まで来たときにアニメーションを1回走らせる「スクロールで始まるアニメーション」も候補です。今はIntersectionObserverを使ってJavaScriptで書くのが一般的ですが、CSSだけで書けるようになれば、スクロール連動のものと使い分けられます。
状態を読み取る系では、position: stickyの要素が画面上端に貼り付いたかどうかを判定できる「スクロール状態のコンテナクエリ」があります。貼り付いたときだけ見出しの背景や下線を変える、といった指定がCSSだけで書けます。スクロールできる余地が上下に残っているかも判定できるので、続きがあることを示すぼかしの表示にも使えます。アンカー配置の拡張として、ツールチップが上下どちらに反転したかを判定できるコンテナクエリも挙げられていました。
見た目の並びと操作の順番をそろえるreading-flow
アクセシビリティの面で意味が大きいのがreading-flowとreading-orderです。GridやFlexboxで、パソコンとスマホとで並び順を大きく変えるのはよくある作りですが、Tabキーでの移動や支援技術での読み上げの順番は、HTMLに書いた順のままです。その結果、画面幅によっては、見た目の順番と操作の順番が食い違ってしまいます。
reading-flowは、この操作の順番をGridの行の順など見た目の並びに合わせるよう指定できるもので、細かく決めたい場合はreading-orderで個別に順番を付けられます。Comeau氏は、この提案を進めてきたのが先ほどの告知を書いたRachel Andrew氏であることにも触れています。キーボードだけで操作する人や、読み上げを使う人にとって迷いにくいサイトにする指定なので、全ブラウザでそろえば、レスポンシブデザインの組み方の自由度も上がります。
今回の候補を見渡すと、多くはまだChromeとEdgeでしか動かず、日本で利用の多いiPhoneのSafariには届いていません。そのため実案件では、角の形や開閉の動きのように、効かなくても表示が崩れない部分から試し、関数やすき間の装飾のように土台に関わるものは、来年の対象が決まって各ブラウザの対応が進むのを見てから取り入れる、という分け方が現実的だと考えています。どれが選ばれるかはまだ決まっていませんが、来年の制作で何が使えるようになりそうかを知っておくと、デザインの提案やコーディングの方針を、少し先回りして考えられるはずです。