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

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

Adam Argyle

今年、Chrome は 112 で CSS ネストをリリースしましたが、現在では各主要ブラウザに対応しています。

対応ブラウザ

• 120
• 120
• 117
• 17.2

ソース

ただし、構文には厳格で予期しない要件が 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 ワーキング グループからの要望を組み合わせたものです。

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

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