From 6834ad69f8844894e0578ea06375e3e1e1e17e73 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 19 Nov 2024 04:03:03 -0500 Subject: [PATCH 001/101] docs(css): Add support for `` in `syntax` descriptor of @property at-rule (#36655) * update @property descriptors * update syntax * revert js code removal * update release note * Update files/en-us/web/css/@property/index.md * Apply suggestions from code review * Update files/en-us/web/css/@property/index.md --------- Co-authored-by: Brian Thomas Smith --- .../mozilla/firefox/releases/128/index.md | 1 + files/en-us/web/css/@property/index.md | 40 ++++---- .../en-us/web/css/@property/inherits/index.md | 24 ++--- .../web/css/@property/initial-value/index.md | 30 +++--- files/en-us/web/css/@property/syntax/index.md | 99 ++++++++++++------- 5 files changed, 112 insertions(+), 82 deletions(-) diff --git a/files/en-us/mozilla/firefox/releases/128/index.md b/files/en-us/mozilla/firefox/releases/128/index.md index 9368430bca04b159..377b7037aac64343 100644 --- a/files/en-us/mozilla/firefox/releases/128/index.md +++ b/files/en-us/mozilla/firefox/releases/128/index.md @@ -18,6 +18,7 @@ This article provides information about the changes in Firefox 128 that affect d - [Relative color syntax](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) is now enabled by default. Relative color syntax allows you to create a color value relative to an origin color, and can allow you to change a color in a different [color space](/en-US/docs/Glossary/Color_space) using [color functions](/en-US/docs/Web/CSS/CSS_colors#functions) ([Firefox bug 1900251](https://bugzil.la/1900251)). - The [`content`](/en-US/docs/Web/CSS/content) property now supports [alternative text](/en-US/docs/Web/CSS/content#alternative_text) for content that includes an image. The alternative text is then exposed to the browsers accessibility tree. (See [Firefox bug 1281158](https://bugzil.la/1281158) and [Firefox bug 1896047](https://bugzil.la/1896047)). +- The [`syntax`](/en-US/docs/Web/CSS/@property/syntax) descriptor of the {{cssxref("@property")}} at-rule now supports the `` syntax component name. (See [Firefox bug 1846635](https://bugzil.la/1846635)). #### Removals diff --git a/files/en-us/web/css/@property/index.md b/files/en-us/web/css/@property/index.md index 19e3b05c4e5b04cd..6eec0d5f5ec6e319 100644 --- a/files/en-us/web/css/@property/index.md +++ b/files/en-us/web/css/@property/index.md @@ -7,40 +7,42 @@ browser-compat: css.at-rules.property {{CSSRef}} -The **`@property`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) umbrella of APIs. It allows developers to explicitly define their [CSS custom properties](/en-US/docs/Web/CSS/--*), allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not. +The **`@property`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is part of the [CSS Houdini](/en-US/docs/Web/API/Houdini_APIs) set of APIs. It allows developers to explicitly define [CSS custom properties](/en-US/docs/Web/CSS/--*), allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not. -The `@property` rule represents a custom property registration directly in a stylesheet without having to run any JS. Valid `@property` rules result in a registered custom property, as if {{domxref('CSS.registerProperty_static', 'registerProperty()')}} had been called with equivalent parameters. +The `@property` rule represents a custom property registration directly in a stylesheet without having to run any JavaScript. Valid `@property` rules result in a registered custom property, which is similar to calling {{domxref('CSS.registerProperty_static', 'registerProperty()')}} with equivalent parameters. ## Syntax ```css -@property --property-name { - syntax: ""; +@property --rotation { + syntax: ""; inherits: false; - initial-value: #c0ffee; + initial-value: 45deg; } ``` +The custom property name is a [``](/en-US/docs/Web/CSS/dashed-ident) that starts with `--` and is followed by a valid, user-defined identifier. It is case-sensitive. + ### Descriptors - {{cssxref("@property/syntax","syntax")}} - - - : Describes the allowable syntax for the property. May be a ``, ``, ``, ``, ``, ``, ``, ``, ``, `