このページは Cloud Translation API によって翻訳されました。

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

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

Adam Argyle

今年、Chrome は 112 に CSS ネストをリリースしており、主要なブラウザで利用できるようになったことです

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

しかし、この規制には厳しい要件が 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）は、次のように区別します。パーサーには現在、先を見据えた概念はありません。kubectl の「get pods」がプロパティであるため、ブラウザは先を見て、: がその後に続くかどうかを確認する必要があります。未知のトークンが返されます。そのため、元の仕様では、& 記号を使用してその後に続くものが通常の CSS ではなく、ネストしていることをブラウザに示すプロパティと値を使用します。

幸いなことに、エンジニアは、パーサーがコードを解析できず、ネストされたセレクタは、通常の消費パスに従ってプロパティとして定義されるため、プロパティではなくセレクタを想定したモードで再起動されます。解析再開され、このネストがセレクタのネストとして認識されます。処理速度は十分で、その構文を解放するのに十分であると判断できるほどの信頼性があります。