1892586 - @property doesn't work

Status: RESOLVED DUPLICATE of bug 1864818

(Core :: CSS Parsing and Computation, defect)

Description

[andre]

Attachment: styles.css

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Steps to reproduce:

Go to https://verveui.pro/ and see that the title text isn't showing.

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:125.0) Gecko/20100101 Firefox/125.0

Actual results:

Firefox isn't picking up these property registrations:
@property --tw-gradient-from-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%;
}
@property --tw-gradient-to-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 100%;
}

For the title effect:
background-image: linear-gradient(to bottom, var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));

Saying "--tw-gradient-from-position is not set" and "--tw-gradient-to-position is not set". But they are.

(Original styles.css attached)

Expected results:

Firefox should have picked up the properties.

Comment 1

[Tooru Fujisawa [:arai]]

CSS Properties and Values API (the @property syntax) support is still experimental and available only on Firefox Nightly.
I confirmed the text on the website isn't shown on Firefox 125.0.1, and is shown on Firefox Nightly 127.0a1 (2024-04-20).

Comment 2

[andre]

Ah, I missed that "Available in Nightly build only" from caniuse.