CSS Nesting が Chrome でサポートしたので試す

こんにちは森田です。
先日、Google Chrome 112 がリリースされ ついにネイティブのCSS でネストが可能になりました。

参考： New in Chrome 112 – Chrome Developers

今回は CSS Nesting を Chrome で試してみようと思います。

CSS Nesting とは

CSS をネスト（入れ子）にして書ける記法です。Sass でお馴染みの機能ですね。

HTML と同様な構造で CSS を書くことができ、重複する親セレクタの記法も不要なため圧倒的に CSS が書きやすくなります。
Sass を使うメリットのほとんどがネストと言っても過言ではないので、これが CSS に入ったことで確実に Sass を使うメリットは減りますね。

参考：CSS Nesting Module

Google Chrome 112 よりサポート

Chrome をアップデートしバージョンが112以上になっていれば CSS Nesting を利用できます。
早速手元の Chrome を最新バージンにしました。

その他のブラウザのサポート状況

2023年4月現在の Can I use を見ると Chrome 以外は対応してないです。
次のバージョンから Safari でも使えるようになるみたいです。

Edge とOpera は設定でをオンにすれば試すことはできます。
Firefoxは言わずもがな使えませんね。また足を引っ張りそうな予感。。

全てのブラウザーで使えるようになりにはまだ時間がかかりそうです。

CSS Nesting を試す

さて、CSS Nesting を試してみましょう。
まずは 以下のような h1 要素で試してみます。（適当な HTML ですみません）

<h1 class="h1">h1テキスト<span class="span">h1 > span</span></h1>

CSS は以下のように書いてみます。

.h1 {
  > span {
    font-size: 0.75em;
    color: tomato;
  }
}

ブラウザで見てみると…

使えてますね。すごい。
h1 要素の中の span 要素にスタイルが効いています。

子セレクタ > を使いましたが、隣接セレクタ + などももちろん使えます。

「&」を使い擬似クラスなどをネストする

擬似クラスも & 記号を使うことでネストすることができます。
これもsass ではお馴染みのアンパサンドと呼ばれていた機能ですね。

以下のようなリストの HTML で試してみます。

<ul class="ul">
  <li class="li"><a href="#">リスト1</a></li>
  <li class="li"><a href="#">リスト2</a></li>
  <li class="li"><a href="#">リスト3</a></li>
  <li class="li"><a href="#">リスト4</a></li>
</ul>

CSS は以下のようにして .li のなかの a 要素の hover に下線を入れてみます。

.ul {
  > .li {
    list-style-type: circle;
    font-size: 18px;
    > a {
      color: #e3e;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

ちゃんと hover を指定することができました。

他の擬似クラスや擬似要素も同様にネストすることができます。
ここは Sass とほとんど一緒に使えて便利ですね。

メディアクエリをネストする

メディアクエリもネストすることができます。

.ul {
  .li {
    > a {
      color: #e3e;
      text-decoration: none;
      @media (width >= 1024px) {
        color: #66e;
        font-weight: bold;
      }
  }
}

一部のちょっとした場面で使うにはいいと思いますが、多用すると Sass と同様に可読性は悪くなるので、沢山書く場合は @media をルートにしてまとめて書く方が良さそうです。

CSS Nesting と Sassの違う注意点

要素セレクタをそのままネストできない

ネストに要素セレクタがある場合そのままセレクタも書いても使えません。
& や > を手前に付けましょう。

/* NG */
.list {
  li {
    font-size: 18px;
  }
}

/* OK */
.list {
  & li {
    font-size: 18px;
  }
}
/* これもOK */
.list {
  > li {
    font-size: 18px;
  }
}

& で class の連結は使えない

Sass で BEM を使う時によく使われていた以下のような記法があります。

.ul {
  &__li {
    font-size: 18px;
  }
}
/* 
Sassでは、
.ul__li {
  font-size: 18px;
}
とコンパイルされる
*/

この書き方は使うことができませんでした。
ここは Sass と違うところなので注意が必要そうです。

まとめ

ほとんど Sass と一緒の感覚で使うことができましたね。
実際のところ現状のフロントエンド開発環境は100%ビルドするので、あまり出番はなさそうに感じました。

WordPress などの CMS で管理画面から 直接 CSS を触る場合などはとても便利そうです。

関連リンク

• New in Chrome 112 – Chrome Developers
• CSS Nesting Module
• CSS Nesting – Chrome Developers