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

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

Adam Argyle

今年初めに Chrome 112 で CSS ネストがリリースされ、現在は各主要ブラウザで利用できます。

Browser Support

• 120
• 120
• 117
• 17.2

Source

ただし、構文には厳格で予期しない要件が 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 プロパティと値ではなくネストされていることをブラウザに示していました。

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