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

CSS ラップ: 2023 年

CSS Wrapped: 2023

コンテンツに移動:

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

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

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

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

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

コンポーネント
ポップオーバー
Hr in select
ユーザーが有効または無効にできる疑似クラス
限定の折りたたみ式

結果を確認しましょう。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 でも行えるようになります。白や黒を色に混ぜ込むだけでなく、透明度も混ぜ込むことができます。また、任意のカラースペースでこれらの操作を行うことができます。これは基本的な色機能と高度な色機能の両方です。

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 を使用できないため、スクリプトメディアクエリを使用すると、システム設定に反して切り替えを行うことができます。スイッチコンポーネントも同様です。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 年のもう 1 つの新機能は、display: none との間でアニメーション化など、個別のアニメーションをアニメーション化できる機能です。Chrome 116 以降では、キーフレームルールで display と content-visibility を使用できます。連続型プロパティは、0% ではなく 50% の時点で遷移することもできます。これは、allow-discrete キーワードを使用して transition-behavior プロパティで、または省略形として transition プロパティで実現できます。

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

個別アニメーションデモ

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

@starting-style

対応ブラウザ

ソース

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

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

@starting-style のデモ

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

オーバーレイ

対応ブラウザ

ソース

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

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

オーバーレイライブデモ

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

コンポーネント

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

対応ブラウザ

ソース

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

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

選択内の横方向のルール

また、今年 Chrome と Safari で HTML に追加された小さな変更として、<select> 要素に水平線要素（<hr> タグ）を追加して、コンテンツを視覚的に分割できるようになりました。以前は、セレクタに <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-* ライブデモ

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

ネストライブデモ

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

リニアイージングのスクリーンキャスト

リニアイージングのデモ

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

スクロールデモ

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

オーバーレイライブデモ