Better support for @property

[Afif13]

Description

I will quote a few parts from the specification that should give clear description of the feature:

[css-variables] provides primitive means for defining user-controlled properties, however these properties always take token lists as values, must always inherit, and can only impact document layout or paint by being re-incorporated into the value of other properties via a var() reference.

This specification extends [css-variables], allowing the registration of properties that have a value type, an initial value, and a defined inheritance behaviour

@property --size {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

Rationale

• A better way to animate things: Registered custom properties allow us to animate almost anything.

• Syntax validation: A non-registered custom property can contain any value which can easily lead to errors. A registered custom property follow a syntax and cannot accept any values.

A custom property can become a registered custom property, making it act more like a UA-defined property: giving it a syntax that’s checked by the UA, an initial value, and a specific inheritance behavior.

• Better JavaScript manipulation: Unregistered custom properties are mainly strings so we are obliged to do an extra manipulation to get their data. With registered custom properties we no more have such issue. Below a screenshot to illustrate the difference:

• Chromium browser support this feature since too long (https://ishoudinireadyyet.com/) which leads us to the famous "Chrome-only" demos so it would be good to have a better support for such feature

• It's part of the Houdini project so it closely linked to other features like the Paint API and the Layout API.

This specification is complementary to [css-paint-api-1] and [css-layout-api-1], which allow custom properties to directly impact paint and layout behaviours respectively.

Specification

https://drafts.css-houdini.org/css-properties-values-api/

Tests

https://wpt.fyi/results/css/css-properties-values-api?label=master&label=experimental&aligned&view=subtest&q=property

[Afif13]

Here an article where I am exploring the power of @property in creating complex animation without using keyframes: https://css-tricks.com/build-complex-css-transitions-using-custom-properties-and-cubic-bezier/

[Afif13]

Back in 2018, Ana Tudor (@thebabydino) explored Gradients animation using this feature: https://css-tricks.com/the-state-of-changing-gradients-with-css-transitions-and-animations/

More articles around this:

• https://dev.to/afif/we-can-finally-animate-css-gradient-kdk
• https://web.dev/at-property/
• https://css-tricks.com/what-houdini-means-for-animating-transforms/
• https://www.smashingmagazine.com/2020/03/practical-overview-css-houdini/

[lilles]

Regarding tests, I don't think we should filter out tests without "property".

We should exclude this test unless typed om also becomes part of Interop 2023: https://wpt.fyi/results/css/css-properties-values-api/typedom.html

The crashtests directory probably doesn't make sense to add (even if all engines would typically pass).

There are some subtests that rely on other features that engines don't necessarily ship. I recently added a cycle test for the lh unit in unit-cycles.html, for instance.

[andruud]

We may want to exclude tests which cover:

• Syntax:<transform>, <transform-list>, because we can't currently represent computed values of interpolated transforms which contain percentages. (It's possible with the newly added mix() function, but should probably not scope-creep that into this proposal).
• Syntax: <image>, unless we now have good specs for how generated images should interpolate. Last time a looked, we did not, but that's a while ago now.

[foolip]

Custom properties or variables came up a fair bit in the State of CSS 2022 question about browser incompatibilities, mentioned in ~2% of responses, see #248. Examples from those responses:

• CSS custom properties
• Custom properties due to inability to use within media query declarations (i.e. @media (min-width: var(--small))
• CSS custom properties and CSS grid for clients that need deeper browser support.
• Houdini (@property)
• @property is missing from Safari and Firefox.
• Custom Property Types
• css property registration

[foolip]

In the MDN short survey on CSS & HTML, "CSS custom properties (@property)" was selected by ~28% of survey takers, putting it in the top third of the 20 options. (There is some uncertainty as with any survey data.)

[foolip]

Thank you for proposing @property for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as the Custom Properties focus area. You can follow the progress of this Focus Area on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.

[SebastianZ]

We are pleased to let you know that this proposal was accepted as the Container Queries focus area.

I guess that meant Custom Properties, not Container Queries.

Sebastian

[foolip]

Yes, of course! Sorry about the copypasta.