[css-cascade-5] Do conditional rules impact layer order? · Issue #6407 · w3c/csswg-drafts (original) (raw)

In CSS Cascading & Inheritance L5 we define the @layer rule, and the way layers "stack" in priority based on the order they are first encountered. These will stack so the higher numbers override the lower numbers:

@layer one; @layer two; @layer three;

In general, layers should interact well with conditional rules. In isolation these two rules should mean the same thing:

@layer one { @media (width > 500px) { /* styles */ } }

@media (width > 500px) { @layer one { /* styles */ } }

If the media-condition is true, then the styles are applied in the specified layer (one). But it's a bit less clear how the second example (layer inside condition) should impact the order of multiple layers:

@media (width > 500px) { @layer one { /* styles */ } }

@layer two; @layer three; @layer one;

Does layer one come first, last, or does it update dynamically based on the evaluation of the condition? I think the two options are roughly:

1. Layers are always added to the order, no matter how the condition might resolve. It's as though the layer rules "bubble up" to be defined outside the condition, but the styles are still conditional. This matches my instinct, personally.
2. Layer order is dynamic, based on conditions? It's interesting to consider, but could get pretty surprising…

This question is also relevant to other conditions, such as @supports or @container.