CSS ラップ: 2023 年
コンテンツに移動:
効果がありました。2023 年は CSS にとって大きな年でした。
#Interop2023 から、CSS や UI の領域に多数の新しい要素が登場し、かつてはウェブ プラットフォームで不可能だと考えられていた機能を実現しています。現在では、すべての最新のブラウザがコンテナクエリ、サブグリッド、:has() セレクタのほか、多数の新しい色空間と関数をサポートしています。Chrome では、CSS のみのスクロールドリブン アニメーションがサポートされており、ビュー遷移を使用してウェブビュー間をスムーズにアニメーション化できます。さらに、CSS のネストやスコープ スタイルなど、デベロッパー エクスペリエンスを向上させるための新しいプリミティブが数多く導入されています。
今年はどんな 1 年になりますか？そして、ブラウザ デベロッパーとウェブ コミュニティの皆様の多大な努力を称え、称えるとともに、このマイルストーンの年の締めくくりとしたいと思います。
アーキテクチャ基盤
まず、コア CSS の言語と機能の更新について説明します。これらは、スタイルを作成して整理する方法の基礎となり、デベロッパーが大きなパワーを発揮する機能です。
三角関数
Chrome 111 では、三角関数 sin()、cos()、tan()、asin()、acos()、atan()、atan2() のサポートが追加され、すべての主要なエンジンでご利用いただけるようになりました。これらの関数は、アニメーションやレイアウトの目的に非常に役立ちます。たとえば、選択した中心を中心とした円上に要素を配置しやすくなりました。
詳しくは、CSS の三角関数をご覧ください。
複雑な nth-* 選択
対応ブラウザ
- 111
- 111
- 113
- 9
:nth-child() 疑似クラスセレクタを使用すると、インデックスで DOM 内の要素を選択できます。An+B マイクロ構文を使用すると、選択する要素を細かく制御できます。
デフォルトでは、:nth-*() 疑似はすべての子要素を考慮します。Chrome 111 以降では、必要に応じてセレクタリストを :nth-child() と :nth-last-child() に渡すことができます。これにより、An+B が処理を行う前に、子のリストを事前にフィルタリングできます。
次のデモでは、of .small を使用して事前に小さい人形を除外することで、3n+1 ロジックを小さな人形にのみ適用しています。プルダウンを使用して、使用するセレクタを動的に変更します。
複雑な n-* 選択について学習する。
範囲
対応ブラウザ
- 118
- 118
- x
- 17.4
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 セレクタ、特異性の処理方法、Prelude のないスコープ、@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 */
}
準備課程のスクリーンキャスト
Nesting のライブデモ
ネストすると、スタイルシートの軽量化、セレクタの繰り返しのオーバーヘッドの削減、コンポーネントのスタイルの一元化が可能です。この構文は当初、さまざまな場所で & を使用する必要があった制限付きでリリースされましたが、その後、ネストの緩和された構文の更新により解除されました。
詳しくは、ネストをご覧ください。
サブグリッド
CSS subgrid を使用すると、子レイアウト間の配置を改善して、より複雑なグリッドを作成できます。これにより、グリッドの行または列の値として subgrid を使用することで、別のグリッド内にあるグリッドが外側のグリッドの行と列を独自のものとして採用できるようになります。
Subgrid スクリーンキャスト
Subgrid のライブデモ
Subgrid は、兄弟を互いの動的コンテンツに合わせて配置する場合に特に便利です。これにより、コピーライター、UX ライター、翻訳者は、レイアウトに「適合する」プロジェクト コピーを作成する必要がなくなります。サブグリッドを使用すると、コンテンツに合わせてレイアウトを調整できます。
サブグリッドの詳細をご確認ください。
タイポグラフィ
2023 年には、ウェブ タイポグラフィにいくつかの重要な変更が加えられました。段階的な拡張として特に優れているのは、text-wrap プロパティです。このプロパティを使用すると、追加のスクリプトを必要とせずに、ブラウザで構成するタイポグラフィ レイアウトを調整できます。予測可能なタイポグラフィを使用すれば、線を長めにする必要はありません。
頭文字
Chrome 110 で年初にリリースされた initial-letter プロパティは、頭文字の配置に関するスタイルを設定する、小規模ながら強力な CSS 機能です。文字は、ドロップした状態と盛り上がった状態のどちらでも配置できます。このプロパティには 2 つの引数を指定できます。1 つ目は、対応する段落に文字を落とす深さを指定します。2 つ目は、文字を上に移動させる度合いです。次のデモのように、両方を組み合わせて実行することもできます。
イニシャルのスクリーンショット
頭文字のデモ
::first-letter 疑似要素の initial-letter の値を変更して、シフトを監視します。詳しくは、初期文字をご覧ください。
text-wrap: バランスとプリティ
開発者にとって、見出しや段落の最終的なサイズやフォントサイズ、さらには言語もわかりません。テキストの折り返しを効果的かつ美しく処理するために必要な変数はすべてブラウザにあります。ブラウザはフォントサイズ、言語、割り当て領域など、すべての要素を把握しているため、高度で高品質のテキスト レイアウトの処理に最適です。
そこで役立つのが、balance と pretty という 2 つの新しいテキストの折り返し手法です。balance の値は調和のとれたテキスト ブロックを作成し、pretty の値は孤立を防ぎ、ハイフネーションを健全にすることを目指します。従来、これらのタスクはいずれも手作業で行われていましたが、ブラウザに作業を渡して、どの翻訳言語でも処理できるようにするのは素晴らしいことです。
テキストの折り返しスクリーンキャスト
テキストの折り返しのライブデモ
balance と pretty が見出しと段落に及ぼす効果を比較できます。デモを別の言語に翻訳してみましょう。詳しくは、テキストの折り返し: 残高をご覧ください。
色
2023 年は、ウェブ プラットフォームにとって色彩の年でした。ダイナミック カラーテーマ設定を可能にする新しい色空間と関数により、ユーザーが満足する鮮やかで色鮮やかなテーマを作成でき、カスタマイズも可能です。
HD 色空間（色レベル 4）
ハードウェアからソフトウェア、CSS、点滅ライトに至るまで、コンピュータが人間の目と同じくらい良い色を表現するには、多くの労力を要します。2023 年には、新しい色、より多くの色、新しい色空間、色関数、新機能が加わります。
CSS と色で次の操作を行えるようになりました。
- ユーザーの画面ハードウェアが広色域 HDR 色に対応しているかどうかを確認します。
- ユーザーのブラウザが Oklch や Display P3 などのカラー構文を認識できるかどうかを確認します。
- Oklab、Oklch、HWB、Display P3、Rec.2020、XYZ などで HDR 色を指定します。
- HDR カラーでグラデーションを作成する、
- 代替色空間でグラデーションを補間する。
- color-mix() を使用して色を混在させます。
- 相対色構文を使用して色のバリエーションを作成します。
カラー 4 スクリーンキャスト
色 4 のデモ
詳しくは、色 4 と色空間をご覧ください。
color-mix 関数
色の組み合わせは古典的なタスクですが、2023 年の CSS でも実行できます。色に白や黒を混ぜるだけでなく、透明度も調整でき、これらすべてを任意の色空間で行うことができます。ベーシック カラー機能と高度なカラー機能でもあります。
color-mix() スクリーンキャスト
color-mix() デモ
color-mix() は、勾配からのある時点と考えることができます。グラデーションには、青から白に変化するために必要なステップがすべて表示されるのに対し、color-mix() では 1 つのステップだけが表示されます。色空間を考慮し、色空間を組み合わせることで結果がどのように異なるかを理解すると、作業はさらに高度になります。
詳細については、color-mix() をご覧ください。
相対色の構文
相対色構文（RCS）は、色のバリエーションを作成するための color-mix() を補完するものです。color-mix() よりやや強力ですが、色を扱うための方法も異なります。color-mix() では、色を明るくするために白を混ぜる場合があります。この場合、RCS は明度チャンネルへの正確なアクセスと、チャンネル上で calc() を使用して明度をプログラムで調整または増強する機能を提供します。
RCS スクリーンキャスト
RCS のライブデモ
RCS では、色に対して相対的および絶対的な操作を行うことができます。相対変化とは、彩度または明度の現在の値を取得し、calc() で変更するものです。絶対的な変更とは、不透明度を 50% に設定するなど、チャンネルの値をまったく新しい値に置き換えるものです。この構文は、テーマ設定やジャストインタイム バリアントなどに意味のあるツールを提供します。
詳しくは、相対色構文をご覧ください。
レスポンシブ デザイン
レスポンシブ デザインは 2023 年に進化しました。この画期的な年には、レスポンシブ ウェブ エクスペリエンスの構築方法を根本的に変える新機能がリリースされ、コンポーネント ベースのレスポンシブ デザインの新しいモデルが登場しました。コンテナクエリと :has() を組み合わせると、親のサイズと子の存在または状態に基づいてレスポンシブかつ論理的なスタイル設定を行うコンポーネントがサポートされます。つまり、最終的にページレベルのレイアウトとコンポーネント レベルのレイアウトを分離して、コンポーネントをどこでも使用するためのロジックを一度記述することが可能になります。
コンテナクエリのサイズ設定
コンテナクエリでは、ビューポートのグローバル サイズ情報を使用して 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() ライブデモ
:has() のデモ: 画像なし/画像付きのカード:has() は相対セレクタ リストを引数として受け取るため、親要素よりもはるかに多くの要素を選択できます。さまざまな CSS コンビネータを使用すると、DOM ツリーの上方に移動するだけでなく、横方向に選択することも可能です。たとえば、li:has(+ li:hover) は、現在カーソルを合わせている <li> 要素の前の <li> 要素を選択します。
:has() スクリーンキャスト
:has() デモ
:has() デモ: ホルダー詳しくは、CSS の :has() セレクタをご覧ください。
メディアクエリを更新する
update メディアクエリを使用すると、UI をデバイスのリフレッシュ レートに適応させることができます。この機能は、さまざまなデバイスの機能に関連する fast、slow、または none の値をレポートできます。
設計するデバイスのほとんどは、高速リフレッシュ レートを搭載する傾向があります。パソコンとほとんどのモバイル デバイスが対象です。電子書籍リーダーや低電力決済システムなどのデバイスでは、リフレッシュ レートが遅くなることがあります。デバイスがアニメーションや頻繁な更新を処理できないことがわかれば、バッテリー使用量を節約したり、ビューの更新を失敗させたりできます。
スクリーンキャストを更新
デモの更新
@media（更新）の詳細をご確認ください。
メディアクエリのスクリプト作成
スクリプト メディアクエリを使用して、JavaScript が使用可能かどうかを確認できます。これは段階的なエンハンスメントに最適です。このメディアクエリ以前は、JavaScript が利用可能かどうかを検出する方法として、HTML に nojs クラスを配置し、それを JavaScript で削除していました。JavaScript を検出してそれに応じて調整する方法が CSS で利用できるようになったため、これらのスクリプトは削除できます。
Chrome DevTools を使用して、テストするページで JavaScript を有効または無効にする方法については、こちらをご覧ください。
脚本のスクリーンキャスト
スクリプティングのデモ
ウェブサイトでテーマを切り替える場合、JavaScript を使用できないため、スクリプト メディアクエリを使用すると、システム設定に対して切り替えが機能しやすくなります。または、スイッチ コンポーネントを検討してください。JavaScript が使用可能な場合は、単にオンとオフを切り替えるのではなく、ジェスチャーでスイッチを切ることができます。スクリプトが使用可能な場合は UX をアップグレードし、スクリプトが無効になっている場合は有意義な基盤エクスペリエンスを実現する絶好の機会です。
スクリプトの詳細を確認する。
透明性の低いメディアクエリ
不透明でないインターフェースは、頭痛の原因となったり、さまざまな目の不自由な人が目が見えづらくなったりすることがあります。そのため、Windows、macOS、iOS には、UI の透明度を下げる、または削除するシステム設定があります。この prefers-reduced-transparency のメディアクエリは、他の好みのメディアクエリとも併用できます。そのため、ユーザーに合わせて調整しながら、創造力を発揮できます。
透明性の低下に関するスクリーンキャスト
透明性の低減のデモ
場合によっては、他のコンテンツに重なるコンテンツがない代替レイアウトを提供できます。あるいは、色の不透明度を調整して、不透明にしたり、ほぼ不透明にしたりできます。以下のブログ投稿では、ユーザーの好みに合わせて、示唆に富んだデモを多数紹介しています。このメディアクエリが役に立つ場面についてご興味がある方は、ぜひ一度ご覧ください。
詳しくは、@media（prefers-reduced-transparency）をご覧ください。
操作
インタラクションはデジタル エクスペリエンスの基礎です。ユーザーは、自分が何をクリックしたか、仮想空間内のどの位置にいるかについてフィードバックを得ることができます。今年は多くの魅力的な機能がリリースされ、インタラクションの作成と実装が容易になり、スムーズなユーザー ジャーニーとより洗練されたウェブ エクスペリエンスが実現しました。
切り替え効果を表示する
ビュー遷移は、ページのユーザー エクスペリエンスに大きく影響します。View Transitions API を使用すると、Single Page Application の 2 つのページ状態の間に視覚的な遷移を作成できます。たとえば、ページ全体の遷移や、ページ上の新しいアイテムの追加や削除といった小さな遷移などが該当します。
View Transitions API の中核となるのは、document.startViewTranstion 関数です。DOM を新しい状態に更新する関数を渡すと、API がすべての処理を行います。これは、前後のスナップショットを取得し、2 つのスナップショット間を移動することで実現されます。CSS を使用すると、キャプチャする対象を制御できます。また、必要に応じてスナップショットのアニメーション化方法をカスタマイズできます。
VT スクリーンキャスト
VT デモ
Chrome 111 でリリースされたシングルページ アプリケーション用の View Transitions API。詳細については、ビュー遷移をご覧ください。
線形イージング関数
対応ブラウザ
- 113
- 113
- 112
- 17.2
この関数名に騙されないようにしてください。linear() 関数（linear キーワードと混同しないでください）を使用すると、精度が落ちますが、複雑なイージング関数を簡単な方法で作成できます。
Chrome 113 でリリースされた linear() より前は、CSS でバウンス効果やばね効果を作成することは不可能でした。linear() を使用すると、これらのイージングを一連のポイントに単純化してから、ポイント間で線形補間することで、これらのイージングを近似できます。
linear() 関数はこれらの点を使用し、それらの点間を線形補間します。リニアイージングのスクリーンキャスト
リニアイージングのデモ
linear() のデモ詳しくは、linear() をご覧ください。linear() 曲線を作成するには、線形イージング ジェネレータを使用します。
スクロール終了
多くのインターフェースにはスクロール操作が含まれており、場合によっては、現在のスクロール位置に関連する情報を同期したり、現在の状態に基づいてデータを取得したりする必要があります。scrollend イベントが発生する前は、不正確なタイムアウト メソッドを使用する必要がありましたが、これはユーザーの指が画面に触れたままでも発生する可能性があります。scrollend イベントにより、ユーザーが操作の途中であるかどうかを判断するスクロール終了イベントをタイミングよく処理できます。
Scrollend スクリーンキャスト
スクロールエンドのデモ
JavaScript ではスクロール中の画面上に指が置かれていることをトラッキングできず、単に情報が得られないだけであるため、これはブラウザが所有できることが重要でした。不正確なスクロール終了試行コードの部分を削除して、ブラウザが所有する高精度イベントに置き換えることができるようになりました。
詳しくはスクロールをご覧ください。
スクロールドリブン アニメーション
スクロールドリブン アニメーションは、Chrome 115 で利用できる便利な機能です。これらを使用すると、既存の CSS アニメーションまたは Web Animations API で作成したアニメーションを、スクローラーのスクロール オフセットと結合できます。上下にスクロールするか、水平スクローラーで左右にスクロールすると、リンクされたアニメーションが直接反応して前後にスクラブされます。
次のデモに示すように、ScrollTimeline を使用すると、スクローラーの全体的な進行状況を追跡できます。ページの最後までスクロールすると、テキストが 1 文字ずつ表示されます。
SDA スクリーンキャスト
SDA のデモ
ViewTimeline を使用すると、スクロールポートを横切る要素を追跡できます。これは、IntersectionObserver が要素をトラッキングする方法と同様です。次のデモでは、各画像がスクロールポートに入ってから中央に来るまで表示されます。
SDA デモのスクリーンキャスト
SDA ライブデモ
スクロールドリブン アニメーションは CSS アニメーションや Web Animations API と連携するため、これらの API のメリットをすべて活用できます。これには、これらのアニメーションをメインスレッド外で実行させる機能が含まれます。数行のコードを追加するだけで、スクロールによって動作する滑らかなアニメーションをメインスレッドから実行できるようになりました。
スクロールドリブン アニメーションについて詳しくは、こちらの記事で詳細をご確認いただくか、Scroll-driven-animations.style にアクセスしてください。多くのデモが含まれています。
遅延タイムラインの接続
CSS を通じてスクロールドリブン アニメーションを適用する場合、制御スクローラーを見つけるためのルックアップ メカニズムが常に DOM ツリーをたどり、スクロールの祖先のみに制限されます。しかし、アニメーション化する必要がある要素は、スクローラーの子ではなく、まったく別のサブツリーにある要素であることがほとんどです。
アニメーション要素で祖先以外の名前付きスクロール タイムラインを検出できるようにするには、共有の親で timeline-scope プロパティを使用します。これにより、その名前で定義された scroll-timeline または view-timeline がアタッチされ、スコープが広がります。これにより、共有された親の子はすべて、その名前のタイムラインを使用できるようになります。
timeline-scope を宣言すると、スクローラーで宣言された scroll-timeline を、それを animation-timeline として使用する要素で見つけることができるデモのスクリーンキャスト
ライブデモ
timeline-scope の詳細をご覧ください。
離散プロパティ アニメーション
2023 年には、display: none との間のアニメーションなど、個別のアニメーションをアニメーション化する機能も追加されました。Chrome 116 以降では、キーフレーム ルールで display と content-visibility を使用できます。また、0% のポイントではなく、50% のポイントで任意の離散プロパティを遷移させることもできます。そのためには、allow-discrete キーワードを使用した transition-behavior プロパティで指定するか、省略形として transition プロパティで使用します。
個別のアニメーション。スクリーンキャスト
個別のアニメーション。デモ
詳しくは、離散アニメーションの移行をご覧ください。
@starting-style
@starting-style CSS ルールは、display: none との間でアニメーション化する新しいウェブ機能を基盤として構築されています。このルールでは、要素がページ上で開かれる前にブラウザが参照できる「before-open」スタイルを要素に設定できます。これは、入力時のアニメーションや、ポップオーバーやダイアログなどの要素でのアニメーションに非常に便利です。また、要素を作成するときにアニメーションを適用したい場合にも便利です。次の例では、popover 属性（次のセクションを参照）をアニメーション化して、ビューポートの外側からビューに入り、最上位レイヤにスムーズに移動します。
@starting-style スクリーンキャスト
@starting-style デモ
@starting-style とその他のエントリ アニメーションの詳細を確認する。
オーバーレイ
遷移に新しい CSS の overlay プロパティを追加すると、最上位レイヤのスタイルを持つ要素（popover や dialog など）を、最上位レイヤからスムーズにアニメーション化できるようになります。オーバーレイを遷移しない場合、要素はすぐに切り取られて変換され、隠れた状態に戻り、遷移が発生することはありません。同様に、overlay は、::backdrop を最上位のレイヤ要素に追加した際に滑らかにアニメーション化できるようにします。
オーバーレイ スクリーンキャスト
オーバーレイのライブデモ
詳細については、オーバーレイとその他の終了アニメーションをご覧ください。
コンポーネント
2023 年は、スタイルと HTML コンポーネントが交わる大きな 1 年でした。popover のランディングなど、アンカーの位置設定やプルダウンのスタイル設定に関して多くの作業が行われました。これらのコンポーネントを使用すると、追加のライブラリを使用したり、毎回独自の状態管理システムをゼロから構築したりすることなく、一般的な UI パターンを簡単に構築できます。
ポップオーバー
Popover API を使用すると、ページの他の部分の上に配置される要素を作成できます。たとえば、メニュー、選択、ツールチップなどです。シンプルなポップオーバーを作成するには、ポップアップする要素に popover 属性と id を追加し、popovertarget="my-popover" を使用してその id 属性を呼び出しボタンに接続します。Popover API では、以下がサポートされます。
- 最上位レイヤへのプロモーション。ポップオーバーはページの他の部分の上にある別のレイヤに表示されるため、Z-Index をいじる必要はありません。
- ライトを閉じる機能。ポップオーバー領域の外側をクリックすると、ポップオーバーが閉じてフォーカスが戻ります。
- デフォルトのフォーカス管理。ポップオーバーを開くと、次のタブ停止がポップオーバー内にあります。
- ユーザー補助機能のキーボード バインディング。
escキーを押すか、2 回切り替えると、ポップオーバーが閉じてフォーカスが戻ります。 - ユーザー補助コンポーネント バインディング。ポップオーバー要素を意味的にポップオーバー トリガーに接続する。
ポップオーバーのスクリーンキャスト
ポップオーバーのライブデモ
セレクト ルール
HTML のもう一つの小さな変更点は、今年 Chrome と Safari に実装されたことです。水平ルール要素（<hr> タグ）を <select> 要素に追加して、コンテンツを視覚的に分ける機能です。これまでは、<hr> タグを SELECT タグに入れてもレンダリングされませんでした。今年は Safari と Chrome の両方でこの機能がサポートされ、<select> 要素内のコンテンツをより適切に分離できるようになりました。
スクリーンショットを選択
[ライブデモ] を選択
SELECT で HR を使用する方法の詳細を確認する
:ユーザー有効な疑似クラスと無効な疑似クラス
今年はすべてのブラウザで安定版になりました。:user-valid と :user-invalid は :valid 疑似クラスと :invalid 疑似クラスと同様に動作しますが、ユーザーが入力をかなり操作した後にのみ、フォーム コントロールに一致します。必須の空のフォーム コントロールは、ユーザーがページにアクセスし始めていない場合でも、:invalid に一致します。ユーザーが入力を変更して無効な状態のままにするまで、同じコントロールは :user-invalid に一致しません。
これらの新しいセレクタを使用すると、ユーザーが変更した入力を追跡するためにステートフル コードを記述する必要がなくなります。
:user-* スクリーンキャスト
:user-* ライブデモ
詳しくは、user-* フォーム検証の疑似要素の使用方法をご覧ください。
限定アコーディオン
対応ブラウザ
- 120
- 120
- x
- 17.2
ウェブでよく見られる UI パターンは、アコーディオン コンポーネントです。このパターンを実装するには、いくつかの <details> 要素を結合し、視覚的にグループ化して、互いに属していることを示します。
Chrome 120 では、<details> 要素の name 属性がサポートされるようになりました。この属性を使用すると、同じ name 値を持つ複数の <details> 要素がセマンティック グループを形成します。一度に開くことができる要素は、グループ内の 1 つまでです。グループから <details> 個の要素の 1 つを開くと、前に開いた要素が自動的に閉じます。このタイプのアコーディオンは、排他的アコーディオンと呼ばれます。
排他的アコーディオンに含まれる <details> 要素は、必ずしも兄弟である必要はありません。ドキュメント内に散らばってもかまいません。
CSS は、ここ数年、特に 2023 年の間に、このような復活を遂げました。CSS を初めて使用する場合や基礎を復習したい場合は、無料の CSS 学習コースと、web.dev にある他の無料コースをご覧ください。
楽しいホリデー シーズンをお過ごしください。これらの素晴らしい新しい CSS と UI の機能を、ぜひご自身の仕事に取り入れてみてください。
⇾ Chrome UI DevRel チーム
