CSS ラップ: 2023 年

CSS ラップ済みヘッダー

CSS Wrapped: 2023 年

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

#Interop2023 から、CSS や UI 分野でのさまざまな新たな活用方法まで、デベロッパーがかつてウェブ プラットフォームで不可能と考えられていた機能を実現します。最新のブラウザはすべて、コンテナクエリ、サブグリッド、:has() セレクタのほか、さまざまな新しい色空間と関数をサポートしています。Chrome では、CSS のみのスクロールドリブン アニメーションと、ビュー遷移によりウェブビュー間のスムーズなアニメーションをサポートしています。さらに、CSS ネストスコープ設定スタイルなど、デベロッパー エクスペリエンスを向上させるために導入された多くの新しいプリミティブがあります。

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

アーキテクチャ基礎

まず、CSS の中核的な言語と機能の更新から始めましょう。これらは、スタイルを作成して整理する方法の基礎となる機能であり、開発者に大きな力をもたらします。

三角関数

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: 108。 <ph type="x-smartling-placeholder">
  • Safari: 15.4。 <ph type="x-smartling-placeholder">

ソース

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

三角関数のデモ

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

複雑な n 番目の* 選択

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: 113。 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

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

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

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

複雑な nth-* 選択のデモ

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

範囲

対応ブラウザ

  • Chrome: 118。 <ph type="x-smartling-placeholder">
  • Edge: 118。 <ph type="x-smartling-placeholder">
  • Firefox: 旗の裏側。
  • Safari: 17.4。 <ph type="x-smartling-placeholder">

ソース

Chrome 118 で、@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> 要素が一致していません。

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

@scope デモの参照スクリーンショット

Scope ライブデモ

CSS @scope のデモ
をご覧ください。

@scope について詳しくは、@scope を使用してセレクタのリーチを制限する方法をご覧ください。この記事では、:scope セレクタ、特異性の処理方法、プレリュードなしのスコープ、カスケードが @scope によってどのような影響を受けるかについて説明します。

ネスト

対応ブラウザ

  • Chrome: 120。 <ph type="x-smartling-placeholder">
  • Edge: 120。 <ph type="x-smartling-placeholder">
  • Firefox: 117。 <ph type="x-smartling-placeholder">
  • Safari: 17.2。 <ph type="x-smartling-placeholder">

ソース

ネストする前に、すべてのセレクタを互いに個別に明示的に宣言する必要がありました。その結果、繰り返し、スタイルシートが大量に生成され、オーサリング作業が分散してしまいます。セレクタは、関連するスタイルルールをグループ化して継続できるようになりました。

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 */
}

準備課程のスクリーンキャスト

準備課程のライブデモ

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

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

詳しくは、ネストをご覧ください。

サブグリッド

対応ブラウザ

  • Chrome: 117。 <ph type="x-smartling-placeholder">
  • Edge: 117。 <ph type="x-smartling-placeholder">
  • Firefox: 71。 <ph type="x-smartling-placeholder">
  • Safari: 16。 <ph type="x-smartling-placeholder">

ソース

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

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

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

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

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

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

タイポグラフィ

2023 年、ウェブ タイポグラフィにはいくつかの重要な更新が加えられました。特に優れたプログレッシブ エンハンスメントは、text-wrap プロパティです。このプロパティを使用すると、追加のスクリプトを作成しなくても、ブラウザで作成するタイポグラフィ レイアウトの調整が可能になります。気まずい線長から解放され、より予測しやすいタイポグラフィを利用できます。

頭文字

対応ブラウザ

  • Chrome: 110。 <ph type="x-smartling-placeholder">
  • Edge: 110。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

ソース

今年初めに Chrome 110 に導入された initial-letter プロパティは、頭文字の配置にスタイルを設定する、小規模ながら強力な CSS 機能です。文字の位置は、落下した状態でも上げた状態でも配置できます。このプロパティは 2 つの引数を取ります。1 つ目は、対応する段落に文字をどの程度深く配置するか、2 つ目は文字を段落の上でどの程度引き上げるかを指定する引数です。次のデモのように、両方を組み合わせて行うこともできます。

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

イニシャル レターのデモのスクリーンショット

頭文字デモ

::first-letter 疑似要素の initial-letter の値を変更して、シフトを監視する。

イニシャルの詳細をご確認ください。

text-wrap: バランスとプリティ

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

そこで、balancepretty という 2 つの新しいテキストの折り返し手法を利用できます。balance の値は、調和のとれたテキスト ブロックを作成することを目的とし、pretty は孤立を防ぎ、健全なハイフネーションを保証することを目指しています。どちらのタスクも従来は手作業で行われていましたが、その作業をブラウザに任せて、あらゆる翻訳言語で動作するのは素晴らしいことです。

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

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

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

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

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

HD 色空間(色レベル 4)

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: 113。 <ph type="x-smartling-placeholder">
  • Safari: 15。 <ph type="x-smartling-placeholder">

ソース

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: 113。 <ph type="x-smartling-placeholder">
  • Safari: 15。 <ph type="x-smartling-placeholder">

ソース

ハードウェアからソフトウェア、CSS、点滅するライトまで、人間の目で見ることができるのと同じくらい良好に色を表現しようとするコンピュータは、多大な労力を要します。2023 年には、新しい色、より多くの色、新しい色空間、色関数、および機能が加わります。

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

カラー 4 のスクリーンキャスト

Color 4 デモ

次のデモでは、スライダーをドラッグして、見出しと段落に対する `balance` と `pretty` の影響を比較できます。デモを別の言語に翻訳してみましょう。

詳しくは、色 4 と色空間をご覧ください。

カラーミックス関数

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: 113。 <ph type="x-smartling-placeholder">
  • Safari: 16.2。 <ph type="x-smartling-placeholder">

ソース

色の混合は古典的なタスクですが、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() を組み合わせることで、親のサイズや子の存在や状態に基づいて、レスポンシブかつ論理的なスタイル設定を所有するコンポーネントがサポートされます。つまり、ページレベルのレイアウトとコンポーネント レベルのレイアウトを分離し、ロジックを一度記述すれば、どこでもコンポーネントを使用できるようになりました。

コンテナクエリのサイズ設定

対応ブラウザ

  • Chrome: 105。 <ph type="x-smartling-placeholder">
  • Edge: 105。 <ph type="x-smartling-placeholder">
  • Firefox: 110。 <ph type="x-smartling-placeholder">
  • Safari: 16。 <ph type="x-smartling-placeholder">

ソース

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

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

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

@container のデモ

コンテナクエリの使用方法を学習する。

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

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: 18。 <ph type="x-smartling-placeholder">

ソース

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

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

スタイル コンテナのクエリのデモのスクリーンショット

スタイルクエリのデモ

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

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

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

:has() セレクタ

対応ブラウザ

  • Chrome: 105。 <ph type="x-smartling-placeholder">
  • Edge: 105。 <ph type="x-smartling-placeholder">
  • Firefox: 121。 <ph type="x-smartling-placeholder">
  • Safari: 15.4。 <ph type="x-smartling-placeholder">

ソース

約 20 年にわたり、デベロッパーは「親セレクタ」を求めてきた使用します。これは、Chrome 105 で出荷された :has() セレクタで可能になりました。たとえば、.card:has(img.hero) を使用すると、ヒーロー画像がある .card 要素が子として選択されます。

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

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

:has() ライブデモ

CSS :has() デモ: 画像なし/画像ありのカード
をご覧ください。

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

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

:has() のデモ

CSS :has() デモ: ドック
をご覧ください。

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

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

対応ブラウザ

  • Chrome: 113。 <ph type="x-smartling-placeholder">
  • Edge: 113。 <ph type="x-smartling-placeholder">
  • Firefox: 102。 <ph type="x-smartling-placeholder">
  • Safari: 17。 <ph type="x-smartling-placeholder">

ソース

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

設計するデバイスのほとんどは、リフレッシュ レートが高速なデバイスです。パソコンやほとんどのモバイル デバイスが対象です。電子書籍リーダーや低電力支払いシステムなどのデバイスでは、リフレッシュ レートが遅くなることがあります。デバイスがアニメーションや頻繁な更新を処理できないことがわかっている場合は、バッテリー使用量を節約したり、ビューの更新を誤らしたりすることができます。

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

デモを更新

ラジオボタンを選択して更新速度の値をシミュレーションし、 アヒルにどのように影響するか見てみましょう

詳しくは、@media(更新)をご覧ください。

スクリプト作成メディアクエリ

対応ブラウザ

  • Chrome: 120。 <ph type="x-smartling-placeholder">
  • Edge: 120。 <ph type="x-smartling-placeholder">
  • Firefox: 113。 <ph type="x-smartling-placeholder">
  • Safari: 17。 <ph type="x-smartling-placeholder">

ソース

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

Chrome DevTools でテストするページの JavaScript を有効または無効にする方法については、こちらをご覧ください

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

スクリプトのデモ

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

詳しくは、スクリプトについての記事をご覧ください。

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

対応ブラウザ

  • Chrome: 118。 <ph type="x-smartling-placeholder">
  • Edge: 118。 <ph type="x-smartling-placeholder">
  • Firefox: 旗の裏側。
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

ソース

インターフェースが不透明でないと、頭痛や視覚障害の原因となる可能性があります。そのため、Windows、macOS、iOS には、UI の透明度を下げたり、表示を消したりできるシステム環境設定があります。この「prefers-reduced-transparency」のメディアクエリは、他の優先メディアクエリに適合するので、ユーザーに合わせて調整しながら創造性を発揮できます。

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

透明性の低下のデモ

場合によっては、コンテンツが他のコンテンツに重なっていない代替レイアウトを提供できます。また、色の不透明度を調整して不透明またはほぼ不透明にすることもできます。以下のブログ投稿では、ユーザーの好みに合わせて調整できる魅力的なデモを紹介しています。このメディアクエリがどのような場面で役に立つのか知りたい場合は、ぜひ参考にしてください。

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

操作

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

ビュー遷移

対応ブラウザ

  • Chrome: 111。 <ph type="x-smartling-placeholder">
  • Edge: 111。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: 18。 <ph type="x-smartling-placeholder">

ソース

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

View Transitions API の中核は、document.startViewTranstion 関数です。DOM を新しい状態に更新する関数を渡すと、API がすべての処理を行います。これは、変更前と変更後のスナップショットの間でスナップショットを移行することによって行われます。CSS を使用すると、キャプチャする対象を制御し、必要に応じてそれらのスナップショットのアニメーション化方法をカスタマイズできます。

VT スクリーンキャスト

VT デモ

切り替え効果のデモを見る
をご覧ください。

シングルページ アプリケーション用の View Transitions API をリリース(Chrome 111)詳しくは、ビュー遷移をご覧ください。

線形イージング関数

対応ブラウザ

  • Chrome: 113。 <ph type="x-smartling-placeholder">
  • Edge: 113。 <ph type="x-smartling-placeholder">
  • Firefox: 112。 <ph type="x-smartling-placeholder">
  • Safari: 17.2。 <ph type="x-smartling-placeholder">

この関数の名前に惑わされないようにしてください。linear() 関数(linear キーワードと混同しないでください)を使用すると、精度が低下するという犠牲を伴いますが、シンプルな方法で複雑なイージング関数を作成できます。

Chrome 113 で導入された linear() より前は、CSS でバウンス効果やばね効果を作成することは不可能でした。linear() を使うと、これらのイージングを一連のポイントに単純化し、それらのポイント間を線形補間することで、これらのイージングを近似することができます。

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

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

線形イージングのデモ

CSS linear() のデモ。

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

スクロール終了

対応ブラウザ

  • Chrome: 114。 <ph type="x-smartling-placeholder">
  • Edge: 114。 <ph type="x-smartling-placeholder">
  • Firefox: 109。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

ソース

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

スクロールエンドのスクリーンキャスト

スクロールエンドのデモ

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

詳しくは、スクロールに関する記事をご覧ください。

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

対応ブラウザ

  • Chrome: 115。 <ph type="x-smartling-placeholder">
  • Edge: 115。 <ph type="x-smartling-placeholder">
  • Firefox: 旗の裏側。
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

ソース

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

次のデモに示すように、スクロールタイムラインを使用すると、スクローラーの全体的な進行状況を追跡できます。ページの一番下までスクロールすると、テキストが 1 文字ずつ表示されます。

SDA スクリーンキャスト

SDA デモ

CSS スクロールドリブン アニメーションのデモ: スクロール タイムライン
をご覧ください。

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

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

SDA ライブデモ

CSS のスクロールドリブン アニメーションのデモ: タイムラインの表示
をご覧ください。

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

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

遅延タイムラインの添付

対応ブラウザ

  • Chrome: 116。 <ph type="x-smartling-placeholder">
  • Edge: 116。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

ソース

CSS でスクロールドリブン アニメーションを適用すると、制御するスクローラーを見つけるルックアップ メカニズムが常に DOM ツリーを遡上するため、スクロールの祖先のみに制限されます。ただし多くの場合、アニメーション化する必要がある要素は、スクローラーの子ではなく、まったく別のサブツリー内にある要素です。

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

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

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

ライブデモ

CSS スクロールドリブン アニメーションのデモ: 遅延タイムライン アタッチメント
をご覧ください。

詳しくは、timeline-scope をご覧ください。

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

2023 年のもう一つの新機能は、display: none との間でアニメーション化するなど、個別のアニメーションをアニメーション化する機能です。Chrome 116 以降では、キーフレーム ルールで displaycontent-visibility を使用できます。0% の点ではなく 50% の点で離散的なプロパティを移行することもできます。これを行うには、transition-behavior プロパティで allow-discrete キーワードを使用するか、transition プロパティで省略します。

非連続動物。スクリーンキャスト

非連続動物。デモ

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

@starting-style

対応ブラウザ

  • Chrome: 117。 <ph type="x-smartling-placeholder">
  • Edge: 117。 <ph type="x-smartling-placeholder">
  • Firefox: 129。 <ph type="x-smartling-placeholder">
  • Safari: 17.5。 <ph type="x-smartling-placeholder">

ソース

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

@starting スタイルのスクリーンキャスト

@starting-style デモ

@starting-style とその他のエントリ アニメーションの詳細。

オーバーレイ

対応ブラウザ

  • Chrome: 117。 <ph type="x-smartling-placeholder">
  • Edge: 117。 <ph type="x-smartling-placeholder">
  • Firefox: サポートされていません。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

ソース

新しい CSS overlay プロパティを遷移に追加すると、最上位レイヤのスタイル(popoverdialog など)を持つ要素で、最上位レイヤからスムーズにアニメーション化できます。オーバーレイをトランジションしない場合、要素はすぐにクリップされて変形され、覆われた状態に戻ります。この場合、トランジションは行われません。同様に、overlay を使用すると、最上位レイヤの要素に追加された ::backdrop をスムーズにアニメーション化できます。

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

オーバーレイ ライブデモ

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

コンポーネント

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

ポップオーバー

対応ブラウザ

  • Chrome: 114。 <ph type="x-smartling-placeholder">
  • Edge: 114。 <ph type="x-smartling-placeholder">
  • Firefox: 125。 <ph type="x-smartling-placeholder">
  • Safari: 17。 <ph type="x-smartling-placeholder">

ソース

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

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

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

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

選択の水平ルール

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

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

Chrome でライトモードとダークモードを使用して選択したときの時間のスクリーンショット

[ライブデモ] を選択

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

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

対応ブラウザ

  • Chrome: 119。 <ph type="x-smartling-placeholder">
  • Edge: 119。 <ph type="x-smartling-placeholder">
  • Firefox: 88。 <ph type="x-smartling-placeholder">
  • Safari: 16.5。 <ph type="x-smartling-placeholder">

ソース

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

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

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

:user-* ライブデモ

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

限定アコーディオン

対応ブラウザ

  • Chrome: 120。 <ph type="x-smartling-placeholder">
  • Edge: 120。 <ph type="x-smartling-placeholder">
  • Firefox: 130。 <ph type="x-smartling-placeholder">
  • Safari: 17.2。 <ph type="x-smartling-placeholder">

ウェブでよく使われる UI パターンは、アコーディオン コンポーネントです。このパターンを実装するには、いくつかの <details> 要素を組み合わせます。多くの場合、視覚的にグループ分けして、同じ要素に属していることを示します。

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

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

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

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

素晴らしいホリデー シーズンをお過ごしください。これらの素晴らしい新しい CSS と UI 機能を、お早めにご自身の作業に組み込む機会をいただければ幸いです。

⇾ Chrome UI DevRel チーム