朗報！これでCSSネストの記述方法がより簡単になります

サイト構築 -CSS

Post on:2023年11月22日

はじめに

CSSのネストは、2023年3月にリリースされたChrome　112でサポートされ、現在では主要な各ブラウザでサポートされています。

CSSのネストのサポートブラウザ

しかし、CSS Nestingで取りあげたネストが無効になる例で、構文に対する厳密で予期せぬ案件が1つありました。この記事では、ネストの仕様で何が変わったのか、Chrome 120で何が変わるのかを解説します。

CSS Nestingを翻訳した当ブログの記事は、下記をご覧ください。

CSSのネストがついにブラウザで使用できるようになった！基礎知識、便利な使い方を詳しく解説

要素タグのネスト

CSSネストの構文で最初のリリースにおける制限の1つは、HTMLの要素タグ名をネストできないことでした。最初のリリース時には、要素タグをネストするときには、前に&記号を加えるか:is()で内包する必要がありましたが、下記のようにHTMLの要素タグを直接ネストできるようになります。

.card {
  h1 {
    /* &記号なしでも、有効になります! */
  }
}

.card {
  & h1 {
    /* リリース時の仕様 */
  }
}

.card {

h1 {

/* &記号なしでも、有効になります! */

}

.card {

& h1 {

/* リリース時の仕様 */

}

&記号なしでも有効になった仕様は、順序付きリスト・順序なしリスト・定義リストを入れ子にするときに直感的で非常に便利です。

dl {
  dt {
    /* dl dtのスタイル */
  }

  dd {
    /* dl ddのスタイル */
  }
}

dl {

dt {

/* dl dtのスタイル */

}

dd {

/* dl ddのスタイル */

}

このネストを可能にするために何が変更されたのか

これはChromeのエンジニアによる調査とプロトタイプ作成に加え、コミュニティやCSS Working Groupからの要望によるものです。

現在、CSSパーサーには先を読むというコンセプトがないため、タグ名（div）とプロパティ名（visibility）を区別させることができるかどうかについてかなりの疑問がありました。未知のトークンの後に;が続くかどうかを確認する必要があります。そのため、元の仕様では&記号はその後に続くものが入れ子になっており、通常のCSSプロパティと値ではなくネストされていることをブラウザに示すために使用されていました。

幸いなことに、あるエンジニアがパーサーが通常の消費パスに従ってネストされたセレクタをプロパティとして解析できなかった場合、プロパティではなくセレクタを想定したモードで再開できることを発見しました。パースが再開されると、ネストはセレクタのネストとして認識されます。これは十分に後続で信頼性が高いため、構文をリリースするのに十分であると判断されました。