Chrome 143 supports CSS Anchor Position Container Queries#28526
Chrome 143 supports CSS Anchor Position Container Queries#28526
Conversation
|
Tip: Review these changes grouped by change (recommended for most PRs), or grouped by feature (for large PRs). |
caugner
left a comment
There was a problem hiding this comment.
First pass, LGTM overall, but a few comments.
| "deprecated": false | ||
| } | ||
| }, | ||
| "fallback": { |
There was a problem hiding this comment.
Why are we documenting this (behavioral?) subfeatures?
There was a problem hiding this comment.
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).
There was a problem hiding this comment.
Can we add a suffix for clarity?
| "fallback": { | |
| "fallback_feature": { |
There was a problem hiding this comment.
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.
Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com>
| "anchor_position_queries": { | ||
| "__compat": { | ||
| "description": "Anchor position queries (`anchored()`)", | ||
| "spec_url": "https://drafts.csswg.org/css-anchor-position-2/#anchored-container-queries", |
There was a problem hiding this comment.
| "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", |
There was a problem hiding this comment.
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.
| "deprecated": false | ||
| } | ||
| }, | ||
| "fallback": { |
There was a problem hiding this comment.
Can we add a suffix for clarity?
| "fallback": { | |
| "fallback_feature": { |
Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com>
| "anchor_position_queries": { | ||
| "__compat": { | ||
| "description": "Anchor position queries (`anchored()`)", | ||
| "spec_url": "https://drafts.csswg.org/css-anchor-position-2/#anchored-container-queries", |
There was a problem hiding this comment.
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.
| "deprecated": false | ||
| } | ||
| }, | ||
| "fallback": { |
There was a problem hiding this comment.
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.
caugner
left a comment
There was a problem hiding this comment.
LGTM, let's get this in.
Summary
This adds feature entries for container queries for anchor positioning.
Test results and supporting details
I tried a couple of demos on this to confirm that it's actually shipping, but https://chromestatus.com/feature/5177580990496768 is where I got the version number.
Related issues
via web-platform-dx/web-features#3403 and web-platform-dx/web-features#3564