CSS ネストの緩和された構文の更新

Chrome 120 で先読みネストが有効になりました。

Adam Argyle

今年の初めに Chrome は CSS ネストを 112 でリリースし、現在ではすべての主要ブラウザで利用できます。

ただし、無効なネストの例の最初の記事に記載されている構文には、予期しない、厳格な要件が 1 つありました。このフォローアップ記事では、仕様の変更点と Chrome 120 からの変更点について説明します。

ネスト要素のタグ名

CSS のネスト構文の最初のリリースにおける驚くべき制限の 1 つは、要素単位のタグ名をネストできないことでした。この機能が無効化されたため、次の CSS ネストが有効になります。

.card {
  h1 {
    /* this is now valid! */
  }
}

/* the same as */
.card {
  & h1 {
    /* this is now valid! */
  }
}

これは、順序付きリスト、順序なしリスト、定義リストをネストする場合に非常に便利です。

dl {
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

このネストが可能になった理由

これは主に、Chrome エンジニアによる調査とプロトタイピング、そしてコミュニティと CSS ワーキング グループからの要望のおかげです。

現在、パーサーには先を見越すという概念がないため、CSS パーサーがタグ名（div）とプロパティ名（visibility）を区別するよう学習できたかどうかについては、かなりの疑問がありました。トークンがプロパティであることを認識するため、ブラウザは未知のトークンの後に : が続くかどうかを確認する必要があります。そのため、元の仕様では & 記号を使用して、後続の内容が通常の CSS プロパティと値ではなく、ネストされていることをブラウザに示すようになっていました。

幸いなことに、パーサーが通常の消費パスでネストされたセレクタをプロパティとして解析できなかった場合、プロパティではなくセレクタを使用するモードで再起動できることがわかりました。ネストがセレクタのネストとして認識され、解析が再開されます。構文を解放するのに十分であると判断されるほど高速で信頼性があります。