Add constraint for initial value in @property rule #38321
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
requested review from
chrisdavidmills
and removed request for
a team
github-actions
bot
added
Content:CSS
|
Preview URLs Flaws (2)URL:
External URLs (1)URL:
|
chrisdavidmills
requested changes
Feb 26, 2025
There was a problem hiding this comment.
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) | |||
There was a problem hiding this comment.
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: "*"`). | |||
There was a problem hiding this comment.
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`. | |||
There was a problem hiding this comment.
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Adds the constraint of computationally independence for the initial value of @Property rules.
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