2022年に注目したいCSSの新機能8選

2022年以降に実装されるCSSの新機能のうち、私が気になったものをピックアップしてみました。

コンテナクエリ - @container

「コンテナクエリ」という新たなレスポンシブ対応の手法です。

メディアクエリは「画面サイズ」でスタイルを変えますが、コンテナクエリは「要素の幅（width）」でスタイルを出し分けます。

コンテナクエリを使うには2つの準備が必要です。

1. 基準にする要素にcontainerプロパティを定義する
2. @containerの中に、基準の要素のwidthに応じたスタイルを定義する

.grid-wrapper {
  container: inline-size / grid_wrapper;
}

@container grid_wrapper size(max-width: 700px) {
  .grid {
    /* .grid-wrapperのwidthが700px以下になった時のスタイル */
  }
}

上記サンプルコードの「基準にする要素」は.grid-wrapperです。containerプロパティのgrid_wrapperの部分には任意の名前を付けます。

@containerの後には先程付けた名前を定義して、その中にwidthに応じたスタイルを定義します。

ちなみに、containerプロパティをセットした要素のスタイルは@containerでは変えられません。親子関係でなければいけません。

サポート状況：https://caniuse.com/css-container-queries

条件式 - @when/@else

CSSで条件式（@when/@else）が使えます。例えば、メディアクエリを以下のように書いているとします。

@media (min-width: 640px) {
  /* 640px以上のスタイル */ 
}
@media (max-width: 639px) {
  /* 640px未満のスタイル */
}

これを、@when/@elseを使うと以下のようにスマートに書けるようになります。

@when media(min-width: 640px) {
  /* 640px以上のスタイル */
}
@else {
  /* 640px未満のスタイル */
}

さらに、@elseに条件式を追加したり、@supportsを使うこともできます。

@when media(min-width: 900px) {
  /* ... */
} @else media(min-width: 600px) and supports(display: grid) {
  /* ... */
} @else {
  /* ... */
}

サポート状況：https://caniuse.com/css-when-else

アクセントカラー - accent-color

accent-colorプロパティを使うことで、フォーム系のタグ（チェックボックスやラジオボタン）の色を変えることができます。

サイト全体に適用させたい場合は:rootに、任意の<form>や<input>に適用させたい場合は、そのタグやクラスにaccent-colorプロパティを指定してあげます。

:root {
    accent-color: red;
}

form {
    accent-color: blue;
}

input[type="checkbox"] {
    accent-color: pink;
}

サポート状況：https://caniuse.com/css-when-else

カスケードレイヤー - Cascade Layers

個人的にかなり注目している新機能のひとつです。スタイルの優先度をレイヤー構造で制御できます。

まずはサンプルコードを用意しました。

/* layerの優先度順を定義（この場合、後ろに書いたsecondのほうがfirstより優先度が高い） */
@layer first, second;

/* layer単位でスタイルを定義 */
@layer second {
  .element {
    color: red;
  }
}

@layer first {
  .element {
    color: pink;
  }
}

通常、同じ優先度の場合、上より下に書いたスタイルが適用されます。しかし、@layerを使うことで、優先度を無視してグループごとにスタイルの優先度を設定することができます。

先程のサンプルコードの場合、.elementには、下に書いたcolor: pinkより上に書いたcolor: redが適用されます。これは、１行目で定義した@layer first, second;が関係しています。

@layerの後にレイヤー名を任意の名前で任意の数だけ指定できます。このレイヤーは、後に書いたほうが優先度が高くなります。つまり、firstよりsecondのほうが優先度が高くなります。

既存のCSSをメンテナンスするときに、タグやclass、idなど様々なセレクターにスタイルが指定されていて、優先度がごちゃごちゃの時に、このカスケードレイヤーは活躍すると思います。

他にも、通常の開発時にも使える良い書き方やCSS設計がこれから生まれるかもしれないので、カスケードレイヤーの動向はこれからも追っていこうと思います。

サポート状況：https://caniuse.com/css-cascade-layers

スクロールタイムライン - @scroll-timeline

@scroll-timelineを使うことで、CSSのみでスクロールアニメーションを作れます。将来、パララックスのスクロールアニメーションはCSSで実装するのが当たり前になる日が来るかもしれません。

@keyframesでアニメーションの動きを作り、@scroll-timelineでスクロール量の設定を行います。@scroll-timelineは以下のように記述します。

.element {
  animation-timeline: anima-timeline-name;
}

@scroll-timeline anima-timeline-name {
  start: 0%;
  end: 50%;
  time-range: 10s;
}

startとendでスクロールアニメーションの範囲を指定して、time-rangeでアニメーションの進行度合いを指定します。

ネスト（入れ子） - Nesting

SassのようにネストでCSSを書けます。擬似クラスや疑似要素を書くのが楽になりますね。

.block {
    display: flex;
    &__element {
        flex: 0 0 auto;
    }
}

.link {
    color: #fff;
    &:hover {
        color: #000;
    }
}

サポート状況：https://caniuse.com/css-nesting

新たなビューポート単位 - New Viewport Units（svh, lvh, dvh）

ビューポートを基準にする単位vhには、ブラウザのナビゲーションバーなどの高さも含まれてしまいます。この問題を解決するために3つの新しい単位が生まれました。

• svh：最も小さい状態の時のビューポートの高さ
• lvh：最も大きい状態の時のビューポートの高さ
• dvh：状態に応じたビューポートの高さ

（svw, lvw, dvwの横バージョンもあります）

サポート状況：https://caniuse.com/viewport-unit-variants

新しいメディアクエリの書き方 - Media Query Ranges

メディアクエリの書き方が楽になります。直感的でとても分かりやすいと思います。

/* 従来の書き方 */
@media (min-width: 375px) and (max-width: 750px) {
  /* ... */
}

/* 新しい書き方 */
@media (375px <= width <= 750px) {
  /* ... */
}

まとめ

便利なCSSはどんどん追加されていますが、ブラウザの対応状況をしっかりと確認したうえで使うようにしたいですね。

今回参考にしたサイトは以下になります。

• New CSS Features In 2022
• CSS in 2022