@@ -576,7 +576,7 @@ Syntax {#syntax}
576576 ██████ ███████ ██ ██ ████████
577577-->
578578
579- Nesting Conditional Rules {#conditionals}
579+ Nesting Nesting Other At- Rules {#conditionals}
580580-----------------------------------------
581581
582582 In addition to [=nested style rules=] ,
@@ -594,10 +594,6 @@ Nesting Conditional Rules {#conditionals}
594594 with their [=nesting selector=] taking its definition
595595 from the nearest ancestor [=style rule=] .
596596
597- Issue: Want more than just conditional rules--
598- @scope and @layer make sense, at minimum.
599- (<a href="https://github.com/w3c/csswg-drafts/issues/7965">Issue 7965</a> )
600-
601597 Issue: Do @media/etc gain a <code> .style</code> attribute
602598 to expose their properties,
603599 or do we pretend properties are wrapped in a ''& {...}'' rule,
@@ -666,6 +662,46 @@ Nesting Conditional Rules {#conditionals}
666662 }
667663 }
668664 */
665+
666+ <b> /* Example nesting Cascade Layers */</b>
667+ html {
668+ @layer base {
669+ block-size: 100%;
670+
671+ @layer support {
672+ & body {
673+ min-block-size: 100%;
674+ }
675+ }
676+ }
677+ }
678+ /* equivalent to
679+ @layer base {
680+ html { block-size: 100%; }
681+ }
682+ @layer base.support {
683+ html body { min-block-size: 100%; }
684+ }
685+ */
686+
687+ <b> /* Example nesting Scoping */</b>
688+ .card {
689+ inline-size: 40ch;
690+ aspect-ratio: 3/4;
691+
692+ @scope (&) {
693+ :scope {
694+ border: 1px solid white;
695+ }
696+ }
697+ }
698+
699+ /* equivalent to
700+ .card { inline-size: 40ch; aspect-ratio: 3/4; }
701+ @scope (.card) {
702+ :scope { border-block-end: 1px solid white; }
703+ }
704+ */
669705 </pre>
670706 </div>
671707
0 commit comments