-
Notifications
You must be signed in to change notification settings - Fork 22.7k
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
base: main
Are you sure you want to change the base?
Conversation
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
Preview URLs Flaws (2)URL:
External URLs (1)URL:
|
There was a problem hiding this 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) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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")}}. |
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