Repository navigation
[css-conditional] Nested at-rules within at-rule() #11117
Description
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.
Activity
bramus commentedon Nov 1, 2024
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:
… which I believe fixes this issue.
cdoublev commentedon Nov 2, 2024
@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 mirroringCSS.supports()seems nice.bramus commentedon Nov 2, 2024
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 toCSS.supports('at-rule(@starting-style)')in JS — this is similar toselector()feature detection.cdoublev commentedon Nov 3, 2024
Exact, I had
CSS.supports(<declaration>)in mind whereas it takes<supports-condition>.I already read your article before and forget about
selector()andfont-tech(), so nowat-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 commentedon Nov 5, 2024
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 commentedon Jul 15, 2025
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 commentedon Aug 4, 2025
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 commentedon Aug 20, 2025
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))
[css-conditional-5] Spec at-rule() per CSSWG resolutions. w3c#2463, w…
Update at-rule() implementation and test to match CSSWG resolutions
Update at-rule() implementation and test to match CSSWG resolutions
Update at-rule() implementation and test to match CSSWG resolutions
Update at-rule() implementation and test to match CSSWG resolutions
[css-conditional-5] Spec at-rule() per CSSWG resolutions. #2463, #6966,
Bug 1994290 [wpt PR 55430] - Update at-rule() implementation and test…
Update at-rule() implementation and test to match CSSWG resolutions