このページは Cloud Translation API によって翻訳されました。

CSS ラップ: 2023 年

CSS Wrapped: 2023

コンテンツに移動:

アーキテクチャの基盤
三角関数
複雑な nth-* 選択
スコープ
ネスト

タイポグラフィ
Initial-letter
テキスト折り返しのバランス/プリティ

色
色レベル 4
カラーミックス機能
相対色の構文

レスポンシブデザイン
コンテナクエリ
スタイルクエリ
:セレクタ
メディアクエリを更新する
スクリプト作成メディアクエリ
透明性メディアクエリ

操作
切り替えを表示する
線形イージング関数
Scrollend
スクロールドリブンのアニメーション
遅延タイムラインの添付
離散的なプロパティ遷移
開始スタイルのルール
オーバーレイアニメーション

コンポーネント
ポップオーバー
時間の選択
ユーザーに有効/無効な疑似クラス
限定アコーディオン

結果を確認しましょう。2023 年は CSS にとって大きな年でした。

#Interop2023 から、CSS と UI の分野で多くの新しいランディングページが登場し、デベロッパーがウェブプラットフォームでは不可能だと思っていた機能を実現しています。現在、すべての最新ブラウザは、コンテナクエリ、サブグリッド、:has() セレクタ、およびさまざまな新しいカラースペースと関数をサポートしています。Chrome では、CSS のみのスクロールドリブンアニメーションと、ビュー遷移によるウェブビュー間のスムーズなアニメーション化がサポートされています。さらに、CSS のネストやスコープ設定されたスタイルなど、デベロッパーエクスペリエンスを向上させるための新しいプリミティブが多数追加されています。

今年は大変な 1 年でした。そこで、このマイルストーンの一年を締めくくることにし、これらすべてを達成できたブラウザデベロッパーとウェブコミュニティの多大な努力とお礼を述べたいと思います。

アーキテクチャ基礎

まず、主要な CSS の言語と機能の更新について説明します。これらは、スタイルの作成と整理に不可欠な機能であり、デベロッパーに大きな力を与えます。

三角関数

対応ブラウザ

ソース

Chrome 111 では、三角関数 sin()、cos()、tan()、asin()、acos()、atan()、atan2() のサポートが追加され、すべての主要なエンジンで利用できるようになりました。これらの関数は、アニメーションやレイアウトに非常に便利です。たとえば、選択した中心の周りに要素を配置する作業が大幅に簡素化されました。

三角関数のデモ

詳しくは、CSS の三角関数をご覧ください。

複雑な nth-* 選択

対応ブラウザ

:nth-child() 疑似クラスセレクタを使用すると、DOM 内の要素をインデックスで選択できます。An+B マイクロ構文を使用すると、選択する要素を細かく制御できます。

デフォルトでは、:nth-*() 疑似要素はすべての子要素を考慮します。Chrome 111 以降では、必要に応じてセレクタリストを :nth-child() と :nth-last-child() に渡すことができます。これにより、An+B が処理する前に、子リストを事前にフィルタできます。

次のデモでは、of .small を使用して小さな人形を事前に除外することで、3n+1 ロジックが小さな人形にのみ適用されます。プルダウンを使用して、使用されるセレクタを動的に変更します。

複雑な nth-* 選択デモ

詳しくは、複雑な nth-* 選択をご覧ください。

スコープ

対応ブラウザ

ソース

Chrome 118 では、ドキュメントの特定のサブツリーにセレクタの一致をスコープ設定できる at ルールである @scope のサポートが追加されました。スコープ設定されたスタイル設定では、過度に具体的なセレクタを記述したり、DOM 構造に厳密に結合したりすることなく、選択する要素を非常に具体的に指定できます。

スコープ設定されたサブツリーは、スコープ設定ルート（上限）と、オプションのスコープ設定の上限（下限）によって定義されます。

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

スコープブロック内に配置されたスタイルルールは、切り出したサブツリー内の要素のみを対象とします。たとえば、次のスコープ設定されたスタイルルールは、.card 要素と [data-component] セレクタに一致するネストされたコンポーネントの間にある <img> 要素のみを対象とします。

@scope (.card) to ([data-component]) {
  img { … }
}

次のデモでは、適用されたスコープ制限により、カルーセルコンポーネント内の <img> 要素が一致しません。

スコープのデモのスクリーンショット

スコープのライブデモ

CSS @scope デモ

@scope について詳しくは、「@scope を使用してセレクタの範囲を制限する方法」をご覧ください。この記事では、:scope セレクタ、特定度の処理方法、プレリュードのないスコープ、@scope によるカスケードの影響について説明します。

ネスト

対応ブラウザ

ソース

ネストする前は、すべてのセレクタを個別に明示的に宣言する必要がありました。これにより、重複、スタイルシートの膨大化、分散したオーサリングエクスペリエンスが発生します。セレクタを続けて、関連するスタイルルールをグループ化できるようになりました。

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

ネストスクリーンキャスト

ネストライブデモ

緩和されたネストセレクタを変更して、レースの勝者を決定する

ネストすることで、スタイルシートの重量を軽減し、セレクタの繰り返しのオーバーヘッドを削減し、コンポーネントスタイルを集中化できます。当初リリースされた構文では、さまざまな場所で & を使用する必要がありましたが、ネストの緩和された構文の更新により、この制限は解除されました。

ネストの詳細をご覧ください。

サブグリッド

対応ブラウザ

ソース

CSS subgrid を使用すると、子レイアウト間の配置を改善した、より複雑なグリッドを作成できます。これにより、グリッドの行または列の値として subgrid を使用することで、別のグリッド内にあるグリッドが、外側のグリッドの行と列を独自のものとして採用できるようになります。

サブグリッドのスクリーンキャスト

サブグリッドのライブデモ

ヘッダー、本文、フッターが、兄弟姉妹の動的なサイズに合わせて調整される。

サブグリッドは、兄弟要素を相互の動的コンテンツに揃える場合に特に便利です。これにより、コピーライター、UX ライター、翻訳者は、レイアウトに「収まる」プロジェクトのコピーを作成する必要がなくなります。サブグリッドを使用すると、コンテンツに合わせてレイアウトを調整できます。

詳しくは、サブグリッドをご覧ください。

タイポグラフィ

2023 年には、ウェブタイポグラフィに関するいくつかの重要な更新がありました。特に優れたプログレッシブエンハンスメントは text-wrap プロパティです。このプロパティを使用すると、追加のスクリプトなしでブラウザ内で合成されるタイポグラフィレイアウトの調整が可能になります。不自然な行の長さはもう必要ありません。予測可能なタイポグラフィを実現しましょう。

Initial-letter

対応ブラウザ

ソース

initial-letter プロパティは、今年の初めにリリースされる Chrome 110 で導入される、小さいながらも強力な CSS 機能です。このプロパティを使用すると、最初の文字の配置のスタイルを設定できます。文字は、ドロップ状態またはレイヤ状態のいずれかで配置できます。このプロパティは 2 つの引数を受け入れます。1 つ目は、対応する段落に文字をどの程度深く配置するかを指定し、2 つ目は、文字を段落からどの程度上に配置するかを指定するものです。次のデモのように、両方を組み合わせることもできます。

最初の文字のスクリーンショット

頭文字デモ

::first-letter 疑似要素の initial-letter の値を変更して、シフトを確認します。

詳しくは、initial-letter をご覧ください。

text-wrap: バランスと美しさ

ヘッドラインや段落の最終的なサイズやフォントサイズ、言語は、デベロッパーにはわかりません。テキストの折り返しを効果的かつ美しい方法で処理するために必要なすべての変数はブラウザにあります。ブラウザは、フォントサイズ、言語、割り当てられた領域などのすべての要素を認識しているため、高度で高品質なテキストレイアウトを処理するのに適しています。

ここで、2 つの新しいテキスト折り返し手法が登場します。1 つは balance、もう 1 つは pretty です。balance 値は、調和のとれたテキストブロックを作成することを目的としていますが、pretty は、孤立した行の発生を防ぎ、適切なハイフネーションを行うことを目的としています。これまで、これらのタスクはどちらも手動で行われていましたが、ブラウザにこの作業を任せ、翻訳されたすべての言語で機能させるのは素晴らしいことです。

テキストの折り返しのスクリーンキャスト

テキスト折り返しのライブデモ

次のデモでは、スライダーをドラッグして、見出しと段落に対する balance と pretty の効果を比較できます。デモを別の言語に翻訳してみてください。

詳しくは、text-wrap: balance をご覧ください。

色

2023 年はウェブプラットフォームの色の年でした。ダイナミックカラーテーマ設定を可能にする新しいカラースペースと関数により、ユーザーにふさわしい鮮やかで豊かなテーマを作成して、カスタマイズすることもできます。

HD 色空間（色レベル 4）

対応ブラウザ

ソース

対応ブラウザ

ソース

ハードウェアからソフトウェア、CSS から点滅するライトまで、人間の目で見る色と同じように色を表現するには、コンピュータに多くの作業が必要になることがあります。2023 年には、新しい色、より多くの色、新しいカラースペース、カラー関数、新機能が追加されます。

CSS と色で次のことが可能になりました。 - ユーザーの画面ハードウェアが広色域 HDR 色に対応しているかどうかを確認します。 - ユーザーのブラウザが Oklch や Display P3 などの色の構文を認識しているかどうかを確認します。- Oklab、Oklch、HWB、Display P3、Rec.2020、XYZ などで HDR カラーを指定します。- HDR カラーを使用したグラデーションの作成 - 代替色空間でグラデーションの補完。 - color-mix() で色を混ぜる。 - 相対色の構文を使用して色のバリエーションを作成します。

Color 4 のスクリーンキャスト

カラー 4 のデモ

次のデモでは、スライダーをドラッグして、見出しと段落に対する「バランス」と「きれい」の効果を比較できます。デモを別の言語に翻訳してみてください。

詳しくは、カラー 4 とカラースペースをご覧ください。

color-mix 関数

対応ブラウザ

ソース

色の混合は古典的なタスクですが、2023 年には CSS でも行えるようになります。白または黒を 1 つの色に組み合わせるだけでなく、透明度も組み合わせ、このすべてを任意の色空間で行うことができます。これは、基本的な色機能と高度な色機能の両方です。

color-mix() のスクリーンキャスト

color-mix() のデモ

デモでは、カラー選択ツールを使用して 2 色を選択し、カラースペースと、各色の混合比率を指定できます。

color-mix() は、グラデーションの特定の瞬間と考えることができます。グラデーションは、青から白に変化するために必要なすべてのステップを示しますが、color-mix() は 1 つのステップのみを示します。色空間を考慮し、混合色空間が結果に与える影響の程度を理解すると、さらに高度なレベルに進むことができます。

詳しくは、color-mix() をご覧ください。

相対色の構文

相対色構文（RCS）は、色のバリエーションを作成するための color-mix() を補完するメソッドです。color-mix() よりも少し強力ですが、色を扱う戦略も異なります。color-mix() は白色を混ぜて色を明るくすることができます。RCS では明るさチャネルに正確にアクセスでき、チャネルで calc() を使用して明るさをプログラムで減らしたり増やしたりできます。

RCS スクリーンキャスト

RCS ライブデモ

色を変更したり、シーンを変更したりできます。それぞれ、相対色構文を使用してベースカラーのバリエーションを作成します。

RCS では、色に対する相対操作と絶対操作を行うことができます。相対的な変更とは、彩度または明るさの現在の値を取得し、calc() で変更することを指します。絶対的な変更とは、チャンネル値をまったく新しい値に置き換える変更です（不透明度を 50% に設定するなど）。この構文を使用すると、テーマ設定やジャストインタイムバリアントなどの有用なツールを利用できます。

詳しくは、相対色の構文をご覧ください。

レスポンシブデザイン

2023 年に進化したレスポンシブデザイン。今年は、レスポンシブウェブエクスペリエンスの構築方法を完全に変えた新機能を導入し、コンポーネントベースのレスポンシブデザインの新しいモデルを導入しました。コンテナクエリと :has() を組み合わせることで、親のサイズや子の有無や状態に基づいてレスポンシブで論理的なスタイル設定を行うコンポーネントをサポートできます。つまり、ページレベルのレイアウトとコンポーネントレベルのレイアウトを分離し、ロジックを 1 回記述して、コンポーネントをどこでも使用できるようになりました。

サイズコンテナクエリ

対応ブラウザ

ソース

コンテナクエリは、ビューポートのグローバルサイズ情報を使用して CSS スタイルを適用するのではなく、ページ内の親要素のクエリをサポートします。つまり、コンポーネントのスタイルを複数のレイアウトやビューで動的に行うことができます。サイズに関するコンテナクエリは、今年のバレンタインデー（2 月 14 日）に、すべてのモダンブラウザで安定しました。

この機能を使用するには、まずクエリ対象の要素に制限を設定し、メディアクエリと同様に、サイズパラメータを指定して @container を使用してスタイルを適用します。コンテナクエリとともに、コンテナクエリのサイズも取得されます。次のデモでは、コンテナのクエリサイズ cqi（インラインコンテナのサイズを表します）を使用して、カードヘッダーのサイズを設定しています。

@container のスクリーンキャスト

@container デモ

コンテナクエリの使用の詳細を確認する。

コンテナクエリのスタイルを設定する

対応ブラウザ

ソース

Chrome 111 で部分的な実装により、スタイルクエリが実装されました。現在、スタイルクエリでは、@container style() を使用するときに親要素のカスタムプロパティの値をクエリできます。たとえば、カスタムプロパティ値が存在するかどうか、または @container style(--rain: true) などの特定の値に設定されているかどうかをクエリします。

スタイルクエリのスクリーンショット

スタイルクエリのデモ

色を変更したり、シーンを変更したりできます。それぞれが相対色の構文を使用して、ベースカラーからのバリエーションを作成します。

これは CSS でクラス名を使用する場合と似ていますが、スタイルクエリにはいくつかの利点があります。1 つ目は、スタイルクエリを使用すると、擬似状態に応じて CSS の値を必要に応じて更新できることです。また、今後のバージョンの実装では、値の範囲をクエリして、適用されるスタイル（style(60 <= --weather <= 70) など）や、プロパティ値ペアに基づくスタイル（style(font-style: italic) など）を決定できるようになります。

詳しくは、スタイルクエリの使用についての記事をご覧ください。

:has() セレクタ

対応ブラウザ

ソース

デベロッパーは 20 年近くにわたり、CSS に「親セレクタ」をリクエストしてきました。Chrome 105 でリリースされた :has() セレクタを使用すると、このことが可能になります。たとえば、.card:has(img.hero) を使用すると、子要素としてヒーロー画像を持つ .card 要素が選択されます。

:has() デモのスクリーンショット

:has() ライブデモ

CSS :has() デモ: 画像あり/画像なしのカード

:has() は相対セレクタリストを引数として受け入れるため、親要素以外のものを選択できます。さまざまな CSS コンビネーターを使用すると、DOM ツリーを上昇するだけでなく、横方向の選択もできます。たとえば、li:has(+ li:hover) は、現在カーソルを合わせている <li> 要素の前の <li> 要素を選択します。

:has() スクリーンキャスト

:has() のデモ

CSS :has() デモ: ドック

詳しくは、CSS の :has() セレクタをご覧ください。

メディアクエリを更新する

対応ブラウザ

ソース

update メディアクエリを使用すると、デバイスのリフレッシュレートに合わせて UI を適応させることができます。この機能は、さまざまなデバイスの機能に関連する fast、slow、none の値をレポートできます。

設計対象のデバイスのほとんどは、リフレッシュレートが速い傾向があります。これには、パソコンやほとんどのモバイルデバイスが含まれます。電子書籍リーダーや低電力の決済システムなどのデバイスでは、更新頻度が遅くなることがあります。デバイスがアニメーションや頻繁な更新に対応できないことを把握しておけば、バッテリーの使用量を抑え、ビューの更新エラーを防ぐことができます。

スクリーンキャストの更新

デモを更新する

ラジオオプションを選択して更新速度をシミュレートし、ダッキングへの影響を確認します。

@media（更新）の詳細をご覧ください。

メディアクエリのスクリプト化

対応ブラウザ

ソース

スクリプトメディアクエリを使用すると、JavaScript を使用できるかどうかを確認できます。プログレッシブエンハンスメントに適しています。このメディアクエリが導入される前は、JavaScript が利用可能かどうかを検出するには、HTML に nojs クラスを配置し、JavaScript で削除していました。CSS で JavaScript を検出して適切に調整できるようになりました。そのため、これらのスクリプトは削除できます。

詳しくは、Chrome DevTools でテスト用にページで JavaScript を有効または無効にする方法をご覧ください。

スクリプトスクリーンキャスト

スクリプティングのデモ

たとえば、ウェブサイトのテーマの切り替えを考えてみましょう。JavaScript が利用できないため、メディアクエリスクリプトを作成することで、システム環境設定に対して切り替えを機能させることができます。また、switch コンポーネントについて考えてみましょう。JavaScript が利用可能な場合、スイッチはオンとオフを切り替えるだけでなく、ジェスチャーでスワイプできます。スクリプトが使用可能であれば UX をアップグレードできる一方で、スクリプトが無効になっている場合でも、有意義な基礎的なエクスペリエンスが提供されることはたくさんあります。

詳しくは、スクリプトをご覧ください。

透明性の低いメディアクエリ

対応ブラウザ

ソース

不透明でないインターフェースは、さまざまな種類の視覚障がいのあるユーザーに頭痛や視覚的な負担をもたらす可能性があります。そのため、Windows、macOS、iOS には、UI の透明度を下げたり、表示を消したりできるシステム環境設定があります。prefers-reduced-transparency のこのメディアクエリは、他の設定メディアクエリとよく合います。これにより、ユーザーに合わせて調整しながら、クリエイティブな表現を実現できます。

透明度を下げるスクリーンキャスト

透明度の低下のデモ

コンテンツが他のコンテンツをオーバーレイしていない代替のレイアウトを提供できる場合もあります。他のケースでは、色の不透明度を調整して、不透明またはほぼ不透明にすることができます。ユーザーの設定に適応する、より刺激的なデモについては、次のブログ投稿をご覧ください。このメディアクエリが有用な場面について詳しく知りたい場合は、ぜひご覧ください。

詳しくは、@media（prefers-reduced-transparency）をご覧ください。

操作

インタラクションはデジタルエクスペリエンスの基礎です。何をクリックしたかや、自分が仮想空間のどこにいるかについて、ユーザーがフィードバックを得ることができます。今年は多くの優れた機能が登場し、インタラクションの作成と実装が容易になり、スムーズなユーザージャーニーとより洗練されたウェブエクスペリエンスが実現しました。

切り替えを表示する

対応ブラウザ

ソース

ビューの遷移は、ページのユーザーエクスペリエンスに大きな影響を与えます。View Transitions API を使用すると、シングルページアプリケーションの 2 つのページ状態間の視覚的な遷移を作成できます。切り替えとは、ページ全体を移行する場合もあれば、リストへの新しいアイテムの追加や削除など、ページ上の小さな切り替えを行う場合もあります。

View Transitions API の中核となるのは document.startViewTranstion 関数です。DOM を新しい状態に更新する関数を渡すと、API がすべての処理を行います。前後のスナップショットを撮影し、2 つのスナップショットを切り替えることで、この効果を実現します。CSS を使用して、キャプチャする内容を制御し、必要に応じてこれらのスナップショットのアニメーション方法をカスタマイズできます。

VT スクリーンキャスト

VT のデモ

遷移のデモを見る

シングルページアプリケーション用の View Transitions API をリリース（Chrome 111）詳しくは、ビューの切り替えをご覧ください。

リニアイージング関数

対応ブラウザ

この関数の名前に惑わされないでください。linear() 関数（linear キーワードと混同しないでください）を使用すると、精度が低下するという妥協点はあるものの、複雑なイージング関数を簡単に作成できます。

Chrome 113 でリリースされた linear() より前は、CSS でバウンスエフェクトやスプリングエフェクトを作成することはできませんでした。linear() を使用すると、これらのイージングを一連のポイントに簡素化し、これらのポイント間で線形補間することで、これらのイージングを近似できます。

複数のドットが追加されたバウンスイージングカーブのグラフ — 元の青いバウンス曲線は、緑色で示された一連のキーポイントによって簡略化されています。`linear()` 関数はこれらの点を使用して、それらの点間を直線的に補間します。

線形イージングスクリーンキャスト

リニアイージングのデモ

CSS linear() のデモ

詳しくは、linear() をご覧ください。linear() カーブを作成するには、リニアイージングジェネレータを使用します。

スクロール終了

対応ブラウザ

ソース

多くのインターフェースにはスクロール操作が含まれており、現在のスクロール位置に関連する情報を同期したり、現在の状態に基づいてデータを取得したりする必要があります。scrollend イベントが発生する前は、不正確なタイムアウトメソッドを使用する必要がありました。このようなメソッドは、ユーザーの指が画面に残ったままのときに呼び出される可能性がありました。scrollend イベントを使用すると、ユーザーがジェスチャーを行っているかどうかを把握できる、タイミングが完璧な scrollend イベントを取得できます。

スクロールスクリーンキャスト

スクロールデモ

これはブラウザが所有することが重要でした。JavaScript はスクロール中の画面上の指の存在をトラッキングできないため、その情報は単純に利用できません。スクロール終了を試行する不正確なコードのチャンクを削除して、ブラウザが所有する高精度イベントに置き換えられるようになりました。

詳しくは、scrollend をご覧ください。

スクロールドリブンのアニメーション

対応ブラウザ

ソース

スクロールドリブンアニメーションは、Chrome 115 で利用できる魅力的な機能です。既存の CSS アニメーションや Web Animations API で作成されたアニメーションを、スクローラーのスクロールオフセットに関連付けることができます。上下にスクロールするか、横方向のスクロールの場合は左右にスクロールすると、リンクされたアニメーションが直接反応して前後にスクラブされます。

次のデモに示すように、scrollTimeline を使用してスクローラーの全体的な進行状況を追跡できます。ページの最後までスクロールすると、テキストが文字単位で表示されます。

SDA スクリーンキャスト

SDA デモ

CSS スクロールドリブンアニメーションのデモ: スクロールタイムライン

ViewTimeline では、スクロールポートを通過する要素を追跡できます。これは、IntersectionObserver が要素をトラッキングする方法と同様に機能します。次のデモでは、各画像がスクロールポートに入った瞬間から中央に表示されるまで表示されます。

SDA デモのスクリーンキャスト

SDA ライブデモ

CSS スクロールドリブンアニメーションのデモ: タイムラインを表示する

スクロールドリブンアニメーションは CSS アニメーションと Web Animations API で動作するため、これらの API がもたらすすべてのメリットを利用できます。これには、これらのアニメーションをメインスレッド以外で実行する機能も含まれます。わずか数行のコードを追加するだけで、スクロールによって動作し、メインスレッドから離れるような、滑らかなアニメーションを実現できるようになりました。

スクロールドリブンアニメーションについて詳しくは、詳細を記載したこちらの記事をご覧ください。また、scroll-driven-animations.style には、多くのデモが含まれています。

遅延タイムラインの添付

対応ブラウザ

ソース

CSS でスクロールドリブンアニメーションを適用する場合、制御対象のスクロール要素を検索するルックアップメカニズムは常に DOM ツリーを上昇するため、スクロールアンセスターに限定されます。ただし、アニメーション化が必要な要素がスクロールの子は、まったく別のサブツリーにある要素であることが多いです。

アニメーション要素が祖先以外の名前付きスクロールタイムラインを見つけられるようにするには、共有親の timeline-scope プロパティを使用します。これにより、その名前で定義された scroll-timeline または view-timeline をアタッチできるようになり、スコープが広がります。これで、その共有親のすべての子はその名前のタイムラインを使用できるようになります。

共通の親でタイムラインスコープが使用されている DOM サブツリーの可視化 — 共有親で宣言された `timeline-scope` を使用すると、スクロールで宣言された `scroll-timeline` は、それを `animation-timeline` として使用する要素で見つけることができます。

スクリーンキャストのデモ

ライブデモ

CSS スクロールドリブンアニメーションのデモ: タイムラインの遅延アタッチメント

詳細については、timeline-scope をご覧ください。

離散プロパティのアニメーション

2023 年の新機能として、display: none との間でアニメーション化など、個別のアニメーションをアニメーション化できる機能も追加されます。Chrome 116 以降では、キーフレームルールで display と content-visibility を使用できます。連続型プロパティは、0% ではなく 50% の時点で遷移することもできます。これは、allow-discrete キーワードを使用して transition-behavior プロパティで、または省略形として transition プロパティで実現できます。

個別アニメーションスクリーンキャスト

個別アニメーションデモ

個別のアニメーションの遷移の詳細をご覧ください。

@starting スタイル

対応ブラウザ

ソース

CSS の @starting-style ルールは、display: none との間でアニメーション化するための新しいウェブ機能を基盤としています。このルールを使用すると、要素に「開く前」のスタイルを指定できます。これにより、ブラウザは要素がページ上で開く前にそのスタイルを参照できます。これは、入力アニメーションや、ポップオーバーやダイアログなどの要素内でのアニメーション化に非常に便利です。また、要素を作成するときに、アニメーションで表示したい場合にも便利です。次の例では、ビューポートの外側から popover 属性（次のセクションを参照）をビューにスムーズに表示し、最上位レイヤに表示します。

@starting-style スクリーンキャスト

@starting-style のデモ

@starting-style やその他のエントリアニメーションの詳細を確認する。

オーバーレイ

対応ブラウザ

ソース

新しい CSS overlay プロパティを遷移に追加すると、トップレイヤスタイル（popover や dialog など）を持つ要素をトップレイヤからスムーズにアニメーション化できます。オーバーレイを遷移させないと、要素はすぐにクリップ、変形、覆い隠し状態に戻り、遷移は表示されません。同様に、overlay を使用すると、::backdrop を最上位レイヤ要素に追加したときに、::backdrop をスムーズにアニメーション化できます。

オーバーレイスクリーンキャスト

オーバーレイライブデモ

詳しくは、オーバーレイやその他の終了アニメーションをご覧ください。

コンポーネント

2023 年は、スタイルと HTML コンポーネントの融合にとって大きな年でした。popover がリリースされ、アンカーの配置とプルダウンのスタイル設定の将来について多くの作業が行われました。これらのコンポーネントを使用すると、追加のライブラリに依存したり、独自の状態管理システムを毎回ゼロから構築したりすることなく、一般的な UI パターンを簡単に構築できます。

対応ブラウザ

ソース

Popover API を使用すると、ページの他の部分の上に重ねて表示される要素を作成できます。たとえば、メニュー、選択、ツールチップなどです。シンプルなポップオーバーを作成するには、ポップアップする要素に popover 属性と id を追加し、その id 属性を呼び出しボタンに popovertarget="my-popover" で接続します。Popover API は、以下をサポートしています。

最上位レイヤへの昇格。ポップオーバーはページの残りの部分の上に別のレイヤで表示されるため、Z-Index を調整する必要はありません。
ライトを消す機能。ポップオーバー領域の外側をクリックすると、ポップオーバーが閉じてフォーカスが戻ります。
デフォルトのフォーカス管理。ポップオーバーを開くと、そのポップオーバー内で次のタブが停止します。
ユーザー補助対応のキーボードバインド。esc キーを押すか、ダブルタップするとポップオーバーが閉じてフォーカスが戻ります。
アクセス可能なコンポーネントバインディング。ポップオーバー要素をポップオーバートリガーに意味的に接続する。

選択内の横方向のルール

今年 Chrome と Safari に追加された HTML のもう一つの小さな変更は、水平方向のルール要素（<hr> タグ）を <select> 要素に追加して、コンテンツを視覚的に分割できるようにする機能です。以前は、select に <hr> タグを配置するだけではレンダリングされませんでした。しかし今年、Safari と Chrome の両方がこの機能をサポートし、<select> 要素内のコンテンツをより適切に分離できるようになりました。

スクリーンショットを選択

Chrome のライトモードとダークモードで選択した HR のスクリーンショット

ライブデモを選択する

詳しくは、select で hr を使用するをご覧ください。

:ユーザー有効な疑似クラスと無効な疑似クラス

対応ブラウザ

ソース

:user-valid と :user-invalid は、今年すべてのブラウザで安定しており、:valid と :invalid の疑似クラスと同様に動作しますが、ユーザーが入力を大幅に操作した後にのみフォームコントロールと一致します。必須で空のフォームコントロールは、ユーザーがページの操作を開始していなくても :invalid と一致します。ユーザーが入力を変更して無効な状態にしない限り、同じコントロールは :user-invalid と一致しません。

これらの新しいセレクタを使用すると、ユーザーが変更した入力を追跡するためのステートフルコードを記述する必要がなくなります。

:user-* スクリーンキャスト

:user-* ライブデモ

詳しくは、user-* フォーム検証疑似要素の使用をご覧ください。

限定のアコーディオン

対応ブラウザ

ウェブの一般的な UI パターンは、アコーディオンコンポーネントです。このパターンを実装するには、複数の <details> 要素を組み合わせます。多くの場合、それらがグループに属することを視覚的に示すために、それらをグループ化します。

Chrome 120 の新機能として、<details> 要素の name 属性がサポートされました。この属性を使用すると、同じ name 値を持つ複数の <details> 要素がセマンティックグループを形成します。グループ内の要素は一度に 1 つだけ開くことができます。グループ内の <details> 要素のいずれかを開くと、以前に開いていた要素は自動的に閉じます。このタイプのアコーディオンは排他的アコーディオンと呼ばれます。

限定のアコーディオンデモ

排他的アコーディオンの一部である <details> 要素は、必ずしも兄弟である必要はありません。ドキュメント全体に散らばっている場合があります。

まとめ

CSS はここ数年、特に 2023 年に復活を遂げました。CSS を初めて使用する場合や基本を復習したい場合は、CSS について学ぶの無料コースや、web.dev で提供されている他の無料コースをご覧ください。

良いお年をお迎えください。また、これらの優れた新しい CSS と UI の機能を、今後の制作にご活用いただければ幸いです。

Chrome UI DevRel チーム

Una Kravets

Bramus

Adam Argyle

CSS ラップ: 2023 年

CSS Wrapped: 2023

スコープのデモのスクリーンショット

スコープのライブデモ

ネスト スクリーンキャスト

ネスト ライブデモ

サブグリッドのスクリーンキャスト

サブグリッドのライブデモ

タイポグラフィ

最初の文字のスクリーンショット

頭文字デモ

テキストの折り返しのスクリーンキャスト

テキスト折り返しのライブデモ

Color 4 のスクリーンキャスト

カラー 4 のデモ

color-mix() のスクリーンキャスト

color-mix() のデモ

RCS スクリーンキャスト

RCS ライブデモ

@container のスクリーンキャスト

@container デモ

スタイルクエリのスクリーンショット

スタイルクエリのデモ

:has() デモのスクリーンショット

:has() ライブデモ

:has() スクリーンキャスト

:has() のデモ

スクリーンキャストの更新

デモを更新する

スクリプト スクリーンキャスト

スクリプティングのデモ

透明度を下げるスクリーンキャスト

透明度の低下のデモ

VT スクリーンキャスト

VT のデモ

線形イージング スクリーンキャスト

リニア イージングのデモ

スクロール スクリーンキャスト

スクロール デモ

SDA スクリーンキャスト

SDA デモ

SDA デモのスクリーンキャスト

SDA ライブデモ

スクリーンキャストのデモ

ライブデモ

個別アニメーションスクリーンキャスト

個別アニメーションデモ

@starting-style スクリーンキャスト

@starting-style のデモ

オーバーレイ スクリーンキャスト

オーバーレイ ライブデモ

ポップオーバーのスクリーンキャスト

ポップオーバーのライブデモ

スクリーンショットを選択

ライブデモを選択する

:user-* スクリーンキャスト

:user-* ライブデモ

ネストスクリーンキャスト

ネストライブデモ

スクリプトスクリーンキャスト

線形イージングスクリーンキャスト

リニアイージングのデモ

スクロールスクリーンキャスト

スクロールデモ

オーバーレイスクリーンキャスト

オーバーレイライブデモ