[css-conditional] Nested at-rules within at-rule()

[andruud]

Some at-rules are only valid within a certain other at-rule, e.g. margin rules within @page, or @swash (etc) within @font-feature-values.

So, how do these evaluate?

@supports at-rule(@swash) {}
@supports at-rule(@top-left) {}

It seems unwise to just ignore context, since a given @foo may be specified to exist in more than one context, with different meanings (and possibly different descriptors being valid).

This was discussed during #2463, but I don't see a conclusion.

[bramus]

In #6966 (comment) I suggested to allow authors to either test for an at-rule’s name or an actual full at-rule.

That would allow the following:

@supports at-rule(@page { @top-left { ... }}) {
  …
}

… which I believe fixes this issue.

[cdoublev]

@supports ( <ident> | [<at-keyword-token>#? , [<ident> | <declaration]?]! ) { ... }?

For example, @supports (@page, @top-left), @supports(@page, size), @supports (@page, size: var(--custom)), etc.

I have not read all related discussions so I do not know the motivations for using at-rule, and that might not always be enough to fully define the context. But mirroring CSS.supports() seems nice.

[bramus]

I have not read all related discussions so I do not know the motivations for using at-rule, and that might not always be enough to fully define the context. But mirroring CSS.supports() seems nice.

• Motivation: Feature detect support for certain at-rules. See https://brm.us/at-rule for an intro.

• Mirroring CSS.supports: That is already the case. Doing @supports at-rule(@starting-style) in CSS is equivalent to CSS.supports('at-rule(@starting-style)') in JS — this is similar to selector() feature detection.

[cdoublev]

Exact, I had CSS.supports(<declaration>) in mind whereas it takes <supports-condition>.

I already read your article before and forget about selector() and font-tech(), so now at-rule() makes sense.

Single argument blocks/functions is probably easier for authors, even if it means feeding a whole rule to define a nesting context.

[SebastianZ]

In #6966 (comment) I suggested to allow authors to either test for an at-rule’s name or an actual full at-rule.

For what it's worth, allowing to test a full at-rule's syntax is also what I suggested earlier and mentioned again in the discussion in #2463.
This allows testing nested rules as well as at-rules only consisting of preludes.

The main counter-argument back then was that it's verbose. Though like @bramus I believe it makes sense to allow both testing for the full rule and offer a simpler way. Allowing to test for the full syntax ensures that every feature of at-rules can be tested for. In addition to that we can provide short forms to test them.

Sebastian

[tabatkins]

Yeah, I think allowing both the simple "just the name" and the full-parsing "the entire rule" possibilities is probably the way to go. The latter is verbose, but for most at-rules you can leave out quite a lot and still get something valid. It also neatly answers any other structural questions we might have about testing and relationships between at-rules.

[kbabbitt]

Tagging for discussion at the upcoming F2F.

Proposal: Context is not considered in the "just the name" form but is considered in the "entire rule" form.

Details in the explainer:
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/AtRuleFeatureDetection/explainer.md#proposed-approach

[css-meeting-bot]

The CSS Working Group just discussed [css-conditional] Nested at-rules within at-rule(), and agreed to the following:

• RESOLVED: at-rule() can test for at-rules that are only valid inside other at-rules (like at-rule(@swash))

The full IRC log of that discussion

<TabAtkins> kbabbitt: issue is whether at-rules that are only valid within another at-rule can be tested by at-rule()
<TabAtkins> kbabbitt: i propose yes
<TabAtkins> TabAtkins: I also say yes
<TabAtkins> astearns: seeing nodding
<TabAtkins> astearns: objections to allowing nested at-rules to be tested by at-rule()?
<TabAtkins> RESOLVED: at-rule() can test for at-rules that are only valid inside other at-rules (like at-rule(@Swash))