CSS Nesting が全ブラウザでサポートしたのであらためて確認する

お元気ですか？森田です。
CSSセレクタをネストして書ける。そんな Sass（SCSS記法）に衝撃を覚えてからもう何年経ったでしょうか？あの時に感じたパラダイムシフトを超えるものは未だにありません。多分。

そんなネストが CSS でも仕様策定され、いよいよ全てのモダンブラウザでサポートされました。

参考：CSS Nesting Module

CSS Nesting とは

概要や検証は以前記事で試したのでそちらを見ていただきたいのですが、その名の通り CSS をネスト（入れ子）にして書ける記法です。

ブラウザのサポート状況

今年の4月の Chrome が対応した際はまだ Chrome 以外赤かったですが、9月現在は Safari も Edge も Firefox も対応し主要ブラウザは Can I use でオールグリーンになりました。

いよいよ、CSS をネストして書くのが当たり前の時代がやってきましたね。

CSS Nesting を試す

簡単に CSS Nesting を試してみましょう。
まずは 以下のような CSS を書いてみます。

.css_nesting_test {
  > p {
    color: red;
    font-size: 18px;
  }
}

.css_nesting_test classの中の p要素 入れ子に文字色と文字サイズを指定してみました。

もう使える？

全てのモダンブラウザに対応となりましたが、正直、すぐに本番投入するのは時期尚早と言えるでしょう。

CSS Nesting 未サポートのブラウザではネストされた CSS が全て読み込まれないためにサイトが大きく崩れることが予想されます。

特に iOS はブラウザのアップデート = OSのアップデートなので時間がかかると考えます。

まだ当分はプリプロセッサー

CSS Nesting 使いたいですが、未サポートのブラウザへのデメリットが大きすぎるので、まだ当分は Sass やPostCSS などのプリプロセッサーを使うのが安全そうです。

未検証ですが polyfill も開発されているようなので、どうしても使う場合はこちらの利用も検討できるかもしれません。
css-nesting-polyfill

まとめ

最近の CSS の書き方は、 ゼロランタイムの CSS in JS や CSS Modulesや Tailwind など様々な方法がありますので、ピュア CSS を書く機会は少ないかもしれませんが、便利になることは間違いないですね。

気長に待とうと思います。

関連リンク

• CSS Nesting Module
• CSS Nesting | Can I use…
• Firefox 117.0, See All New Features, Updates and Fixes