- 今年新たに追加、または対応が拡大したCSS/HTML機能を、実践的な観点から整理した一覧で、UIトランジション・フォーム・タイポグラフィ・関数型CSSまで幅広く扱う
autoなどのキーワードへのサイズ遷移、HTML popover/invoker、CSS @function・if() といった新機能が中核で、多くはChrome先行対応のため、プログレッシブエンハンスメント戦略が必要field-sizingによる自動拡張入力、カスタムSelect、text-wrap: balance/pretty、linear()イージング、shape()パスなどは、視覚面と使い勝手の品質を手軽に高められる- 強化された
attr()、読み順を制御するreading-flow、**calc-size()**のような値・フロー制御ツールが増え、CSSだけで扱える設計範囲が広がっている
- まだ標準化・対応が進行中のMasonry、
random()、margin-trim、View Transitions拡張などに注目しつつ、Container Queries、:has()、dvhなどはすでに実務の基本となっている
Animate to Auto
- 任意のコンテンツ高さを持つ要素で、固定値 ↔︎
auto の間を滑らかに遷移できるようにする機能
- グローバルに
interpolate-size: allow-keywordsを宣言すれば、height: 0 → autoのような遷移を許可できる
- または
interpolate-sizeなしで**calc-size()**を使い、height: calc-size(auto, size)として遷移を実現できる
- 利点は、従来の
max-heightの小細工や、オフスクリーン計測 + JSアニメーションのような脆い代替手段を不要にし、本来のレイアウト保持を維持できること
- 対応状況は現在Chrome中心で、アニメーションはあればうれしい程度の機能なので、PE（Progressive Enhancement）の適用に向く
Popovers & Invokers
popover属性は、任意の要素に開閉動作と対応するJS APIを与えるHTML機能で、モーダルとは異なる軽量オーバーレイのカテゴリに属する
- Invoker属性を使えば、JSなしで宣言的な制御が可能
- 意義は、アクセシビリティ・キーボード・フォーカス管理などをHTMLレベルで標準提供し、実装漏れのリスクを減らせる点
- 対応はPopoverが広範囲、InvokerはChrome先行で、
popover="hint"など細かな機能差がある
- Polyfillが提供されているため、必須UXにも導入しやすい
@function
- CSSの値関数体系にユーザー定義関数を導入し、
@function --foo(--x) { result: ... }の形で共通ロジックを抽象化できる
- **重複排除（DRY）**と宣言部の単純化により、可読性・保守性の向上が見込める
- 対応はChrome先行で、妥当であれば
property: fallbackの次の行にproperty: --func()を書くことで、グレースフルフォールバックも可能
if()
- CSS初の値レベル分岐関数で、
media()・supports()・style()条件をswitch文のように並べ、最初に一致した値を返す
- 例: ブレークポイントごとの
grid-template-columnsを単一宣言で記述できる
- 効果は可読性の改善と重複削減で、カスタム
@functionとの相性もよい
- 対応はChrome先行で、先にフォールバック値を宣言するPEパターンの採用が推奨される
field-sizing
- 入力・編集要素が内容に応じて自動で大きくなる
field-sizingプロパティの紹介
<textarea>の自動高さ拡張が代表例で、インラインのその場リサイズUXにも応用できる
- 対応はChromeおよびSafari導入予定で、必要なら軽量JS代替も可能
- 必須機能ではないUX向上の性格が強いため、段階的導入に向く
Custom Selects
selectの外観だけでなく、開いた選択UI自体をスタイリングできるよう、明示的なオプトイン後に完全なカスタマイズをサポート- PEに優れており、未対応環境では標準の
<select>へ安全にフォールバックする
- 対応はChrome先行で、
appearance: base-selectや::picker(select)などにより制御範囲を拡張できる
text-wrap
text-wrap: balanceは見出しなど大きな文字で行長のバランスを整え、text-wrap: prettyは本文でも孤立行の抑制や見た目の改善をもたらす- 効果は可読性・タイポグラフィ品質の向上で、コストなしですぐ体感しやすい
- 対応は
balanceが広範囲、prettyはChrome・Safari先行で、PEに適している
linear() easing
- キーワードの
linearと異なり、linear()関数は任意個のポイントで精密なイージングカーブを定義でき、バウンスなど複合動作の実装に向く
- 代替の
cubic-bezier()が制限されるのに対し、linear()は細かなタイミング制御を提供し、全面対応の状態にある
- 必要に応じて名前付きイージングや
cubic-bezier()へのフォールバックも可能
shape()
- 従来の
path()が持つピクセル専用・難解な構文を補う**shape()関数により、レスポンシブ単位・カスタムプロパティを活用して任意のパス**を記述できる
clip-pathで任意形状のマスキング、offset-pathでパスに沿った配置・アニメーションができ、将来的には**shape-outside**との連携も見込まれる- 対応はChrome・Safari、Firefoxはフラグ付きで進行中で、実開発では美しいフォールバック設計が推奨される
More Powerful attr()
attr()が型指定をサポートし、数値・色などの非文字列値をHTML属性から直接読み取ってCSS値として利用できる- 意味は、テーマカラー・カウント・サイズなどをマークアップから注入するパターンを拡張できること
- 対応はChrome先行で、コアレイアウト依存よりも視覚強化要素から段階的に導入するのが望ましい
Reading Flow
- 視覚順とソース順がずれたレイアウトでも、Tab移動順を論理的に補正する**
reading-flow**プロパティが導入された
- グリッド再配置時に
reading-flow: grid-rowsのように、レイアウト方式に合わせたフォーカスフローを指定する
- アクセシビリティ上のリスクをCSS宣言1行で減らせるため、レイアウトの自由度が高まる
- 対応はChrome先行のため、過度な再配置は広範な対応が進むまで控えるのが推奨される
Stuff to Keep an Eye On
- Masonryレイアウトは仕様整理中で、
item-flow提案がグリッドを超えた配置可能性を広げる見込み
random()関数はSafariで提供されており、表現力の高いバリエーションデザインに有益margin-trimは有用だがSafari中心、sibling-index()/count()はChromeで提供され、スタガーアニメーションに役立つ- View Transitionsの**
view-transition-name: match-element;**、Firefoxでの開発進行など、クロスブラウザ面で好材料がある
- 単位混在
calc()の乗算/除算の合理化が実験通過間近で、過去の型変換ハックの必要性が減る見通し
- 「CSS4」のようなバージョン命名不在の問題提起と、最近5年の新機能を集めた参考リストも紹介
Great Stuff to Remember
- Container Queries と単位は、メディアクエリ以降で最大級の生産性向上として、今後も中核的な基本スキルに位置づけられる
:has()は親・状態ベースの選択を可能にし、複雑な組み合わせ選択をCSSだけで解決できる幅広い活用性を持つ- View Transitions、Anchor Positioning、Scroll-Driven AnimationsはSafari対応により、実務採用の障壁が下がっている
- 追加ビューポート単位（dvhなど）がBaseline入りし、モバイルビューポートの安定性が向上
コード/使用例ハイライト
- サイズ遷移: グローバルに
interpolate-size: allow-keywords、または状態切り替え時にheight: calc-size(auto, size)として、コンテンツ高さのアニメーションを構成
- グリッド分岐:
if(media(...): 値; ... else: 値;)パターンで、ブレークポイント別テンプレートカラムを単一宣言に集約
- カスタムSelect:
select, ::picker(select) { appearance: base-select }でユーザー定義ピッカーを有効化
- バウンスイージング:
animation-timing-function: linear( ... 多数のポイント ... )で細かな反動/減衰カーブを実装
- クリップパス:
clip-path: shape( ... )でレスポンシブな比率ベース図形のマスキングを構成
実務適用ガイド
- ブラウザ対応差が大きい項目は、フォールバック優先設計と導入コストに対する効果を基準に採用する
- アニメーション・タイポグラフィ・視覚効果はPE優先候補、フォーカス/Tab順のような中核アクセシビリティは広範な対応後の採用が推奨される
- 独自関数/分岐は、設計ルールの文書化とトークン・カスタムプロパティの組み合わせで、チーム共通パターンにしたときROIが最大化される
- フォームUX改善項目（
field-sizing、Custom Select）は、モバイル優先シナリオで体感メリットが大きい
結論
- 2025年版のモダンCSSは、値関数・論理分岐・形状制御の拡張によって、**「CSSでできることがさらに増えた」**年であり、PE戦略とともに段階的に採用する価値が高い
- 基本スキル（Container Queries、
:has()、ビューポート単位）を土台にしつつ、animate-to-auto・if()・shape()のような高効率な項目を優先導入する現実的なロードマップが有効
3件のコメント
CSSはもうほとんど言語になりましたね。かなり論理的な実装までできるようになってしまって……
これが本当にスタイルシートなのかと思います。
便利な機能がかなり増えそうですね。これまでJavaScriptで実装しなければならなかったものも。
CSSが本当にかなり良くなりましたね