43862 container style queries

[dletorey]

Description

• Added syntax for range syntax for @container style() queries
• Added example for range syntax for @container style() queries
• Added see also link for CSSContainerRule

Motivation

• Working on MDN Issue #43862

Related issues and pull requests

• BCD PR
• FF Relase PR

[github-actions]

Preview URLs (1 page)

• /en-US/docs/Web/CSS/Reference/At-rules/@container

Flaws (12)

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/CSS/Reference/At-rules/@container
Title: @container CSS at-rule
Flaw count: 12

• broken_links:
  • Link /en-US/docs/Web/CSS/Reference/Values/block-contents doesn't resolve
  • Link /en-US/docs/Web/CSS/Reference/Values/size-feature doesn't resolve
  • Link /en-US/docs/Web/CSS/Reference/Values/scroll-state-feature doesn't resolve
  • Link /en-US/docs/Web/CSS/Reference/Values/function-token doesn't resolve
  • Link /en-US/docs/Web/CSS/Reference/Values/any-value doesn't resolve
  • and 7 more flaws omitted

(comment last updated: 2026-05-05 10:13:09)

[hamishwillee]

This example would be OK if it was expected to be an example, but the way this (whole) document is constructed this is both a description and an example.

I would say the whole @container is broken and should be rewritten so this stuff is in a ## Description section - see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@keyframes etc for precedent.
That's a bigger job and you might not want to do that, but if you're not, then this needs to do the job of such a descriptive section. To see what I mean, have a look at the previous example above.

So what does this need to say. Firstly, this says that a range query compares a style feature to a value, where style feature is linked to https://pr44003.review.mdn.allizom.net/en-US/docs/Web/CSS/Reference/At-rules/@container#container_style_queries

If you look at that link the style features are shown by example like this

 style(--themeBackground),
    not style(background-color: red),
    style(color: green) and style(background-color: transparent),
    style(--themeColor: blue) or style(--themeColor: purple) {

The definitions says

A <style-feature> is a valid CSS declaration, a CSS property, or a <custom-property-name>.

But looking at this it only "makes sense" if you have something that maps to a numeric value. So basically you probably need to be more precise about the intent. Where it is used, and what it is intended for. Show abstract example of a range, then show your more real world example that demonstrate how it all works.

Hope that makes sense?

[dletorey]

RE:

The definitions says

A <style-feature> is a valid CSS [declaration](https://github.com/en-US/docs/Web/CSS/Guides/Syntax/Introduction#css_declarations), a CSS property, or a [<custom-property-name>](https://github.com/en-US/docs/Web/CSS/Reference/Values/var#values).

I spent way too long trying to get this to work with Declarations & properties and when I reached out I was told that this should work but Browser vendors ahve choosen not to implement these (yet…)

---

I shall revisit this page once I have worked through the other MDN Issues in the list