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

CSS と UI の新機能: I/O 2023 Edition

Una Kravets

Bramus

Adam Argyle

ここ数か月は、ウェブ UI の黄金時代でした。新しいプラットフォーム機能は、クロスブラウザで緊密に採用されており、これまで以上に多くのウェブ機能とカスタマイズ機能をサポートしています。

以下に、最近リリースされた、または近日提供予定の、最もエキサイティングで影響力のある 20 の機能をご紹介します。

コンテナクエリ
スタイルクエリ
:has() セレクタ
nth-of マイクロ構文
text-wrap: balance
initial-letter
動的ビューポート単位
広色域の色空間
color-mix()
ネスト
レイヤをカスケードする
スコープ設定されたスタイル
三角関数
個々の変換プロパティ
ポップオーバー
アンカーの配置
selectmenu
離散的なプロパティ遷移
スクロールドリブンのアニメーション
切り替えを表示する

新しいレスポンシブ

では、レスポンシブデザインの新しい機能について説明しましょう。新しいプラットフォーム機能により、レスポンシブなスタイル設定情報を所有するコンポーネントを使用して論理インターフェースを構築したり、システム機能を活用してよりネイティブな UI を提供するインターフェースを構築したり、ユーザー設定クエリを使用してユーザーがデザインプロセスに参加できるようにしたりして、完全なカスタマイズを実現できます。

コンテナクエリ

対応ブラウザ

ソース

コンテナクエリは最近、すべての最新ブラウザで安定するようになりました。親要素のサイズとスタイルをクエリして、子要素に適用するスタイルを決定できます。メディアクエリはビューポートの情報にのみアクセスして利用できるため、ページレイアウトのマクロビューでのみ機能します。一方、コンテナクエリは、任意の数のレイアウトやレイアウト内のレイアウトをサポートできる、より正確なツールです。

次の受信トレイの例では、[メインの受信トレイ] サイドバーと [お気に入り] サイドバーの両方がコンテナです。メール内のメールは、利用可能なスペースに基づいてグリッドレイアウトを調整し、メールのタイムスタンプを表示または非表示にします。これはページ内のまったく同じコンポーネントですが、表示されるビューが異なります。

コンテナクエリがあるため、これらのコンポーネントのスタイルは動的に変更されます。ページサイズとレイアウトを調整すると、コンポーネントは個別に割り当てられたスペースに応答します。サイドバーがスペースの広いトップバーになり、レイアウトがメインの受信トレイに近づきます。スペースが少ない場合は、両方とも圧縮形式で表示されます。

コンテナクエリと論理コンポーネントの構築の詳細については、こちらの投稿をご覧ください。

スタイルクエリ

対応ブラウザ

ソース

コンテナのクエリ仕様では、親コンテナのスタイル値をクエリすることもできます。現在、これは Chrome 111 で部分的に実装されており、CSS カスタムプロパティを使用してコンテナスタイルを適用できます。

次の例では、カスタムプロパティ値に保存されている天気特性（雨、晴れ、曇りなど）を使用して、カードの背景とインジケーターアイコンのスタイルを設定します。

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

天気カードのデモ。

スタイルクエリは、これからさらに進化していきます。今後、カスタムプロパティ値が存在するかどうかを判断し、コードの重複を減らすブール値クエリが導入される予定です。また、値の範囲に基づいてスタイルを適用する範囲クエリも現在検討中です。これにより、雨や雲量の確率にパーセンテージ値を使用して、ここで示したスタイルを適用できるようになります。

詳細とその他のデモについては、スタイルクエリに関するブログ投稿をご覧ください。

`:has()`

対応ブラウザ

ソース

強力な動的機能といえば、:has() セレクタは、最新のブラウザに導入された最も強力な新しい CSS 機能の 1 つです。:has() を使用すると、親要素に特定の子要素が含まれているかどうか、またはそれらの子要素が特定の状態にあるかどうかを確認して、スタイルを適用できます。つまり、基本的に親セレクタが作成されたことになります。

コンテナクエリの例を基に、:has() を使用してコンポーネントをさらに動的にすることができます。「star」要素を含むアイテムにはグレーの背景が適用され、チェックボックスがオンになっているアイテムには青い背景が適用されます。

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

この API は親の選択に限定されません。親内の子要素にスタイルを適用することもできます。たとえば、アイテムにスター要素が含まれている場合、タイトルは太字になります。これは .item:has(.star) .title で行います。:has() セレクタを使用すると、親要素、子要素、さらには兄弟要素にもアクセスできるため、非常に柔軟な API となり、新しいユースケースが日々生まれています。

注: 大規模な DOM ツリーでレンダリングパフォーマンスが低下しないようにするには、このセレクタのスコープをできるだけ狭くすることをおすすめします。たとえば、:has() を使用してルート HTML 要素の一致を確認するよりも、ナビゲーションバーや、ツリーが小さいカード要素で一致を確認するほうが時間がかかります。

詳細とデモについては、:has() に関するこちらのブログ投稿をご覧ください。

nth-of 構文

対応ブラウザ

ウェブプラットフォームに、より高度な nth-child 選択が追加されました。高度な nth-child 構文では、新しいキーワード（of）が使用できます。これにより、An+B の既存のマイクロ構文を使用して、検索対象のより具体的なサブセットを指定できます。

特別なクラスに通常の nth-child（:nth-child(2) など）を使用すると、ブラウザは、クラス special が適用され、2 番目の子である要素を選択します。これは、まずすべての .special 要素を事前フィルタしてから、そのリストから 2 番目の要素を選択する :nth-child(2 of .special) とは対照的です。

この機能について詳しくは、n 番目の構文に関する記事をご覧ください。

`text-wrap: balance`

スタイル内にロジックを埋め込むのは、セレクタとスタイルクエリだけではありません。タイポグラフィもその 1 つです。Chrome 114 以降では、text-wrap プロパティに値 balance を指定して、見出しにテキストの折り返しのバランス調整を使用できます。

デモを試す

テキストをバランスよく配置するため、ブラウザは、行が追加されないように最小の幅を二分探索で効率的に探し、1 つの CSS ピクセル（ディスプレイピクセルではない）で停止します。二分探索のステップをさらに最小限に抑えるために、ブラウザは平均行幅の 80% から開始します。

デモを試す

詳しくは、こちらの記事をご覧ください。

`initial-letter`

対応ブラウザ

ソース

ウェブタイポグラフィの改善点として、initial-letter もあります。この CSS プロパティを使用すると、インセットドロップキャップのスタイルをより細かく制御できます。

:first-letter 疑似要素で initial-letter を使用して、占有する行数に基づく文字のサイズを指定します。文字のブロックオフセット（文字の配置場所の「シンク」）。

intial-letter の使用方法について詳しくは、こちらをご覧ください。

動的ビューポートユニット

対応ブラウザ

ウェブデベロッパーが直面するよくある問題として、特にモバイルデバイスで、正確で一貫したフルビューポートのサイズ設定があります。デベロッパーとしては、100vh（ビューポートの高さの 100%）を「ビューポートと同じ高さ」と解釈したいのですが、vh 単位ではモバイルでのナビゲーションバーの収納などの要素が考慮されないため、長くなりすぎてスクロールが発生することがあります。

スクロールバーが多すぎる

この問題を解決するため、ウェブプラットフォームに新しい単位値が追加されました。たとえば、アクティブなビューポートの最小サイズを表す小さなビューポートの高さと幅（svh と svw）などです。- 大きなビューポートの高さと幅（lvh と lvw）。最大サイズを表します。- 動的ビューポートの高さと幅（dvh と dvw）。

動的ビューポートユニットの値は、上部のアドレスバーや下部のタブバーなど、追加の動的ブラウザツールバーが表示されている場合と表示されていない場合で異なります。

新しいビューポートユニットの可視化

これらの新しい単位について詳しくは、大、小、動的ビューポート単位をご覧ください。

広色域の色空間

対応ブラウザ

ソース

ウェブプラットフォームに新たに追加された重要な機能として、広色域カラースペースがあります。ウェブプラットフォームで広色域が利用可能になる前は、鮮やかな色の写真は撮影できても、最新のデバイスで表示できるボタン、テキストの色、背景は得られませんでした。

広色域と狭色域を切り替える一連の画像が表示され、色の鮮明さとその効果を示しています。
実際に試してみる

しかし、現在、ウェブプラットフォームには REC2020、P3、XYZ、LAB、OKLAB、LCH、OKLCH など、さまざまな新しい色空間が用意されています。新しいウェブカラー空間などについては、HD カラーガイドをご覧ください。

さまざまな色の 5 つの三角形が重ねられており、新しい各色空間の関係とサイズを示しています。

DevTools では、色域がどのように拡大されたかを確認できます。白い線は、sRGB の範囲の終了点と、より広い色域の範囲の開始点を示しています。

カラー選択ツールに色域線が表示された DevTools。

カラーには、他にも多くのツールがあります。グラデーションの大幅な改善も見逃さないでください。Adam Argyle が作成した新しいツールでは、新しいウェブカラー選択ツールとグラデーションビルダーをお試しいただけます。gradient.style でぜひお試しください。

color-mix()

対応ブラウザ

ソース

拡張色空間を拡張するのが color-mix() 関数です。この関数は、2 つの色値を混合して、混合される色のチャネルに基づいて新しい値を作成できます。混合する色空間が結果に影響します。oklch などの知覚色空間で作業すると、srgb とは異なる色域が使用されます。

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

7 つの色空間（srgb、linear-srgb、lch、oklch、lab、oklab、xyz）がそれぞれ異なる結果を示しています。多くの場合、ピンクや紫色で、実際に青色のままであるものはほとんどありません。 — デモを試す

color-mix() 関数は、長い間リクエストされていた機能（不透明な色値を保持しながら透明度を追加する機能）を提供します。ブランドのカラー変数を使用して、さまざまな不透明度で色のバリエーションを作成できるようになりました。色と透明を混ぜ合わせることで、この効果を実現できます。ブランドカラーの青を 10% 透明にすると、90% 不透明のブランドカラーになります。これにより、カラーシステムをすばやく構築できます。

この機能は、Chrome DevTools のスタイルペインで、プレビュー用ベン図アイコンとして確認できます。

ベン図のカラーミックスアイコンが表示された DevTools のスクリーンショット

その他の例と詳細については、color-mix に関するブログ投稿をご覧ください。また、color-mix() の演習環境をお試しください。

CSS の基礎

ユーザーにとって明確なメリットがある新しい機能を構築することも重要ですが、Chrome に導入される機能の多くは、デベロッパーエクスペリエンスの向上と、より信頼性が高く整理された CSS アーキテクチャの構築を目的としています。これらの機能には、CSS のネスト、カスケードレイヤ、スコープ設定されたスタイル、三角関数、個々の変換プロパティが含まれます。

ネスト

対応ブラウザ

ソース

CSS ネスト機能は、Sass で人気があり、CSS デベロッパーからのリクエストが長年多かった機能の 1 つです。この機能が、ついにウェブプラットフォームに導入されます。ネストを使用すると、デベロッパーは冗長性を減らすために、より簡潔でグループ化された形式で記述できます。

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

メディアクエリをネストすることもできます。つまり、コンテナクエリをネストすることもできます。次の例では、カードのコンテナに十分な幅がある場合、カードが縦向きレイアウトから横向きレイアウトに変更されます。

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

flex へのレイアウト調整は、コンテナに 480px 以上のインラインスペースが使用可能な場合に行われます。条件が満たされると、ブラウザは新しいディスプレイスタイルを適用します。

詳細と例については、CSS のネストに関する投稿をご覧ください。

レイヤをカスケードする

対応ブラウザ

ソース

デベロッパーの懸念事項として、どのスタイルが優先されるかを一貫して確保することが挙げられます。この問題を解決する方法の一つとして、CSS カスケードをより適切に制御することが考えられます。

カスケードレイヤを使用すると、どのレイヤの優先度を高めるかをユーザーが制御できるため、スタイルが適用されるタイミングをより細かく制御できます。

カスケードのイラスト

Codepen プロジェクトのスクリーンショット — Codepen でプロジェクトを探索

カスケードレイヤの使用方法について詳しくは、こちらの記事をご覧ください。

スコープ CSS

対応ブラウザ

ソース

CSS スコープスタイルを使用すると、特定のスタイルが適用される境界を指定できます。これは、基本的に CSS でネイティブな名前空間を作成することです。これまで、デベロッパーはサードパーティスクリプトを使用してクラス名を変更したり、特定の命名規則を使用してスタイルの競合を回避したりしていましたが、まもなく @scope を使用できるようになります。

ここでは、.title 要素を .card にスコープしています。これにより、そのタイトル要素が、ページ上の他の .title 要素（ブログ投稿のタイトルやその他の見出しなど）と競合することがなくなります。

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

スコープ制限付きの @scope と @layer は、次のライブデモで確認できます。

デモのカードのスクリーンショット

@scope の詳細については、css-cascade-6 仕様をご覧ください。

三角関数

対応ブラウザ

ソース

新しい CSS 配管のもう 1 つの要素は、既存の CSS 数学関数に追加された三角関数です。これらの機能は、すべての最新ブラウザで安定して動作するようになりました。これにより、ウェブプラットフォームでより自然なレイアウトを作成できるようになります。たとえば、この放射状のメニューレイアウトは、sin() 関数と cos() 関数を使用して設計し、アニメーション化できるようになりました。

以下のデモでは、ドットが中心点を中心に回転します。各ドットを中心で回転させて外側に移動させるのではなく、各ドットを X 軸と Y 軸で移動させます。X 軸と Y 軸の距離は、--angle の cos() と sin() を考慮して決定されます。

このトピックの詳細については、三角関数に関する記事をご覧ください。

個々の変換プロパティ

対応ブラウザ

ソース

個々の変換関数により、デベロッパーの作業効率は継続的に向上しています。前回の I/O 以降、個々の変換がすべての最新ブラウザで安定しました。

以前は、transform 関数を使用してサブ関数を適用し、UI 要素のスケーリング、回転、移動を行っていました。これは非常に手間がかかり、アニメーションの異なるタイミングで複数の変換を適用する場合は特に面倒でした。

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

変換の種類を分離して個別に適用することで、これらの詳細をすべて CSS アニメーションに含めることができます。

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

これにより、アニメーションの進行中に、移動、回転、スケールの変化を異なる変化率で同時に行うことができます。

詳細については、個々の変換関数に関する投稿をご覧ください。

カスタマイズ可能なコンポーネント

ウェブプラットフォームを通じてデベロッパーの重要なニーズを解決するため、Google は OpenUI コミュニティグループと連携し、まず次の 3 つのソリューションを特定しました。

イベントハンドラ、宣言型 DOM 構造、アクセス可能なデフォルトを含む組み込みのポップアップ機能。
2 つの要素を相互に結び付けてアンカーポジショニングを有効にする CSS API。
カスタマイズ可能なプルダウンメニューコンポーネント。セレクト内のコンテンツにスタイルを適用する場合に使用します。

popover API を使用すると、要素に次のようなブラウザサポートの機能が組み込まれます。

最上位レイヤをサポートしているため、z-index を管理する必要はありません。ポップオーバーやダイアログを開くと、その要素はページ上部の特別なレイヤに昇格します。
auto ポップオーバーで軽い閉じる動作が無料で利用可能になりました。要素の外側をクリックすると、ポップオーバーが閉じられ、ユーザー補助ツリーから削除され、フォーカスが適切に管理されます。
ポップオーバーのターゲットとポップオーバー自体の連結組織のデフォルトのユーザー補助。

つまり、これらの機能をすべて作成し、これらの状態をすべて追跡するために記述する JavaScript の量を減らすことができます。

ポップオーバーの例

ポップオーバーの DOM 構造は宣言型であり、ポップオーバー要素に id 属性と popover 属性を指定する場合と同様に明確に記述できます。次に、その ID を、ポップオーバーを開く要素（popovertarget 属性を持つボタンなど）と同期します。

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover は popover=auto の省略形です。popover=auto を含む要素は、開いたときに他のポップオーバーを強制的に閉じ、開いたときにフォーカスを受け取ります。また、ライトディスミッションできます。逆に、popover=manual 要素は他の要素タイプを強制的に閉じず、すぐにフォーカスを受け取ることも、ライトで閉じることもしません。切り替えボタンなどの閉じる操作で閉じます。

ポップオーバーに関する最新のドキュメントは、現在 MDN で確認できます。

アンカーの配置

ポップオーバーは、ダイアログやツールチップなどの要素でもよく使用されます。通常、これらの要素は特定の要素に固定する必要があります。次のイベントの例を見てみましょう。カレンダーの予定をクリックすると、クリックした予定の近くにダイアログが表示されます。カレンダーアイテムがアンカーで、ポップオーバーがイベントの詳細を表示するダイアログです。

anchor() 関数を使用して、アンカーの幅を使用して、アンカーの x 位置の 50% にツールチップを配置することで、中央に配置されたツールチップを作成できます。次に、既存のプレースメント値を使用して、残りのプレースメントスタイルを適用します。

ポップオーバーを配置した方法によっては、ビューポートに収まらない場合があります。その場合はどうなりますか？

ビューポートからポップアウトするポップオーバー

この問題を解決するため、アンカーポジショニング API には、カスタマイズ可能なフォールバックポジションが含まれています。次の例では、「top-then-bottom」という代替のプレースメントを作成します。ブラウザはまず、ツールチップを上部に配置しようとします。ビューポートに収まらない場合は、アンカー要素の下部に配置します。

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

アンカーの配置について詳しくは、こちらのブログ投稿をご覧ください。

`<selectmenu>`

ポップオーバーとアンカーの両方の配置を使用すると、完全にカスタマイズ可能なセレクトメニューを作成できます。OpenUI コミュニティグループは、これらのメニューの基本構造を調査し、その中のコンテンツをカスタマイズできるようにする方法を模索してきました。以下の視覚的な例をご覧ください。

selectmenu の例

カレンダーの予定に表示される色に対応する色付きのドットで、左端の selectmenu の例を作成するには、次のように記述します。

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

離散的なプロパティ遷移

ポップオーバーをスムーズに開閉するには、ウェブで個別のプロパティをアニメーション化する方法が必要です。これらは、通常、過去にはアニメーション化できなかったプロパティです（トップレイヤとの間でのアニメーション化、display: none との間でのアニメーション化など）。

ポップオーバー、セレクトメニュー、さらにはダイアログやカスタムコンポーネントなどの既存の要素でも、美しい遷移を可能にするための作業の一環として、ブラウザではこれらのアニメーションをサポートする新しい配管が有効になっています。

次のポップオーバーのデモでは、開いた状態に :popover-open、開く前の状態に @starting-style を使用して、ポップオーバーの開閉をアニメーション化します。開いた後に閉じた状態には、要素に直接変換値を適用します。これをディスプレイで機能させるには、次のように transition プロパティに追加する必要があります。

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

インタラクション数

最後に、ウェブ UI 機能の最後として、インタラクションについて説明します。

個別のプロパティのアニメーション化についてはすでに説明しましたが、Chrome にはスクロールドリブンのアニメーションとビュー遷移に関する非常に魅力的な API も導入されています。

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

対応ブラウザ

ソース

スクロールドリブンアニメーションを使用すると、スクロールコンテナのスクロール位置に基づいてアニメーションの再生を制御することができます。つまり、上下にスクロールすると、アニメーションが前方または後方にスクラブされます。また、スクロールドリブンアニメーションを使用すると、スクロールコンテナ内の要素の位置に基づいてアニメーションを制御することもできます。これにより、視差効果のある背景画像、スクロールの進行状況バー、ビューに入ったときに出現する画像など、面白い視覚効果を作成することができます。

この API は、宣言型のスクロールドリブンアニメーションを簡単に作成できる一連の JavaScript クラスと CSS プロパティをサポートしています。

スクロールによって CSS アニメーションを駆動するには、新しい scroll-timeline、view-timeline、animation-timeline プロパティを使用します。JavaScript Web Animations API を駆動するには、ScrollTimeline インスタンスまたは ViewTimeline インスタンスを timeline オプションとして Element.animate() に渡します。

これらの新しい API は、既存の Web Animations API や CSS Animations API と一緒に機能するため、これらの API の利点を活用できます。これには、これらのアニメーションをメインスレッド以外で実行する機能も含まれます。はい、お読みの通りです。数行のコードを追加するだけで、スクロールによって駆動され、メインスレッドで実行される、滑らかなアニメーションを実現できます。気に入らない理由はありません。

スクロールドリブンのアニメーションを作成する方法について詳しくは、スクロールドリブンのアニメーションに関するこちらの記事をご覧ください。

遷移を表示する

対応ブラウザ

ソース

View Transition API を使用すると、2 つの状態間のアニメーション遷移を作成する際に、DOM を 1 つのステップで簡単に変更できます。ビュー間の単純なフェードでもかまいませんが、ページの個々の部分の遷移方法を制御することもできます。

ビュー遷移は、プログレッシブエンハンスメントとして使用できます。任意の方法で DOM を更新するコードを、ビュー遷移 API でラップし、この機能をサポートしていないブラウザ向けにフォールバックを提供します。

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

遷移の外観は CSS で制御します。

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Maxi Ferreira によるこの素晴らしいデモで示されているように、ビュー遷移中に、動画の再生など、他のページ操作は引き続き機能します。

ビュー遷移は現在、Chrome 111 のシングルページアプリ（SPA）で動作します。複数ページのアプリのサポートは現在開発中です。詳しくは、ビューの遷移ガイドをご覧ください。

まとめ

CSS と HTML の最新情報については、developer.chrome.com でご確認ください。また、I/O の動画で、ウェブに関する最新情報もご確認ください。

CSS と UI の新機能: I/O 2023 Edition

新しいレスポンシブ

コンテナクエリ

スタイルクエリ

:has()

nth-of 構文

text-wrap: balance

initial-letter

動的ビューポート ユニット

広色域の色空間

color-mix()

CSS の基礎

ネスト

レイヤをカスケードする

スコープ CSS

三角関数

個々の変換プロパティ

カスタマイズ可能なコンポーネント

ポップオーバー

アンカーの配置

<selectmenu>

離散的なプロパティ遷移

インタラクション数

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

遷移を表示する

まとめ

`:has()`

`text-wrap: balance`

`initial-letter`

動的ビューポートユニット

`<selectmenu>`

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