docs(foundations): add a page on CSS container queries#61
Draft
jdevalk wants to merge 1 commit into
Draft
Conversation
Documents container-type/@container size queries (CSS Containment Module Level 3) and the newer style queries (CSS Conditional Rules Module Level 5). Status: recommended — a modern site should style components by their container, but the platform works without it. Size container queries have been Baseline widely available since February 2023; style queries reached Baseline newly available in May 2026. Wires relatedSlugs on anchor-positioning, css-containment, and dynamic-viewport-units; adds the changelog entry and OG images. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Deploying specification-website with
|
| Latest commit: |
06c2e1f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://f0c677f5.specification-website.pages.dev |
| Branch Preview URL: | https://standards-scan-container-que.specification-website.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds a new spec page: CSS container queries under
foundations.Covers both halves of the feature:
container-type/container-name+@container (min-width: …), so a component responds to the space its container gives it rather than the viewport.@container style(--custom-prop: …), testing a container's computed custom properties.Also:
relatedSlugsboth ways on three adjacent pages (anchor-positioning,css-containment,dynamic-viewport-units).addedchangelog entry.og-default,og/checklist,og/spec,og/spec/foundations).Why now
Container queries are a notable gap in an otherwise comprehensive modern-CSS set (we already cover anchor positioning, scroll-driven animations, text-wrap, css-containment, dynamic viewport units). Style queries reached Baseline (newly available) in May 2026, which prompted the audit — and surfaced that size queries (Baseline widely available since February 2023) were never documented either.
Primary sources
container-type,container-name,@container(W3C CSS WG).style()(W3C CSS WG, Working Draft 27 May 2026).@containerfor context (canonical current URL).Status
recommended— a modern, component-based site should style by container, not viewport, but the platform contract does not break without it. Notrequired.Checks
npm run buildpasses; page renders and appears at the HTML route, the.mdendpoint, and in/llms.txt.npm run lint(0 errors; 1 pre-existing warning in an untouched file) andnpm run format:checkpass.Opened as a draft for maintainer review per the daily standards-scan routine — not for auto-merge.
🤖 Generated with Claude Code