2022年のCSS

by

https://gihyo.jp/design/column/newyear/2022/css-prospect

新春特別企画のブラウザとウェブ標準動向について紹介します。

  • Compat 2021とInterop 2022で互換性の向上
  • :focus-visible擬似クラスが全ブラウザでサポート：「フォーカスリングを出すべき状態」にマッチする擬似クラス。リンクやフォーム入力欄，マウスにTabキーで移動した場合にはフォーカスリングを出すが，ボタンをマウスクリックする場合は出さない。
  • Scroll-linked Animationsが実装中：画面をスクロールしたらふわっと要素が出てきたり，ページ上部にどれくらい読んだかを示すインジケーターバーを出す表現をCSSで可能にする。Chromeでは以前から実装が行われており，Firefoxでも実装が始まっている。
  • Safariが先行して実装する興味深い機能たち
    • LCH色空間など，より直感に近い色の指定ができる記法や，相対色を記述できる記法，色を混ぜ合わせるcolor-mix()関数などがCSS Colorモジュールに追加される。
    • sin()，cos()，tan()といった三角関数，ほかにもabs()，round()などの数学関数も実装。色の変換やアニメーションで複雑な計算を行いたいときに使うかも。
    • ビューポートの最小時や最大時，動的に変化するビューポートを参照する単位，svw/svh，lvw/lvh，dvw/dvhなどが仕様に追加。
    • 可変フレームレートでのアニメーションをよくすべく，AppleはWeb Animations仕様の拡張を提案。
  • カスケードレイヤーが全ブラウザでサポート：セレクタの詳細度よりも優先されるレイヤー（layers）という概念を導入し，宣言の優先順位をコントロールしやすくする仕組み。
  • :has()擬似クラスの実装：親や祖先を選択するセレクタ。
  • コンテナクエリーの実装も進む：レスポンシブなコードを書いているときに，画面幅ではなく，スタイルを適用するブロックの幅でスタイルを書き分けられたらと思うことはしばしば。コンテナクエリーは、ページ中のある要素をコンテナとして定義し，その幅に応じてスタイルを書き分けられる仕組み。将来的には幅だけでなく，スタイルやステートに応じたクエリーも書けることが提案されているなど，かなり夢のある仕様。
  • ネスト，条件ブロック，スコープの仕様もドラフトが公開：CSS Nesting仕様、複雑な条件をまとめる構文の需要（@whenと@elseというルールが提案 in CSS Conditional Rules Module Level 5）、スコープ（CSS Cascading and Inheritance Level 6）。ただし、いずれも構文を含めまだまだこれからという状態。