Intent to Ship: CSS <image> Syntax for registered Custom Properties
Rune Lillesveen
Contact emails
fut...@chromium.org, and...@chromium.orgExplainer
NoneSpecification
https://drafts.css-houdini.org/css-properties-values-api-1/#syntax-stringsSummary
Supports using the <image> syntax for custom properties registered with @property or registerProperty(). The <image> syntax can be used to restrict values of the custom property to url() values and generated images like gradients.
This syntax was initially excluded from the valid syntaxes mainly because images were not interpolable and that it would add to the usefulness of the syntax to be able to interpolate directly on the custom property. The other engines have shipped the image syntax without supporting interpolation. There are two interpolation methods in css-image-4, cross-fade() and per stop interpolation for gradients. The gradient interpolation is not shipped by any browser (even for standard properties). Safari ships a non-standard compliant cross-fade() interpolation for standard properties (at least for background-image), but not for the registered custom properties.
We have an OKR to look into cross-fade() for Q4. If we end up shipping that, it will work for both registered custom properties and standard properties.
The <image> syntax for registered custom properties is part of Interop 2023.
Blink component
Blink>CSSTAG review
NoneTAG review status
Not applicableRisks
Interoperability and Compatibility
None
Gecko: Shipped/Shipping Does not support interpolation
WebKit: Shipped/Shipping Does not support interpolation
Web developers: No signals
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
No additional devtools support necessary compared to existing syntaxes.
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
YesIs this feature fully tested by web-platform-tests?
Yeshttps://wpt.fyi/css/css-properties-values-api/at-property.html https://wpt.fyi/css/css-properties-values-api/register-property-syntax-parsing.html https://wpt.fyi/css/css-properties-values-api/typedom.html
Flag name on chrome://flags
#enable-experimental-web-platform-featuresFinch feature name
CSSVariables2ImageValuesRequires code in //chrome?
FalseEstimated milestones
| Shipping on desktop | 120 |
| DevTrial on desktop | 115 |
| Shipping on Android | 120 |
| DevTrial on Android | 115 |
Anticipated spec changes
Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).
NoneLink to entry on the Chrome Platform Status
https://chromestatus.com/feature/5142205606133760Rune Lillesveen
Contact emails
fut...@chromium.org, and...@chromium.orgExplainer
NoneSpecification
https://drafts.css-houdini.org/css-properties-values-api-1/#syntax-stringsSummary
Supports using the <image> syntax for custom properties registered with @property or registerProperty(). The <image> syntax can be used to restrict values of the custom property to url() values and generated images like gradients.
This syntax was initially excluded from the valid syntaxes mainly because images were not interpolable and that it would add to the usefulness of the syntax to be able to interpolate directly on the custom property. The other engines have shipped the image syntax without supporting interpolation. There are two interpolation methods in css-image-4, cross-fade() and per stop interpolation for gradients. The gradient interpolation is not shipped by any browser (even for standard properties). Safari ships a non-standard compliant cross-fade() interpolation for standard properties (at least for background-image), but not for the registered custom properties.
We have an OKR to look into cross-fade() for Q4. If we end up shipping that, it will work for both registered custom properties and standard properties.
The <image> syntax for registered custom properties is part of Interop 2023.
Blink component
Blink>CSSTAG review
NoneTAG review status
Not applicableRisks
Interoperability and Compatibility
None
Gecko: Shipped/Shipping Does not support interpolation
Daniel Bratell
LGTM1
(Privacy and Security steps in Chromestatus are not completed but they are unlikely to affect anything)
/Daniel
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeRpL_rGG0%2BuaCiozmx6PoShU4H4SY8HaZwCKs8aReKnUg%40mail.gmail.com.
Emilio Cobos Álvarez
where the gecko status is coming from, but it's not accurate.
(Not that I object to this change tho)
-- Emilio
On 10/4/23 11:08, Rune Lillesveen wrote:
>
> Contact emails
>
> fut...@chromium.org <mailto:fut...@chromium.org>, and...@chromium.org
> <mailto:and...@chromium.org>
>
> Explainer
>
> None
>
>
> Specification
>
> https://drafts.css-houdini.org/css-properties-values-api-1/#syntax-
> #syntax-strings>
>
> Summary
>
> Supports using the <image> syntax for custom properties registered with
> @property or registerProperty(). The <image> syntax can be used to
> restrict values of the custom property to url() values and generated
> images like gradients.
>
>
> This syntax was initially excluded from the valid syntaxes mainly
> because images were not interpolable and that it would add to the
> usefulness of the syntax to be able to interpolate directly on the
> custom property. The other engines have shipped the image syntax without
> supporting interpolation. There are two interpolation methods in css-
> image-4, cross-fade() and per stop interpolation for gradients. The
> gradient interpolation is not shipped by any browser (even for standard
> properties). Safari ships a non-standard compliant cross-fade()
> interpolation for standard properties (at least for background-image),
> but not for the registered custom properties.
>
>
> We have an OKR to look into cross-fade() for Q4. If we end up shipping
> that, it will work for both registered custom properties and standard
> properties.
>
>
> The <image> syntax for registered custom properties is part of Interop 2023.
>
>
>
> Blink component
>
> q=component:Blink%3ECSS>
>
> TAG review
>
> None
>
>
> TAG review status
>
> Not applicable
>
>
> Risks
>
>
>
> Interoperability and Compatibility
>
> None
>
>
>
>
> /WebKit/: Shipped/Shipping Does not support interpolation
>
> /Web developers/: No signals
>
> /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
>
> No additional devtools support necessary compared to existing syntaxes.
>
>
>
> Will this feature be supported on all six Blink platforms
> (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
>
> Yes
>
>
> chromium.googlesource.com/chromium/src/+/main/docs/testing/
> web_platform_tests.md>?
>
> Yes
>
> https://wpt.fyi/css/css-properties-values-api/at-property.html <https://
> wpt.fyi/css/css-properties-values-api/at-property.html> https://wpt.fyi/
> css/css-properties-values-api/register-property-syntax-parsing.html
> <https://wpt.fyi/css/css-properties-values-api/register-property-syntax-
> parsing.html> https://wpt.fyi/css/css-properties-values-api/typedom.html
>
>
>
> Flag name on chrome://flags
>
> #enable-experimental-web-platform-features
>
>
> Finch feature name
>
> CSSVariables2ImageValues
>
>
> Requires code in //chrome?
>
> False
>
>
> Estimated milestones
>
> Shipping on desktop 120
> DevTrial on desktop 115
>
> Shipping on Android 120
> DevTrial on Android 115
>
>
>
> Anticipated spec changes
>
> Open questions about a feature may be a source of future web compat or
> interop issues. Please list open issues (e.g. links to known github
> issues in the project for the feature specification) whose resolution
> may introduce web compat/interop risk (e.g., changing to naming or
> structure of the API in a non-backward-compatible way).
>
> None
>
>
> Link to entry on the Chrome Platform Status
>
> chromestatus.com/feature/5142205606133760>
>
> This intent message was generated by Chrome Platform Status <https://
> chromestatus.com/>.
> --
> Rune Lillesveen
>
> --
> You received this message because you are subscribed to the Google
> Groups "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send
> dev+uns...@chromium.org>.
> chromium.org/d/msgid/blink-dev/
Mike Taylor
LGTM2
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/b54e692d-f48c-46ed-89d4-962336bda253%40gmail.com.
Chris Harrelson
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/9d780f78-655c-43ae-ba91-b9ea88963b0e%40chromium.org.
Yoav Weiss
LGTM2
On 10/11/23 7:06 AM, Daniel Bratell wrote:
LGTM1
(Privacy and Security steps in Chromestatus are not completed but they are unlikely to affect anything)
/Daniel
On 2023-10-04 12:23, Rune Lillesveen wrote:
On Wed, Oct 4, 2023 at 11:08 AM Rune Lillesveen <fut...@chromium.org> wrote:
--
Rune Lillesveen
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACuPfeRpL_rGG0%2BuaCiozmx6PoShU4H4SY8HaZwCKs8aReKnUg%40mail.gmail.com.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
Rune Lillesveen
FWIW we don't ship this (outside of the nightly channel), so not sure
where the gecko status is coming from, but it's not accurate.