Webスタイリングの進化は、Google、Apple、Microsoft、Mozillaといった主要なブラウザベンダーが関与する共同プロジェクト「Interop」によってますます推進されています。Interopの目標は、新しいWebテクノロジーに対するユニバーサルなブラウザサポートを確保することです。このコラボレーションの成功例の一つとしてCSS Subgridがあり、これはInteropのロードマップに追加されてからわずか1年以内に、モダンブラウザ全体でほぼ100%のサポートを獲得しました。業界がInterop 2027への準備を進める中、開発者は次世代のCSS機能のプレビューを捉え始めています。

2023年を通じてCSS Subgridのブラウザサポートが急速に増加していることを示す折れ線グラフ。
CSS Subgridの急速な採用は、ユニバーサルなブラウザサポートを実現するためのInteropプロジェクトの成功を実証しています。www.joshwcomeau.com

このグラフは、CSS Subgridを実装するためのブラウザベンダー間の協力の成功を例示しており、1年以内にほぼ100%のサポートを獲得しました。

最も重要な変化の一つは、CSS関数の導入です。JavaScriptと同様に、これらの関数により、複雑なアニメーションのために極座標をデカルト座標に変換するといったカスタムロジックを開発者が定義できるようになります。もう一つの大きな進歩は、標準的な角丸を超えた形状機能の拡張です。提案されている`corner-shape`プロパティは、「squircle」(超楕円アルゴリズムを使用)、「bevel」(45度の対角コーナー)、「notch」または「scoop」カットアウトなどのオプションを導入します。`clip-path`を使用した以前の方法とは異なり、これらのプロパティは要素のborder-boxを実際に変更するため、ボーダー、アウトライン、およびbox-shadowが新しい形状に正しく追従することを保証します。

round、squircle、bevel、notch、scoopを含む異なるコーナー形状を示す5つのボックス。
提案されているcorner-shapeプロパティは、squircleやbeveled edgeのような多様な幾何学的オプションを導入します。www.joshwcomeau.com

提案されているcorner-shapeプロパティは、'squircle'、'bevel'、および'notch'または'scoop'カットアウトなどのオプションを導入します。

squircleスタイルの角を持ち、金のコインの下部をなぞる円形のカットアウトがある緑色のカード。
複雑なカットアウトを持つUI要素に適用された新しいcorner-shapeプロパティの実用的な例。www.joshwcomeau.com

clip-pathを使用した以前の方法とは異なり、これらのプロパティは要素のborder-boxを実際に変更し、ボーダー、アウトライン、およびbox-shadowが新しい形状に正しく追従することを保証します。

さらなる改善は、レイアウトとアクセシビリティをターゲットとしています。「Level 2」Anchor Positioning APIには、ターゲット要素(ツールチップなど)がフォールバック位置に反転したかどうかを検知するための新しいコンテナクエリが含まれ、より精密なUI調整が可能になります。さらに、提案されている`reading-flow`プロパティは、複雑なグリッドやflexboxレイアウトにおいて、要素のタブ順を視覚的な順序と一致させることを目的としており、支援技術に依存するユーザーにとって大きな利点となります。`inherit()`関数のような一部の機能はまだ初期の提案段階に留まっていますが、これらの開発は、よりプログラム的で幾何学的に柔軟なCSS環境への移行を予見させるものです。