Intent to Ship: @property

[Anders Hartvoll Ruud]

Contact emails

and...@chromium.org, ikilpatrick@chromium

Spec

https://drafts.css-houdini.org/css-properties-values-api-1/#at-property-rule

TAG review: https://github.com/w3ctag/design-reviews/issues/402 (Summary: two issues filed and resolved, TAG now happy).

Summary

The @property rule is an alternative way to register a custom property, without JavaScript. It is not a brand new feature, but rather a new way to access an existing feature (CSS.registerProperty).

In short, it looks like this:

  @property --my-property {
    syntax: "<color>";
    initial-value: green;
    inherits: false;
  }

Which does exactly the same thing as:

  CSS.registerProperty({
      name: '--my-property',
      syntax: '<color>',
      initialValue: 'green',
      inherits: false
  });

The computed value of --my-property can then be substituted into other properties. A commonly cited use-case is animating gradients:

.button {
  --my-property: red;
  background: linear-gradient(var(--my-property), black);
  transition: --my-property 1s;
}

.button:hover {
  --my-property: green;
}

Link to “Intent to Prototype” blink-dev discussion

https://groups.google.com/a/chromium.org/d/msg/blink-dev/qoJkuLOMKqI/I3DGDTCRBQAJ

Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes.

Debuggability

Since @property is just another way of accessing CSS.registerProperty, it automatically gets the same debuggability characteristics as CSS.registerProperty (which seems to work as expected to me).

Risks

Interoperability and Compatibility

Edge: No signals

Firefox: No signals

Safari: No signals

Web / Framework developers: Positive according to devrel, I can check if they have anything beyond anecdotal evidence if needed.

Note however that both Firefox and Safari both have in-progress implementations of CSS.registerProperty, which gives them the underlying functionality of @property.

https://bugs.webkit.org/show_bug.cgi?id=189692

https://bugzilla.mozilla.org/show_bug.cgi?id=1273706

Ergonomics

Q: Are there any other platform APIs this feature will frequently be used in tandem with? A: Paint worklets come to mind, but @property does not introduce any new complexity there vs. CSS.registerProperty.

Q: Could the default usage of this API make it hard for Chrome to maintain good performance? A: N/A (same as CSS.registerProperty).

Activation

Q: Will it be challenging for developers to take advantage of this feature immediately, as-is? A: No.

Q: Would this feature benefit from having polyfills, significant documentation and outreach, and/or libraries built on top of it to make it easier to use? A: I don't think we have to do anything out of the ordinary here.

Note that I don't intend to rush this into M84. Even if this is approved immediately, I'll wait until after the next branch point to enable it.

Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.

Tests have been / are about to be added in relation to the feature work in Blink.

wpt.fyi/results/css/css-properties-values-api (not all tests are visible here yet at the time of writing).

 - at-property.html (basic behavior)

 - at-property-animation.html (making sure animations behave correctly when registration changes)

 - at-property-cssom.html (tests for cssom additions made by the spec)

 - at-property-shadow.html (verifies behavior of @property in shadow trees)

 - at-property-stylesheets.html (verifies that correct registration is chosen when stylesheets appear/disappear)

 - determine-registration.html (verifies correct cooperation between @property / CSS.registerProperty)

Entry on the feature dashboard

https://www.chromestatus.com/feature/5193698449031168

[一丝]

I just tested it, is @supports() not yet supported? For example: @supports (syntax: "<length>"). We need a reliable mechanism to detect support in order to fallback to CSS.registerProperty().

[Una Kravets]

Very much looking forward to this! This will make Houdini custom properties much easier to grok and enable developers to seamlessly harness their powers!

--
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/CAKFBnUpZh%2Ba1UC1wYJCj-sh3bRGMWwr8T7Up%2BdQruNjrBxzDhg%40mail.gmail.com.

[Anders Hartvoll Ruud]

On Thu, Apr 23, 2020 at 2:38 AM 一丝 <yio...@gmail.com> wrote:

I just tested it, is @supports() not yet supported? For example: @supports (syntax: "<length>"). We need a reliable mechanism to detect support in order to fallback to CSS.registerProperty().

@supports can't query for @-rules in general. I'm not sure what authors currently do to query for @-rule support. I suppose you could just add a dummy @property and check with JS if it parsed.

--
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/29fb09d1-81d7-4320-92f7-62ab1a130396%40chromium.org.

[Yoav Weiss]

Have we asked?

 

Web / Framework developers: Positive according to devrel, I can check if they have anything beyond anecdotal evidence if needed.

Note however that both Firefox and Safari both have in-progress implementations of CSS.registerProperty, which gives them the underlying functionality of @property.

https://bugs.webkit.org/show_bug.cgi?id=189692

https://bugzilla.mozilla.org/show_bug.cgi?id=1273706

Ergonomics

Q: Are there any other platform APIs this feature will frequently be used in tandem with? A: Paint worklets come to mind, but @property does not introduce any new complexity there vs. CSS.registerProperty.

Q: Could the default usage of this API make it hard for Chrome to maintain good performance? A: N/A (same as CSS.registerProperty).

Activation

Q: Will it be challenging for developers to take advantage of this feature immediately, as-is? A: No.

Q: Would this feature benefit from having polyfills, significant documentation and outreach, and/or libraries built on top of it to make it easier to use? A: I don't think we have to do anything out of the ordinary here.

Note that I don't intend to rush this into M84. Even if this is approved immediately, I'll wait until after the next branch point to enable it.

Is this feature fully tested by web-platform-tests? Link to test suite results from wpt.fyi.

Tests have been / are about to be added in relation to the feature work in Blink.

wpt.fyi/results/css/css-properties-values-api (not all tests are visible here yet at the time of writing).

 - at-property.html (basic behavior)

 - at-property-animation.html (making sure animations behave correctly when registration changes)

 - at-property-cssom.html (tests for cssom additions made by the spec)

 - at-property-shadow.html (verifies behavior of @property in shadow trees)

 - at-property-stylesheets.html (verifies that correct registration is chosen when stylesheets appear/disappear)

 - determine-registration.html (verifies correct cooperation between @property / CSS.registerProperty)

Entry on the feature dashboard

https://www.chromestatus.com/feature/5193698449031168

--

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/CAKFBnUpZh%2Ba1UC1wYJCj-sh3bRGMWwr8T7Up%2BdQruNjrBxzDhg%40mail.gmail.com.

[Anders Hartvoll Ruud]

It left the Houdini TF "excited" at TPAC 2018 (see Rossen's summary at the end of the minutes), FWIW.

I can file a request to clarify whether Mozilla's position on CSS Properties & Values API extends to @property, since it's relatively recent addition. And I'll ask webkit-dev.

  

Web / Framework developers: Positive according to devrel, I can check if they have anything beyond anecdotal evidence if needed.

Also I should have included the Github reactions on the original proposal:

[Daniel Bratell]

LGTM1

/Daniel

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKFBnUqsM9KA%3D15%2B5u9_qgUbNMjyQXkpteR-S7CSi2daMeL2fw%40mail.gmail.com.

[sligh...@chromium.org]

LGTM2

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/CAKFBnUpZh%2Ba1UC1wYJCj-sh3bRGMWwr8T7Up%2BdQruNjrBxzDhg%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.

[Manuel Rego Casasnovas]

On 23/04/2020 09:07, Anders Hartvoll Ruud wrote:
> On Thu, Apr 23, 2020 at 2:38 AM 一丝 <yio...@gmail.com
> <mailto:yio...@gmail.com>> wrote:
>
> I just tested it, is @supports() not yet supported? For example:
> @supports (syntax: "<length>"). We need a reliable mechanism to
> detect support in order to fallback to CSS.registerProperty().
>
>
> @supports can't query for @-rules in general. I'm not sure what authors
> currently do to query for @-rule support. I suppose you could just add a
> dummy @property and check with JS if it parsed.

Ideally we should be able to feature detect these things in descriptors
(like @supports), but it's not possible right now.
See https://github.com/w3c/csswg-drafts/issues/2463, if that is solved
we might be able to do things like:
@supports descriptor(@property, syntax: "<color>") { ... }

Bye,
Rego

[Anders Hartvoll Ruud]

I like that proposal. It doesn't extend to @-rules that don't actually use descriptors (e.g. @keyframes), but I guess it doesn't have to.

 

Bye,
  Rego

[Anders Hartvoll Ruud]

WebKit "generally supporting". Don't know about Mozilla yet.

[Anders Hartvoll Ruud]

Mozilla (that is, Emilio) thinks the "worth prototyping" status of css-properties-values-api also applies to @property.

These positive signals should be enough to proceed?

[Yoav Weiss]

Both signals indicate a low interop risk!

LGTM3