CSS の進化をカテゴリーに分類すると、私たちは未来に生きているように感じるために単に border-radius を要求していた時代をはるかに超えています。私たちは現在、プラットフォームがビジュアルレイヤーを微調整するだけでなく、インターフェイスの構築方法を根本的に再定義するツールを提供する瞬間に生きています。 2024 年に発表される機能の数を超えることはないと考えていました。私はこれほど嬉しい間違いをしたことはありません。
Chrome チームの「CSS Wrapped 2025」は単なる機能のリストではありません。これは、動的なネイティブ Web のマニフェストです。 「CSS5」時代の定義から最新のレイアウト ユーティリティの複雑さに至るまで、これらの進化を文書化するのに数年を費やしてきた者として、私は今年のまとめを非常に興奮した気持ちで見ていることに気づきました。私たちは、「最適化された人間工学」と「次世代のインタラクション」への移行を目の当たりにしており、これにより、コードとの戦いをやめて、自然な状態でインターフェイスを彫刻できるようになります。
この記事では、私の最近の実験とプラットフォームの将来への期待というレンズを通して見た、Chrome のレポートから傑出した機能を包括的に紹介します。
コンポーネント革命: ついにネイティブのカスタマイズ可能な選択が登場
私たちは長年にわたり、ドロップダウンのスタイルを重い JavaScript ライブラリに依存してきましたが、この「数十年来の問題」がプラットフォームによってついに解決されました。カスタマイズ可能な選択の歴史の詳細 (および関連記事) で詳しく説明したように、これはオープン UI、
画像やフラグなどのオプション内に豊富なコンテンツを含めることができる素晴らしい追加機能は、とても楽しいものです。現在ではあらゆる種類の選択を作成できます。
デモ: 新しい
オプション内の画像を使用したカスタマイズ可能な選択と、utilitybend によって [フォークされた] 選択されたコンテンツを参照してください。
デモ: 疑似要素のみを使用して選択をスタイリングする方法を包括的に示します。
Pen を参照してください。utilitybend によって [フォークされた] 擬似要素のみを使用したカスタマイズ可能な選択です。
デモ: または、optgroups を使用したこのメニュー選択デモでさらにレベルを上げることもできます。
ユーティリティベンドによって [フォークされた] optgroups を使用した実際の選択メニューを参照してください。 この機能だけでも、フォームの構築方法が大きく変わり、依存関係と技術的負債が削減されることを示しています。 スクロールマーカーとJavaScriptカルーセルの終焉 カルーセルの作成は、歴史的に開発者とクライアントの間の摩擦点でした。クライアントはそれらを気に入っていますが、開発者はそれらをアクセスし、パフォーマンスを向上させるために必要な JavaScript を恐れています。 ::scroll-marker および ::scroll-button() 擬似要素の登場により、このダイナミックさが完全に変わりました。 これらの機能により、純粋に CSS を使用してナビゲーション ドットとスクロール ボタンを作成し、スクロール コンテナにネイティブにリンクすることができます。ブログにも書きましたが、これは最初のスライドで Love でした。 JavaScript を 1 行も書かずに、完全に機能するアクセス可能なスライダーを作成できる機能は、便利なだけではありません。それはパフォーマンスの勝利です。この機能にはアクセシビリティに関する懸念がいくつかあり、それらが有効であるとしても、私たち開発者がそれを機能させる方法があるかもしれません。良いことは、これらすべての UI の変更により、カスタム DOM の操作や aria タグの周りのドラッグよりもはるかに簡単になっているということですが、余談になります… スクロールマーカーグループを使用してマーカーを自動的にグループ化し、アンカー位置を使用してボタンのスタイルを設定して、ボタンを希望の場所に正確に配置できるようになりました。
.カルーセル { オーバーフロー-x: 自動; スクロールマーカーグループ: 後; /* ドットのコンテナを作成します */
/* ボタンを作成します */ &::スクロールボタン(インラインエンド)、&::スクロールボタン(インラインスタート) { 内容: " "; 位置: 絶対; /* アンカーの位置を使用して中央に配置します */ 位置アンカー: --カルーセル; 上: アンカー(中央); }
/* 子にマーカーを作成します */ ディビジョン { &::スクロールマーカー { 内容: " "; 幅: 24px; 境界半径: 50%; カーソル: ポインタ; } /* アクティブなマーカーを強調表示します */ &::スクロールマーカー:ターゲット現在 { 背景: 白; } } }
デモ: ボタンの配置にアンカーの位置を使用して、純粋に HTML と CSS からカルーセルを作成する実験です。
utilitybend による Pen Carousel Pure HTML および CSS [フォーク] を参照してください。
デモ: attr() を使用して背景画像を動的にマーカーに取り込む Web ショップの滑らかなスライダーのリメイク。
utilitybend による Pen Webshop の滑らかなスライダーを CSS [フォーク] でリメイクしたものを参照してください。 状態のクエリ: 粘着性のあるものがスタックしていますか?スナップされたものはスナップされましたか？ 長い間、私たちは IntersectionObserver のハッキングに頼らずに、「粘着性のあるものが引っかかっている」かどうか、または「スナップ状のアイテムが折れている」かどうかを知ることができませんでした。 Chrome 133 ではスクロール状態クエリが導入され、これらの状態を宣言的にクエリできるようになりました。 container-type:scroll-state を設定することで、子がスタックしているか、スナップされているか、オーバーフローしているかに基づいて子のスタイルを設定できるようになりました。これは、CSS Day 2023 以来私が待ち望んでいた大幅な「生活の質」の向上です。スクロールの方向も確認できるようになったため、さらに大幅に進化しました。素晴らしいですね。 簡単な例として、ヘッダーが実際にビューポートの上部に付着している場合にのみ、最終的にヘッダーにシャドウを適用できます。 .header-container { コンテナタイプ: スクロール状態; 位置: スティッキー; トップ: 0;
ヘッダー { トランジション: ボックスシャドウ 0.5 秒イーズアウト。 /* クエリはコンテナの状態をチェックします */ @container スクロール状態(スタック: トップ) { ボックスシャドウ: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px; } } }
デモ: 実際に貼り付けられた場合にのみシャドウを適用するスティッキー ヘッダー。
スクロール状態クエリを使用したペン スティッキー ヘッダーを参照して、スティッキー要素がユーティリティベンドによってスタック [フォーク] されているかどうかを確認します。
デモ: スクロール状態クエリとアンカー位置を組み合わせて、現在スナップされているキャラクターの上にフレームを移動する、ポケモンをテーマにしたリスト。
どの項目が CSS でスナップされているかを確認するには、Pen Scroll-state クエリを参照してください。ポケモン バージョンは、utilitybend によって [フォーク] されています。 最適化された人間工学: CSS のロジック CSS Wrapped の「最適化された人間工学」セクションでは、ワークフローをより直感的にする機能を強調しています。ロジックの記述方法を変革するものとして、次の 3 つの機能が際立っています。
if() ステートメントついに CSS で条件文を取得できるようになりました。 if() 関数はスタイルシートの三項演算子のように機能し、メディア、サポート、またはスタイル クエリに基づいて値をインラインで適用できるようにします。これにより、単一のプロパティを変更するための冗長な @media ブロックの必要性が軽減されます。 @function 関数ついに一部のロジックを別の場所に移動することができ、その結果、ファイルがよりクリーンになり、真の品質機能が実現します。 sibling-index() および sibling-count() これらのツリーカウント関数は、リスト サイズに基づいてアニメーションをずらしたり、項目をスタイル設定したりする問題を解決します。 「CSS を使用した兄弟のスタイリングがかつてないほど簡単になりました」で説明したように、これにより、HTML にカスタム プロパティ (--index: 1 など) をハードコーディングする必要がなくなります。
例: レイアウトの計算 簡潔な数式を書くことができるようになりました。たとえば、画面に入るカードのアニメーションをずらすことは簡単になります。 .card-container > * { アニメーション: 0.6 秒のイーズアウト フォワードを明らかにします。 /* 手動で --index 変数を使用する必要はもうありません。 */ アニメーション遅延: calc(sibling-index() * 0.1s); }
JavaScript を使用せずに、これらの関数を三角関数と組み合わせて使用して、アイテムを完全な円の中に配置する実験もしました。
デモ: カード アニメーションを動的にずらします。
utilitybend による sibling-index() [forked] を使用したペン スタッガー カードを参照してください。
デモ: sibling-index、sibling-count、および新しい CSS @function 機能を使用してアイテムを正円内に配置します。
sibling-index、sibling-count、およびutilitybendによって[フォークされた]関数を使用するペンの円を参照してください。 私の CSS To-Do リスト: 試してみたい機能 私は選択とトランジションのスカルプトに忙しい一方で、「CSS Wrapped 2025」レポートには、まだ CodePen で起動する機会がなかった他の優れた機能が満載されています。これらは、次の実験のリストの上位にあります。 アンカーされたコンテナのクエリ カルーセルのデモではボタンに CSS アンカー位置を使用しましたが、「CSS ラップ」によりボタンが強調表示されます。これの進化版: アンカー コンテナ クエリ。これにより、ツールチップに関する誰もが抱えていた問題が解決されます。スペースの制約によりブラウザがツールチップを上から下に反転すると、「矢印」が間違った方向を指したままになることがよくあります。アンカー付きコンテナー クエリ (@containeranchored(fallback:flip-block)) を使用すると、ブラウザーが実際に選択したフォールバック位置に基づいて要素のスタイルを設定できます。 ネストされたビュー遷移グループ ビュー トランジションは革命でしたが、特定のトレードオフも伴いました。要素ツリーが平坦化され、3D 変換やオーバーフロー、クリップが壊れることがよくありました。いつも何かが足りないと感じていましたが、これがその答えなのかもしれません。 view-transition-group:nearest を使用すると、最終的に遷移グループを相互に入れ子にすることができます。 これにより、トランジション中にクリッピング効果や 3D 回転を維持できるようになります。要素が最上位まで引き上げられていたため、これまでは不可能でした。 .card img { ビュー遷移名: 写真; ビュー遷移グループ: 最も近い; /* ネストしたままにしておきます。 */ }
タイポグラフィーと形状 最後に、私の人間工学者は、テキスト ボックス トリムを試してみたくてうずうずしています。これは、テキスト コンテンツ (先頭) の上下にある煩わしい余分な空白を削除して、最終的に完全な垂直方向の配置を実現することを約束します。またクリエイティブ面では、corner-shape とshape() 関数により非長方形のレイアウトが可能になり、CSS 変数に応答する「四角形」や複雑なパスが可能になります。とはいえ、スクワクルだらけのデザインが待ちきれません！ 希望に満ちた未来 私たちは、CSS が、以前は JavaScript に属していたロジック、状態、複雑なインタラクションを処理できるようになっている世界を目の当たりにしています。 moveBefore (iframe/video の DOM 状態を保持) や attr() (色やグリッドに文字列を超えた型を使用) などの機能が、この現実をさらに強化します。 これらの機能の一部は現在実験的または Chrome 固有のものですが、その勢いは否定できません。これらの機能がベースラインとなるよう、Interop などの取り組みを通じてすべてのブラウザーでのサポートが継続されることを期待する必要があります。そうは言っても、ブラウザ エンジンを搭載することは、これらすべての優れた機能を「Chrome ファースト」で搭載することと同じくらい重要です。これらの新機能は、ブラウザーに導入される前に、議論し、調整し、テストする必要があります。 CSS を始めるのは素晴らしい瞬間です。私たちはもはや文書のスタイルを整えるだけではありません。私たちは、これまで以上に強力なネイティブ ツールキットを使用して、動的で人間工学に基づいた堅牢なアプリケーションを作成しています。 新しい時代に乗り出し、情報を広めていきましょう。 これはCSSラップです！
