Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 96 additions & 0 deletions css/at-rules/container.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,102 @@
"deprecated": false
}
},
"anchor_position_queries": {
"__compat": {
"description": "Anchor position queries (`anchored()`)",
"spec_url": "https://drafts.csswg.org/css-anchor-position-2/#anchored-container-queries",
Comment on lines +39 to +42
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"anchor_position_queries": {
"__compat": {
"description": "Anchor position queries (`anchored()`)",
"spec_url": "https://drafts.csswg.org/css-anchor-position-2/#anchored-container-queries",
"anchored_function": {
"__compat": {
"description": "`anchored()` function",
"spec_url": "https://drafts.csswg.org/css-anchor-position-2/#container-rule-anchored",

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The spec change I agree with, but I'm reluctant to change the description and key name.

I modeled this feature after scroll-state() (see this compat table), where we describe the feature as "Scroll-state queries" and then nest the features for that query type under it. If we do something different for anchor positioning, I think we ought to do the same for scroll-state.

Also, I think "function" specifically is a risky term in this context. The spec text here is a bit loose (other specs use the phrase "functional notation" for at-rule syntax like this). I think it's mostly a convenience for the spec authors to call these functions. They kinda look like functions, but CSS "functions" as each is defined by its own grammar—there's no primitive function that specs reuse.

"support": {
"chrome": {
"version_added": "143"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": false
},
"firefox_android": "mirror",
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": false
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"webview_ios": "mirror"
},
"status": {
"experimental": true,
"standard_track": true,
"deprecated": false
}
},
"fallback": {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we documenting this (behavioral?) subfeatures?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not a behavioral subfeature. It's a named container query "feature" (in media/container queries terminology, not the BCD sense), as in @container anchored(fallback: <some-value>).

Right now there's only one feature to query against, but it's possible other container query features could exist (e.g., @container anchored(foo-bar: <some-value>) would get a foo-bar key as a peer to fallback).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a suffix for clarity?

Suggested change
"fallback": {
"fallback_feature": {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also modeled this feature after a scroll-state() descendant. If we do something different for anchor positioning, I think we ought to do the same for scroll-state.

"__compat": {
"description": "`fallback` feature",
"spec_url": "https://drafts.csswg.org/css-anchor-position-2/#descdef-container-fallback",
"support": {
"chrome": {
"version_added": "143"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": false
},
"firefox_android": "mirror",
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": false
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"webview_ios": "mirror"
},
"status": {
"experimental": true,
"standard_track": true,
"deprecated": false
}
},
"any_value": {
"__compat": {
"description": "`any` query value",
"spec_url": "https://drafts.csswg.org/css-anchor-position-2/#valdef-position-area-query-any",
"support": {
"chrome": {
"version_added": "143"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": false
},
"firefox_android": "mirror",
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": false
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"webview_ios": "mirror"
},
"status": {
"experimental": true,
"standard_track": true,
"deprecated": false
}
}
}
}
},
"scroll-state_queries": {
"__compat": {
"description": "Scroll-state queries",
Expand Down
31 changes: 31 additions & 0 deletions css/properties/container-type.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,37 @@
"deprecated": false
}
},
"anchored": {
"__compat": {
"spec_url": "https://drafts.csswg.org/css-anchor-position-2/#valdef-container-type-anchored",
"support": {
"chrome": {
"version_added": "143"
},
"chrome_android": "mirror",
"edge": "mirror",
"firefox": {
"version_added": false
},
"firefox_android": "mirror",
"oculus": "mirror",
"opera": "mirror",
"opera_android": "mirror",
"safari": {
"version_added": false
},
"safari_ios": "mirror",
"samsunginternet_android": "mirror",
"webview_android": "mirror",
"webview_ios": "mirror"
},
"status": {
"experimental": true,
"standard_track": true,
"deprecated": false
}
}
},
"inline-size": {
"__compat": {
"spec_url": "https://drafts.csswg.org/css-conditional-5/#valdef-container-type-inline-size",
Expand Down