Intent to Prototype: side-relative syntax for background-position-x/y longhands

[Chromestatus]

Contact emails

jfern...@igalia.com

Explainer

None

Specification

https://drafts.csswg.org/css-backgrounds-4/#background-position-longhands

Summary

Defines the background image's position relative to one of its edges. This syntax gives web authors a more flexible and responsive mechanisms to define the background image position, instead of using fixed values that need to be adapted to the window's or frame's size.

Blink component

Blink>CSS

Web Feature ID

background-position

Motivation

One important motivation is interoperability, given that Chrome is the only browser that lacks this syntax for the background-position-x/y longhands. Additionally, the background-position shorthand, which sets both the x/y positions, already supports the side-relative syntax, so the lack of the same syntax in the longhands may confuse web developers. There is no specific explainer, but this MDN page should be enough to understand the feature: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x

Initial public proposal

None

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

This feature doesn't imply any interoperability risk, but the contrary, since Chrome needs to catch up in order to provide the same functionality than Firefox and Safari. There is no back-compatibility risk, because the old syntax is still valid if this feature is implemented.

Gecko: Shipped/Shipping

WebKit: Shipped/Shipping

Web developers: Positive (https://issues.chromium.org/issues/40468636) The issue has 15 votes by now.

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications? None

Debuggability

The feature can be tested and debugged using the regular Chrome DevTools support (eg, css style inspection)

Is this feature fully tested by web-platform-tests?

Yeshttps://wpt.fyi/results/css/css-backgrounds/parsing?label=master&label=experimental&aligned&q=background-position-x https://wpt.fyi/results/css/css-backgrounds/parsing?label=master&label=experimental&aligned&q=background-position-y

Flag name on about://flags

None

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/40468636

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5073321259565056?gate=5093327095595008

This intent message was generated by Chrome Platform Status.