CSSの未来：Interop 2027のトップ10予測
The Future of CSS (joshwcomeau.com)
要約
Web技術のブラウザ間互換性を向上させるプロジェクト「Interop」は、CSS Subgridの例のように、目覚ましい成功を収めています。2027年に向けたInteropの計画が進む中、本記事では特に注目すべき10のCSS新機能を紹介します。これには、CSS関数、新しいコーナー形状、アンカー配置の拡張、そしてアニメーションやレイアウトの可能性を広げる機能が含まれます。
全文翻訳
CSSの未来 ✨ Interop 2027のためのトップ10選
過去数年間、主要なブラウザベンダー（Google、Apple、Microsoft、Mozilla、およびIgalia、Bocoup）は、Webテクノロジーにおける普遍的なブラウザサポートを改善するためのプロジェクトであるInteropで協力してきました。これは驚くほど成功した取り組みです。フォーカスエリアがInteropに追加されると、多くの場合、1年以内にすべての主要ブラウザでほぼ100%のサポートが達成されます。✨
CSS Subgridはその良い例です。SubgridはCSS Gridの非常に強力な拡張機能であり、全く新しいレイアウトを可能にします。これは2019年にFirefoxに実装されましたが、他のブラウザでは長年ほとんど進展がありませんでした。Interop 2023に追加され、その年の終わりまでには、すべてのモダンブラウザで広く利用可能になりました。
Y軸は各ブラウザでのsubgrid関連テストの合格率を示しています。黒い「Interop」線は、すべてのブラウザで合格したテストを示しています。
2026年末が近づくにつれて、Interop 2027が現在計画されており、Mozillaのチームは、私たちが最も要望する機能をアップボートするためのランキングシステムを作成しました。彼らは、来年のInteropに含めるものを決定するために、ランキングデータを使用する予定です！
この記事では、私が投票したトップ10の機能について掘り下げ、来年CSSがどのようになるかのプレビューを提供したいと思います。今日から使えるちょっとしたヒントやトリックもいくつか紹介します！
1. CSS関数
現在のブラウザサポート
Chrome 155およびEdge 154でサポート
Firefox 157ではサポートされていません
Safari 27ではサポートされていません
最もエキサイティングなアイデアの1つは、CSSに関数を追加する提案です。
/* 関数を定義: */
@function --gradient-to-transparent(--color, --direction: bottom) {
result: linear-gradient(
to var(--direction),
var(--color),
transparent;
);
}
/* 呼び出し: */
.elem {
background: --gradient-to-transparent(red);
}
/* …これにより、以下が生成されます: */
.elem {
background: linear-gradient(
to bottom,
red,
transparent;
);
}
JavaScriptに慣れているなら、これはかなり馴染み深いでしょう。@functionで新しい関数を定義し、resultで返される値を指定します。
これを使ってできるクールなことはたくさんあります。個人的に最も興味のあるユースケースは、極座標とデカルト座標間の変換能力です。これは私のWhimsical Animationsコースで繰り返し使用する概念です。
@function --translate-polar(--angle, --distance) {
result: translate(
calc(cos(var(--angle)) * var(--distance)),
calc(sin(var(--angle)) * var(--distance))
);
}
/* この要素を45°の角度で100px移動: */
.particle {
transform: --translate-polar(45deg, 100px);
}
これは私にとってかなり「SF」のように感じますが、すでにChromiumブラウザに実装されており、Interop 2027に追加されれば、比較的早く広く利用可能になる可能性は非常に高いと思います！
2. corner-shapeによるベベルとスクイークル
現在のブラウザサポート
Chrome 155およびEdge 154でサポート
Firefox 157ではサポートされていません
Safari 27ではサポートされていません
CSSでは、border-radiusプロパティを使用してDOMノードの角を丸めて、角丸長方形を作成できます。このプロパティは、4つの直線辺を接続する各角に四分円を追加します。
corner-shapeプロパティは、DOMノードの4つの辺を接続する代替方法を探求するものです。いくつかの新しいオプションを提供します。
コードプレイグラウンド
コードエディタ:
結果
[［画像: 丸、スクイークル、ベベル、ノッチ、スクープのそれぞれ異なる角の形状を持つ5つのボックス。丸はデフォルト、スクイークルはわずかに滑らかで角度のついた円形の角、ベベルは45度の斜めの角、ノッチは正方形の切り欠き角、スクープは円形の切り欠き角］]
このプロパティについて最初に聞いたとき、私はsquircleに最も興奮しました。もしご存知なければ、スクイークルはスーパー楕円を使用して角丸を生成する代替アルゴリズムです。Appleは何年も前からそれを利用しており、より滑らかで優しいエッジを作り出します。
とはいえ、corner-shapeをしばらくいじってみた後、私はcorner-shape: bevelをたくさん使うことに気づきました。ビデオゲーム/SF UIを作成するのに最適です。これは、たくさんのcorner-shape: bevelを使用した、現在取り組んでいるサイドプロジェクトの小さなプレビューです。
[［画像: たくさんの重ねられた灰色のボックスを持つモノクロームUIのスクリーンショット。各ボックスは45度のベベル角を持っています］]
技術的には、clip-pathやマスクを使用してこのようなことを行うことができましたが、それらの機能とは異なり、corner-shapeはボーダーボックスの形状を実際に変更します。これは、ボーダー、アウトライン、ボックスシャドウが変更された角の形状を正しくたどることを意味します！
そして、このプロパティは（私が2026年10月に書いている時点では）Firefox/Safariでは利用できませんが、今日から使用を開始するのは妥当だと思います。これは完璧なプログレッシブエンハンスメントです！
3. border-shapeによる無限の可能性
現在のブラウザサポート
Chrome 155およびEdge 154でサポート
Firefox 157ではサポートされていません
Safari 27ではサポートされていません
corner-shapeに加えて、ボーダーを描画することを可能にする、より低レベルのバージョンであるborder-shapeの別の提案があります。
このプロパティについては、最近のニュースレターで詳しく説明したので、ここではあまり繰り返しません。要約すると、border-shapeを使用すると、直線、円弧、ベジェ曲線を使用して、必要な任意のボーダー形状を作成できます。
最近、このプロパティを使用して、上部に大きな円形の切り欠きがあるこのカードを描画しました。
[［画像: 上部に大きな円形の切り欠きがあり、コインの底辺をたどるスクイークルスタイルの角を持つ、縦長の緑色のカードのスクリーンショット］]
corner-shapeと同様に、このプロパティは要素の実際のボーダーボックスを変更するため、ボーダー/アウトライン/シャドウはそれを正しくトレースします。上記の効果を達成するために、必要な形状を描画してから、白いボーダーと黒いアウトラインを追加しました！
このクリップで行っているように、異なるボーダー形状間でアニメーションさせることさえできます。
このプロパティについて、この件に関するニュースレターでさらに詳しく学ぶことができます。
4. アンカー付きコンテナクエリ
現在のブラウザサポート
Chrome 155およびEdge 154でサポート
Firefox 157ではサポートされていません
Safari 27ではサポートされていません
最近、最もエキサイティングなモダンCSS機能の1つであるAnchor Positioningに関するブログ記事を公開しました（これは実際にはInterop 2026で優先され、現在広く利用可能です！）。
Anchor Positioning APIは、ある要素を別の要素にアンカーすることを可能にします。たとえば、フローティングツールチップ要素をトリガーにアンカーすることで、そのトリガーがページ上のどこにあっても、ツールチップは常にそれに接続されます。
この種の問題を自分で解決しようとしたことがあるなら、それが驚くほど難しいことがわかっているでしょう。たとえば、ツールチップをアンカーの上に浮かせたいかもしれませんが、アンカーがビューポートの上部近くにある場合はどうでしょうか？
これは、このボタンに関する追加情報を表示するツールチップです。
ツールチップは快適に収まります。
これは、このボタンに関する追加情報を表示するツールチップです。
ツールチップが切り取られています！
元のAnchor Positioning APIは、この問題をCSSで簡単に解決するために必要なツールのほとんどを提供しました。これは、フォールバック位置を指定することを可能にします。ターゲット要素がアンカーの上に収まらない場合、自動的に下に反転できます。
不足していたのは、ターゲットが反転したかどうかを伝える能力だけでした。 CSSで、ターゲット要素が現在アンカーの上にあるか下にあるか、デフォルト位置を使用しているかフォールバック位置を使用しているかを知る方法はありませんでした。ツールチップの場合、通常はアンカーを指す小さな突起を追加したいので、これは問題です。
Anchor Positioning APIの「レベル2」には、ターゲット要素がフォールバック位置を使用しているかどうかを確認できる新しいタイプのコンテナクエリが含まれています。詳細については、Anchor Positioningブログ記事で確認するか、Interop 2027提案を確認してください。
5. CSS inherit()関数
正直なところ、この提案については聞いたことがなく、私の知る限り、どのブラウザにも実装されていません。caniuseにもリストされておらず、あの小さなウィジェットを表示できません！
それでも、見た瞬間に、これが必要だとわかりました。😂
ご存知かもしれませんが、CSSのinheritキーワードは、通常は継承されないプロパティであっても、親から値を渡すことができます。
コードプレイグラウンド
コードエディタ:
結果
これは値を再利用するための便利な小さなトリックですが、うまくいかないことがよくあります。たとえば、ネストされたボーダー半径（または半径？）があるとします。
コードプレイグラウンド
コードエディタ:
結果
ネストされたボーダー半径が正しく見えるためには、内側の半径の丸みを減らす必要があります。したがって、継承された値を正確に使用したいわけではありません。それを変換したいのです。
そこで登場するのが、提案されているinherit()関数です。これは継承された値を取得し、calc()を使用してそれを変更できるようにします。
p {
border-radius: calc(inherit() - 4px);
}
この機能は非常に初期段階にあるため、Interop 2027のカットに入るかどうかは少し驚きですが、将来的にはこの機能が得られることを願っています！非常に便利そうです。😄
現在のブラウザサポート
Chrome 155およびEdge 154でサポート
Firefox 157ではサポートされていません
Safari 27ではサポートされていません
私のスクロール連動アニメーションに関するブログ記事では、スクロールによってキーフレームアニメーションをスクラブする方法を探求します。たとえば、要素がビューポートを通過するにつれてフェードインさせるために使用できます。
スクロール連動アニメーションはInterop 2026の一部であり、すべてのブラウザに正常に実装されました。しかし、スクロール連動アニメーションに加えて、スクロールトリガーアニメーションの別の提案もあります。
スクロールトリガーアニメーションでは、ユーザーが特定の位置にスクロールしたときにキーフレームアニメーションをトリガーすることを目的としています。これは、近接センサーが作動するようなものです。その時点で、アニメーションは指定された期間で通常どおり実行されます。
現在、JavaScriptのIntersectionObserver APIを使用してスクロールトリガーアニメーションを実装できますが、それは少し面倒です。スクロール連動アニメーションとスクロールトリガーアニメーションの両方にCSSを使用できるようになると、非常に便利になります。それぞれに独自のユースケースがあります。
この素晴らしい記事でスクロールトリガーアニメーションについてさらに詳しく学ぶことができます。
7. CSSのreading-flowとreading-order
現在のブラウザサポート
Chrome 155およびEdge 154でサポート
Firefox 157ではサポートされていません
Safari 27ではサポートされていません
現在、動的なグリッドベースのレイアウトを含む作業を行っています。アイテムはデスクトップとモバイルで非常に異なって配置されます。
[［画像: 左側にアイテムのリスト、中央に大きな赤いボタン、右側にいくつかの追加パネルが表示されているぼやけた画像］]
デスクトップレイアウト
[［画像: 大きな赤いボタン、次にアイテムのリスト、次にいくつかの追加設定パネルがある、単一の狭い列が表示されているぼやけた画像］]
モバイルレイアウト
これはレスポンシブCSSの素晴らしい点の1つですが、残念な副作用があります。タブオーダーは常にDOMオーダーに基づいており、ビジュアルオーダーではありません。そのため、誰かが支援技術を使用して要素間をナビゲートする場合、レイアウトが画面サイズに応じて劇的に変化しても、そのナビゲーションオーダーは常に同じになります。
デスクトップでは、最初のビジュアルアイテムは左側の「Redacted」のリストですが、モバイルでは最初のアイテムはその大きな赤いボタンです。DOMで最初にくる要素がフォーカスを受け取る最初のアイテムになりますが、これはユーザーの一定割合にとって常に間違ったものになります。
幸いなことに、新しいreading-flowプロパティは、この問題に対する解決策を提供し、Interop 2027の提案があります。
基本的な考え方は、タブオーダーがいくつかのビジュアルオーダーのいずれかに従うように指定できるということです。
.grid {
display: grid;
reading-flow: grid-rows;
}
CSS GridとFlexboxの両方の値があり、さらに制御が必要な場合は、reading-orderプロパティを使用すると、HTMLのtabIndexのようなカスタムオーダーを作成できます。
このプロパティは、私の個人的なヒーローの1人であるRachel Andrewによって推進されています。彼女のreading-flowに関するブログ記事でさらに詳しく読むことができます。
8. interpolate-sizeとcalc-size()によるキーワードサイズのアニメーション
現在のブラウザサポート
Chrome 155およびEdge 154でサポート
Firefox 157ではサポートされていません
Safari 27ではサポートされていません
Webにおける長年の問題点は、autoのようなキーワード値間でアニメーションできないことでした。interpolate-sizeプロパティはこの問題を解決し、関連するcalc-size()関数とともに、Interop 2027の提案があります。
この機能の最も一般的なユースケースは、折りたたみ可能なアコーディオンタイプのUIを作成するために、height: 0とheight: autoの間でアニメーションすることです。
コードプレイグラウンド
コードエディタ:
結果
interpolate-sizeプロパティはまだお使いのブラウザではサポートされていません。サポートされているブラウザでの表示は以下のとおりです。
これは確かに少し複雑な例で、他のニッチながらも広くサポートされているCSS（transition-behaviorなど）を必要とします。しかし、重要なのは、interpolate-size: allow-keywordsがこのようなトランジションを可能にするということです。
この提案はしばらく前から存在しており、2024年からChromeに実装されているため、Interop 2027に搭載されることを願っています！
そして、まだすべてのブラウザで利用可能ではありませんが、プログレッシブエンハンスメントとして今日から使用を開始できます。サポートされていないブラウザに短い遅延が追加されるのを避けるために、transitionを@supportsクエリでゲートすることを忘れないでください。
9. CSSのgapデコレーション
現在のブラウザサポート
Chrome 155およびEdge 154でサポート
Firefox 157ではサポートされていません
Safari 27ではサポートされていません
CSS Gridレイアウトをユニークにしていることの1つは、グリッドの子要素が完全にCSSで定義された行/列を使用して配置されることです。他のすべてのレイアウトモードでは、要素は他の要素を使用して配置されます！たとえば、テーブルレイアウトでは、各グリッドセルには関連付けられた<td>または<th>要素があります。
CSS Gridには多くの利点がありますが、欠点の1つは、グリッドセル間にボーダーを追加するのがそれほど簡単ではないことです。グリッドセルが空の場合、border: 1px solidを適用する要素がありません！
gap decorations提案は、グリッド自体にボーダーライクな構文を使用できる新しいCSSプロパティセットを導入します。これを見てください。
コードプレイグラウンド
コードエディタ:
結果
ruleプロパティはまだお使いのブラウザではサポートされていません。サポートされているブラウザでの表示は以下のとおりです。
[［画像: 各行と列の間に赤いボーダーがある3x3のグリッド。最初の2つのセルにはピーチ色の要素があり、残りは空です］]
borderと同様に、ruleプロパティは、線の幅、色、スタイル（点線/破線/実線）を指定できるショートハンドプロパティです。各行または列の間の線のみを描画したい場合は、row-ruleとcolumn-ruleを使用することもできます。
現在のブラウザサポート
Chrome 155およびEdge 154でサポート
Firefox 157ではサポートされていません
Safari 27ではサポートされていません
position: stickyを扱っていて、要素が現在「固定」されているかどうかを知る方法があればと思ったことはありませんか？たとえば、固定ヘッダーがビューポートの上部に固定されたときに背景色を変更したいと思ったかもしれません。
この提案は、position: sticky要素が通常のインフロー位置からビューポートに固定されるときに一致する、新しいタイプのコンテナクエリの実装のためのものです。見てみましょう。
コードプレイグラウンド
コードエディタ:
結果
この機能がお使いのブラウザでまだサポートされていない場合、これは次のようになります。
興味深いことに、この新しいAPIは単にスティッキー配置のためだけではありません。スクロール関連のあらゆる状態をクエリするために使用できます。たとえば、スクロールコンテナが上部/下部にスクロールされているかどうかを判断できます。これは、スクロールを示すグラデーションを表示するのに役立ちます。
コードプレイグラウンド
コードエディタ:
結果
上にスクロールできる場合、scrollable: topが一致し、コンテンツの上部に浮いている疑似要素が表示されます。すべて上にスクロールすると、scrollable: topはもはや適用されず、グラデーションは非表示になります。
サポートされているブラウザでの表示は次のとおりです。
結論
Interopが7年目を迎えるにあたり、このプロジェクトがWebにとって大成功であったことは否定できません。この成功を継続してくれていることにとても感謝しています！
Web開発者にとって今は少し奇妙な時期であることは承知しており、多くの人がこのようなことに関心を持つ必要があるのかどうか疑問に思っています。もし私たちがすべての仕事をLLMに委任するなら、最新のCSS機能についていく必要があるのでしょうか？
個人的には、これまで以上に重要だと思います。 LLMのトレーニングデータのかなりの部分が数年前のものであることを考えると、LLMが最新のCSS機能を使用することを期待することはできません。この記事で共有した機能のほとんどは、今日からプログレッシブエンハンスメントとして使用でき、歴史が証明するように、多くはすぐに広く利用可能になるでしょう。
最高のユーザーエクスペリエンスを構築したいのであれば、エージェントに最新のWeb機能を利用するように指示する必要があります。そのためには、それらについて知る必要があります！これは、今年の初めにニュースレターで掘り下げたことです。エージェント時代においても、深い技術的専門知識は信じられないほど価値があります。
最後に、あなた自身のトップチョイスをランク付けすることを強くお勧めします！このリストには、この記事では取り上げなかったTemporalのようなエキサイティングなJavaScript APIを含む、素晴らしい提案がたくさんあります。
最終更新日
2026年10月20日