- 2023年はCSSにとって非常に大きな年だった。Webプラットフォームでは不可能と思われていた機能を実現する、CSSおよびUI分野の多くの新機能が登場した
- すべての主要ブラウザーが、コンテナクエリ、サブグリッド、
:has() セレクターなどをサポートし、新しい色空間や関数もサポートしている
- ChromeはCSSだけで、スクロールベースのアニメーションやWebビュー間の滑らかな遷移をサポートした
- CSSネストやスコープ付きスタイルのように、開発者体験を改善する新しい基本要素も数多く導入された
Architectural foundations
Trigonometric functions
- Chrome 111は、
sin()、cos()、tan()、asin()、acos()、atan()、atan2() のような三角関数をサポートした
- これらの関数は、アニメーションやレイアウトの用途で非常に有用
Complex nth-* selection
:nth-child() 疑似クラスセレクターを使うと、DOM内の要素をインデックスで選択できる- Chrome 111以降では、
:nth-child() と :nth-last-child() にセレクターリストを任意で渡せるようになった
Scope
- Chrome 118は、ドキュメントの特定のサブツリーにセレクターの一致範囲を限定する
@scope をサポートした
- スコープされたサブツリーは、スコープルート と任意の スコープ境界 によって定義される
Nesting
- ネストを使う前は、すべてのセレクターを個別に明示して宣言する必要があった
- これで、関連するスタイルルールをグループ化しながらセレクターを継続して使えるようになった
Subgrid
- CSS
subgrid を使うと、より複雑なグリッドを作成でき、子レイアウト間でより良い整列が可能になる
- 内側のグリッドが、外側のグリッドの行と列を自分のものとして採用できるようになる
Typography
Initial-letter
- Chrome 110で導入された
initial-letter プロパティは、頭文字の配置を設定する小さいながら強力なCSS機能
- 文字をドロップキャップ風にも、持ち上げた状態にも配置できる
text-wrap: balance and pretty
- 開発者は、最終サイズ、フォントサイズ、あるいは見出しや段落の言語さえ事前には分からない
balance と pretty という2つの新しいテキスト折り返し技術が導入された
Color
HD Color Spaces (Color Level 4)
- 新しい色、より多くの色、新しい色空間、色関数、そして新機能が2023年に導入された
- CSSと色は今や、HDRカラーのグラデーションを作成し、異なる色空間でグラデーションを補間できる
color-mix function
- 色の混合は古典的な作業であり、2023年にはCSSでも可能になった
- 白や黒だけでなく透明度も色に混ぜることができ、選択した色空間でそれを行える
Relative color syntax
- 相対色構文（RCS）は、色のバリエーションを生成するための
color-mix() を補完する方法
- RCSにより、色の相対的および絶対的な操作が可能になる
Responsive Design
Size container queries
- ビューポートのグローバルなサイズ情報を使う代わりに、コンテナクエリはページ内の親要素をクエリすることをサポートする
Style container queries
- スタイルクエリは、親要素のカスタムプロパティ値をクエリできるようにする
:has() selector
- 開発者は約20年にわたり、CSSで「親セレクター」を求めてきた
:has() セレクターを使うと、.card:has(img.hero) のように、子としてヒーロー画像を持つ .card 要素を選択できる
Update media query
update メディアクエリを使うと、デバイスのリフレッシュレートに合わせてUIを調整できる
Scripting media query
- scriptingメディアクエリは、JavaScriptが利用可能かどうかを確認するために使える
Reduced-transparency media query
- 非透明なインターフェースは、さまざまな種類の視覚障害に対して頭痛を引き起こしたり、視覚的に困難を生じさせたりすることがある
- このメディアクエリは、ユーザーがUIで透明度を減らす、または取り除くためのシステム設定を持っていることを示す
Interaction
View transitions
- ビュー遷移は、ページのユーザー体験に大きな影響を与える
- View Transitions APIを使うと、シングルページアプリケーションの2つのページ状態間に視覚的な遷移を作成できる
Linear-easing function
linear() 関数は、少し精度を犠牲にする代わりに、複雑なイージング関数を簡単に作れるようにする
Scroll End
scrollend イベントは、ユーザーがまだジェスチャー中かどうかを把握できる絶妙なタイミングのスクロール終了イベントを提供する
Scroll-driven animations
- スクロール駆動アニメーションにより、スクローラーのスクロールオフセットに、既存のCSSアニメーションやWeb Animations APIで作成したアニメーションを結び付けられる
Deferred timeline attachment
- CSSを通じてスクロール駆動アニメーションを適用する場合、制御対象のスクローラーを見つける仕組みは常にDOMツリーをさかのぼるため、スクロール祖先にしか限定されない
Discrete property animations
- 離散アニメーション、たとえば
display: none からアニメーションを実行する機能が、2023年に新機能として追加された
@starting-style
@starting-style CSSルールは、display: none からアニメーションを実行する新しいWeb機能に基づいている
Overlay
- 新しいCSS
overlay プロパティは、popover や dialog のような最上位レイヤーの要素が、トップレイヤー上で滑らかにアニメーション表示されるようにする
Components
Popover
- Popover APIは、ページの他の部分の上に表示される要素を作るのに役立つ
Horizontal rules in select
- ChromeとSafariは今年、
要素内に水平線要素（ タグ）を追加できる機能をサポートした
:user-valid and invalid pseudo classes
:user-valid と :user-invalid は、:valid および :invalid 疑似クラスと似たように動作するが、ユーザーが入力と十分に相互作用した後にのみフォームコントロールに一致する
Exclusive accordion
- Chrome 120では、`` 要素で
name 属性をサポートした
- この属性を使うと、同じ
name 値を持つ複数の `` 要素が意味的なグループを形成する
まだコメントはありません。