三角関数

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

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

複雑な n 番目の* 選択

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

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

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

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

範囲

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 について詳しくは、@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 ライター、翻訳者が「適合する」プロジェクト コピーを作成する必要がなくなります。追加できますサブグリッドを使用すると、コンテンツに合わせてレイアウトを調整できます。

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

頭文字

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

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

頭文字デモ

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

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

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

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

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

HD 色空間（色レベル 4）

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

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

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

カラーミックス関数

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

color-mix() は、グラデーションによって生じる瞬間と考えることができます。グラデーションは青から白になるための全ステップを示すのに対し、color-mix() は 1 ステップのみを表示します。色空間を考慮し、混合色空間が結果にどのように影響するかがわかると、物事はより高度になります。

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

相対色の構文

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

RCS を使用すると、色の相対操作と絶対操作を行うことができます。相対的な変化は、彩度または明度の現在の値を取得し、calc() で変更するものです。絶対的な変化とは、不透明度を 50% に設定するなど、チャンネル値をまったく新しい値に置き換えることです。この構文は、時間バリエーションなど、テーマ設定に有用なツールを提供します。

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

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

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

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

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

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

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

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

スタイルクエリのデモ

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

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

:has() セレクタ

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

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

:has() ライブデモ

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

詳しくは、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 がすべての処理を行います。これは、変更前と変更後のスナップショットの間でスナップショットを移行することによって行われます。CSS を使用すると、キャプチャする対象を制御し、必要に応じてそれらのスナップショットのアニメーション化方法をカスタマイズできます。

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

線形イージング関数

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

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

<ph type="x-smartling-placeholder">

</ph>

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

スクロール終了

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

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

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

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

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

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

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

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

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

遅延タイムラインの添付

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

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

<ph type="x-smartling-placeholder">

</ph>

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

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

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

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

@starting-style

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

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

オーバーレイ

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

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

ポップオーバー

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

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

選択の水平ルール

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

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

[ライブデモ] を選択

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

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

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

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

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

限定アコーディオン

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

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

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