Baseline Newly available: Container style queries・:open・SharedWorker、Baseline Widely available: lh・clip-path・:user-invalid

438文字
2分
編集

State of CSS 2026 調査が7月1日まで受付中である。

Baseline Newly available:

  • Container style queries。親コンテナのカスタムプロパティに基づいて子要素へスタイルを当てられ、サイズクエリだけでは表現しにくいテーマ切り替えをクラス構造に頼らず組み立てやすくなる
  • :open 疑似クラス。detailsdialog など開閉状態を持つ要素を、属性やクラス管理なしに開いたときだけスタイルできる
  • ToggleEvent.source。Popover API のトグルイベント発生元コントロールを返し、複数トリガーからのポップオーバー連携を追跡しやすくする
  • image-rendering。画像リサイズ時のスケーリング算法を指定でき、ピクセルアートや QR コードなどぼかしを避けたい用途向け
  • text-decoration-skip-ink: all。下線が descender と交差しない場合でも全グリフをスキップし、auto よりタイポグラフィの制御幅を広げる
  • SharedWorker。同一オリジンの複数タブ・ウィンドウ・iframe から共有できるバックグラウンドワーカーで、タブ横断の状態共有や接続管理に使える

Baseline Widely available:

  • lh 相対長さ単位。要素自身の computed line-height に対応し、行高に合わせたアイコンバッジやハイライトのサイズ指定を簡潔にする
  • rlh 相対長さ単位。ルート要素の line-height を基準にページ全体の垂直リズムを揃えやすくする
  • Navigator.userActivation。現在および過去のユーザーアクティベーション状態を返し、動画再生・ポップアップ・クリップボードなどジェスチャー必須 API の実行可否をスクリプト側で確認できる
  • clip-path。円・多角形・SVG パスなどで要素の表示領域を切り抜き、overflow を隠さずレイアウトやトランジションを組み立てられる
  • :user-invalid 疑似クラス。:invalid と異なりユーザー操作後にだけ無効フォームへスタイルを当て、初期表示でのバリデーション UI を避けられる

#参考文献