Interop 2027で注目すべき未来のCSS

ウェブブラウザの互換性向上プロジェクト「Interop 2027」で注目すべきCSS機能トップ10について、ウェブ開発者のジョシュ・コーモー氏が自身のブログにて解説していました。

The Future of CSS ✨ • Josh W. Comeau
https://www.joshwcomeau.com/css/interop-2027/

◆CSSカスタム関数
@functionでCSSカスタム関数を定義することにより、グラデーションや複雑な計算を再利用可能にします。コーモー氏は個人的に「極座標と直交座標の変換」に興味があるとのこと。

@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);
}

Chromiumブラウザには既に実装されていますが、Interop 2027に追加されれば他ブラウザへの普及が期待できます。

◆corner-shape
要素に丸みを持たせる従来のborder-radiusに代わり、corner-shapeを使用することで角の形状に「squircle」や「bevel」などを指定できます。

角の形状はボーダー・アウトライン・ボックスシャドウに対して有効です。コーモー氏は当初AppleのUIでよく見られる「squircle」に注目していましたが、そのうち「bevel」を最も頻繁に使用するようになったとのことです。

◆border-shape
corner-shapeより低レベルなプロパティであるborder-shapeは、直線・円弧・ベジェ曲線を用いて独自のボーダー形状を描画できます。

border-shapeはアニメーションを指定することもできます。


◆アンカースタイルのコンテナクエリ
Anchor Positioning APIを使用するとある要素を別の要素に固定できます。たとえば、フローティングツールチップ要素をそのトリガーに固定することで、トリガーがページ上のどこにあってもツールチップは常にトリガーに接続された状態になります。同じものをAnchor Positioning APIを使わずに実現するのは非常に困難であり、例えばツールチップをアンカーの上に浮かせたい場合、アンカーがビューポートの上部近くにあるとツールチップが画面外にはみ出してしまうため、何らかの調整を手作業で行う必要が生じます。

ただこれまでのCSSでは、ターゲット要素がアンカーの上にあるのか下にあるのか、デフォルト位置を使用しているのかフォールバック位置を使用しているのかを知る方法がありませんでした。なぜこれが問題になるのかというと、ツールチップを実装する場合に通常はアンカーに向かって吹き出し部分を追加したいからです。Anchor Positioning API の「レベル 2」にはターゲット要素がフォールバック位置を使用しているかどうかを確認できる新しいタイプのコンテナクエリが含まれています。追加されたコンテナクエリの詳細についてはコーモー氏の別のブログ記事で扱っています。

◆CSS inherit()関数
CSSのinheritキーワードを使用すると、通常は継承されないプロパティであっても親要素から値を渡すことができます。

便利なinheritキーワードですが、特定のケースではうまく機能しない場合があります。例えば、border-radiusの半径をそのまま子要素に継承させると見た目がおかしくなります。

角に丸みを持たせた境界線がネストする場合、内側の境界線の丸みは半径を小さくする必要があります。それには、継承された値をそのまま使用するのではなく、計算式で変換した値が必要になります。そこで提唱されたのがinherit()関数で、例えばcalc()と組み合わせると以下に示すような指定が可能になります。

p {
  border-radius: calc(inherit() - 4px);
}

inherit()関数はまだ提唱されたばかりであり、Interop 2027には間に合わないかもしれませんが、とても便利そうなのでいつか実装されてほしいとコーモー氏は語っています。

◆スクロールトリガーアニメーション
Interop 2026で導入されすべてのブラウザで実装された「スクロール駆動型アニメーション」に加え、特定のスクロール位置でキーフレームアニメーションをトリガーする「スクロールトリガーアニメーション」をCSSで直接扱えるようにする提案です。

◆reading-flowとreading-order
Gridベースのレイアウトでは、画面サイズによって視覚レイアウトとDOM順序が一致しなくなる場合がよくあります。

レスポンシブデザインの副作用として、タブオーダーは常にDOMの順序に基づいており、視覚的な順序には基づいていません。そのため、要素間を移動するために何らかの補助技術を使用している場合、画面サイズに応じてレイアウトが大きく変化してもナビゲーションの順序は常に同じままになります。Interop 2027の提案に含まれるreading-flowプロパティは、タブオーダーをいくつかの視覚的な順序のいずれかに従うよう指定することで、この問題に対する解決策を提供してくれます。

.grid {
  display: grid;
  reading-flow: grid-rows;
}

reading-flowに指定可能な値はGridとFlexboxの両方が用意されていますが、さらにきめ細かな制御が必要な場合はreading-orderプロパティを使用することで、HTMLのtabIndexのように独自の順序を設定することができます。

◆キーワードサイズのアニメーション：interpolate-sizeとcalc-size()
ウェブ開発における積年の課題の一つに「キーワード値autoとの間のアニメーションができない」というものがありましたが、Interop 2027の提案にあるinterpolate-sizeプロパティはこの問題を解決します。

html {
  interpolate-size: allow-keywords;
}

これにより例えば「height: 0」から「height: auto」へのアニメーションが可能になります。また関連するcalc-size()も同時に提案されています。アコーディオンUIなどに活用できるものと考えられており、Chromeでは既に実装されています。

◆ギャップ装飾
CSS Gridレイアウトにおいて、グリッドセル間の境界線(罫線)を直接追加できる機能です。

ruleプロパティで境界線の幅・色・スタイルを指定でき、row-rule・column-ruleプロパティを使用することで行または列のみへの適用も可能です。

◆スクロール状態コンテナクエリ
「position: sticky」を指定された要素が固定されているか、あるいはスクロールコンテナがトップ/ボトムにスクロールされているかを検知し、それに合わせたスタイリングを可能にします。

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .header-content {
    background: var(--gray-300);
    border-bottom:
      1px solid var(--gray-500);
  }
}

上記の例ではスティッキーヘッダーがトップに固定されると背景・境界線の色が変化します。

◆まとめ
Interopプロジェクトはウェブの互換性向上に大きく貢献しており、今後もさらに発展するものと予想されます。今回挙げた機能の多くは既に一部で利用可能であり、将来的には広くサポートされるものと考えられます。大規模言語モデル(LLM)の活用が進む現代だからこそ、人間がこれら最新のCSS機能を理解し、古いデータで学習してきたLLMに対して最新のウェブ機能を活用できるよう導いてやることの重要性はむしろ高まっている、とコーモー氏は指摘しています。