Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add constraint for initial value in @property rule #38321

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

twittwer
Copy link

Description

Adds the constraint of computationally independence for the initial value of @Property rules.

The initial-value must be computationally independent.
https://www.w3.org/TR/css-properties-values-api-1/#initial-value-descriptor

Motivation

We were confused as the browser ignored our rem-based initial value until we got a hint to this specific constraint in the spec.
https://stackoverflow.com/a/79466455/6625414

Additional details

Related issues and pull requests

Adds the contraint of computationally independence for the initial value of @Property rules.
Spec-Reference: https://www.w3.org/TR/css-properties-values-api-1/#initial-value-descriptor
@twittwer twittwer requested a review from a team as a code owner February 25, 2025 12:23
@twittwer twittwer requested review from chrisdavidmills and removed request for a team February 25, 2025 12:23
@github-actions github-actions bot added Content:CSS Cascading Style Sheets docs size/xs [PR only] 0-5 LoC changed labels Feb 25, 2025
Copy link
Contributor

Preview URLs

Flaws (2)

URL: /en-US/docs/Web/CSS/@property
Title: @property
Flaw count: 2

  • broken_links:
    • Can't resolve /en-US/docs/Web/CSS/custom-property-name
    • Can't resolve /en-US/docs/Web/CSS/declaration-list
External URLs (1)

URL: /en-US/docs/Web/CSS/@property
Title: @property

Copy link
Contributor

@chrisdavidmills chrisdavidmills left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @twittwer, and thank you for your contribution to MDN.

I agree that this is important to include on the page. I've provided some suggestions that give a bit more information and some examples, as ideally we don't want to direct people to the spec for information we could include on the page.

Let me know what you think. Thanks again.

@@ -42,6 +42,9 @@ The following conditions must be met for the `@property` rule to be valid:
If either is missing, the entire `@property` rule is invalid and ignored.
- The {{cssxref("@property/initial-value","initial-value")}} descriptor is optional if the value of the `syntax` descriptor is the universal syntax definition (that is, `syntax: "*"`).
If the `initial-value` descriptor is required but omitted, the entire `@property` rule is invalid and ignored.
- The {{cssxref("@property/initial-value","initial-value")}} descriptor has to be a [computationally independent value](https://www.w3.org/TR/css-properties-values-api-1/#computationally-independent)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- The {{cssxref("@property/initial-value","initial-value")}} descriptor has to be a [computationally independent value](https://www.w3.org/TR/css-properties-values-api-1/#computationally-independent)
- If the value of the `syntax` descriptor is not the universal syntax definition, the {{cssxref("@property/initial-value","initial-value")}} descriptor has to be a [computationally independent](https://www.w3.org/TR/css-properties-values-api-1/#computationally-independent) value.

@@ -42,6 +42,9 @@ The following conditions must be met for the `@property` rule to be valid:
If either is missing, the entire `@property` rule is invalid and ignored.
- The {{cssxref("@property/initial-value","initial-value")}} descriptor is optional if the value of the `syntax` descriptor is the universal syntax definition (that is, `syntax: "*"`).
If the `initial-value` descriptor is required but omitted, the entire `@property` rule is invalid and ignored.
- The {{cssxref("@property/initial-value","initial-value")}} descriptor has to be a [computationally independent value](https://www.w3.org/TR/css-properties-values-api-1/#computationally-independent)
if the value of the `syntax` descriptor is not the universal syntax definition (that is, `syntax: "*"`).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if the value of the `syntax` descriptor is not the universal syntax definition (that is, `syntax: "*"`).
This means the value can be converted into a computed value without depending on other values, except for "global" definitions independent of CSS.

@@ -42,6 +42,9 @@ The following conditions must be met for the `@property` rule to be valid:
If either is missing, the entire `@property` rule is invalid and ignored.
- The {{cssxref("@property/initial-value","initial-value")}} descriptor is optional if the value of the `syntax` descriptor is the universal syntax definition (that is, `syntax: "*"`).
If the `initial-value` descriptor is required but omitted, the entire `@property` rule is invalid and ignored.
- The {{cssxref("@property/initial-value","initial-value")}} descriptor has to be a [computationally independent value](https://www.w3.org/TR/css-properties-values-api-1/#computationally-independent)
if the value of the `syntax` descriptor is not the universal syntax definition (that is, `syntax: "*"`).
This excludes relative units like `rem`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
This excludes relative units like `rem`.
For example, a pixel value like `10px` is computationally independent and therefore valid — it doesn't change when converted to a computed value. An inch value like `2in` is also valid, because `1in` is always equivalent to `96px`. However, an em value like `3em` is not valid, because the value of an em is dependent on the parent's {{cssxref("font-size")}}.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:CSS Cascading Style Sheets docs size/xs [PR only] 0-5 LoC changed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants