CSS最新情報をキャッチアップ！「State of CSS 2022」で気になったもの #CSS

State of CSS 2022が公開されていましたので、自分なりに読み解いた中で気になったもののみ抜粋させていただきます。
英語に不慣れなため解釈が間違っている部分もあるかもしれないことをご容赦ください。
（2022 and beyond のものはこの後頑張ります）

＠layer

CSSの優先位順位はclass、id、要素などセレクタの得点方式や記載が後のもの優先されるといったルールがあります。@layerは優先順位を先に定義することができます。
下記のコードでは詳細度を上げていてもutilitiesに記載されている内容が反映されます。

/* 後ろに記載したものが優先される */
@layer theme, layout, utilities;

@layer utilities { 
  .padding-sm {
    padding: 0;
  }

  .padding-lg {
    padding: 0;
  }
}


@layer layout {
  body #box .padding-sm {
    padding: 2rem;
  }

  body #box .padding-lg {
    padding: 5rem;
  }
}

ブラウザの検証ツールで確認したところ下記のような表示になりました。

すでにChromeなどのモダンブラウザにも対応しているようです。

Container queries

レスポンシブの実装でメディアクエリを使うとき、判定できるのはブラウザの画面幅だけでした。container queriesはHTMLの要素単位での判定ができるようになります。
下記のコードでは偶数番目のboxItemが200px以下になると背景色が変更される想定です。（ブラウザ未対応のようで確認できませんでした）

<div class="boxWrap">
  <div class="boxItem"></div>
  <div class="boxItem"></div>
  <div class="boxItem"></div>
  <div class="boxItem"></div>
</div>

.boxWrap {
  display: flex;
  margin: 0 auto;
  max-width: 500px;
  flex-wrap: wrap;
  gap: 20px 4%;
}

.boxItem {
  width: 48%;
  height: 200px;
  container-type: inline-size;
  container-name: box;
  &:nth-of-type(even) {
    background: #ccc;
  }
  &:nth-of-type(odd) {
    background: #888;
  }
}

@container box (max-width: 200px) {
  .container-item {
    &:nth-of-type(even) {
      background: #222;
    }
  }
}

accent-color

accent-colorを設定するとフォームに設置する下記の要素に対して、もとのUAの表示を維持したまま色を揃えることができます。

radio
checkbox
progress
range

また、この設定はシステムのカラーにも適応するとのことなのでダークモードなどでの表示でもブランドカラーを維持して表示してくれるとのこと。

下記のキャプチャはMac Chromeでの表示です。

iPhoneのChromeではこのようになりました。

hwb()

HWBカラー・モデルの色相（Hue）、白色度（Whiteness）、黒色度（Blackness）で入力できるプロパティです。

/* hwb(色相 白色度 黒色度 / アルファ値); */
.box {
  height: 100px;
  width: 100px;
  hwb(200 75% 0%);
}

.box_sub {
  height: 50px;
  width: 50px;
  hwb(200 50% 0% / 0.8);
}

Viewport units

スマートフォンの画面いっぱいに高さを取ろうとしたときに100vh指定した場合に、アドレスバーなどの表示があると高さの指定がうまく行かなくなるので、JavaScriptを記述して対応していました。

新たに追加されるdvh lvh svh はこの問題をCSSのみで解決できるようです。

:has()

親要素のセレクタから子要素に特定の要素があるかを判別できる擬似クラスです。少し前にも話題に上がっていたそうですが、まだブラウザ対応はsafariのみとなっているようです。

/* .childを子要素に持つ.parentを選択 */
.parent:has(.child) {...}

/* aの直下にimgがある要素を選択 */
a:has(> img)　{...}

終わりに

私としては Container queries と :has() が待ち遠しいですね。
この後 2022 and beyond の内容も見ていこうと思います。