docs: Add reference for CSS value serialization, especially colors #41322

Shrinivassab · 2025-09-28T23:03:51Z

Add reference for CSS value serialization, especially colors

Description

Adds a new guide explaining CSS value serialization through JavaScript APIs, with a focus on how color values (hsl(), hwb(), etc.) are serialized to rgb()/rgba() format when accessed via getComputedStyle() or getPropertyValue().

Motivation

This documentation helps developers understand why and how CSS values, especially colors, might return in different formats than they were written. This addresses a common source of confusion when working with CSS values through JavaScript APIs.

Additional details

References:

Related issues and pull requests

Fixes #32734 - Creates documentation for CSS value serialization, especially for colors

Fixes mdn#32734 Adds a new guide explaining how CSS values especially colors are serialized when accessed via JavaScript APIs like getComputedStyle() and getPropertyValue().

github-actions · 2025-09-28T23:06:00Z

Preview URLs

Flaws (108)

URL: /en-US/docs/Web/API/CSS_Object_Model/CSS_value_serialization
Title: CSS value serialization
Flaw count: 8

macros:
- Macro produces link /en-US/docs/Web/CSS/named-color which is a redirect
- Macro produces link /en-US/docs/Web/CSS/system-color which is a redirect
- Macro produces link /en-US/docs/Web/CSS/hex-color which is a redirect
- Macro produces link /en-US/docs/Web/CSS/url which is a redirect
- Macro produces link /en-US/docs/Web/CSS/frequency which is a redirect
- and 3 more flaws omitted

URL: /en-US/docs/Web/CSS/Guides/Colors
Title: CSS colors
Flaw count: 36

macros:
- Macro produces link /en-US/docs/Web/CSS/color which is a redirect
- Macro produces link /en-US/docs/Web/CSS/opacity which is a redirect
- Macro produces link /en-US/docs/Web/CSS/background-color which is a redirect
- Macro produces link /en-US/docs/Web/CSS/accent-color which is a redirect
- Macro produces link /en-US/docs/Web/CSS/color which is a redirect
- and 31 more flaws omitted

URL: /en-US/docs/Web/CSS/Guides/Values_and_units
Title: CSS values and units
Flaw count: 64

macros:
- Macro produces link /en-US/docs/Web/CSS/interpolate-size which is a redirect
- Macro produces link /en-US/docs/Web/CSS/abs which is a redirect
- Macro produces link /en-US/docs/Web/CSS/acos which is a redirect
- Macro produces link /en-US/docs/Web/CSS/asin which is a redirect
- Macro produces link /en-US/docs/Web/CSS/atan which is a redirect
- and 59 more flaws omitted

(comment last updated: 2025-11-17 17:49:31)

Josh-Cena

A lot of content is incomplete or duplicative. I suspect you are using AI to write this, which is fine in principle, but next time please disclose this because it's not the quality we are expecting for a ready-for-review PR. Also, you should document length serialization as well at least, since that's the other common use case.

files/en-us/web/api/css_object_model/serializing_css_values/index.md

Shrinivassab · 2025-09-29T01:44:11Z

Hi @Josh-Cena , Yes, I tried the Co-pilot version of Sonnet 3.5. I will keep it in mind to mentioned that in the PR, I was not sure, if we used Copilot need to raise as Draft PR or Ready to reviewPR.

…dex.md Co-authored-by: Joshua Chen <[email protected]>

…ssab/content into css-value-serialization

Shrinivassab · 2025-09-29T04:06:11Z

Let me know if any changes need to be updated or any grammatical error . Happy to update it. Thanks for the review.

Josh-Cena · 2025-10-10T21:51:43Z

We still need to link to it from many places, and possibly there are a lot of places that talk about value serialization (especially colors) that can be deduplicated. I will wait for @estelle.

estelle

We should add the serialization format to all the data type pages in the future.

files/en-us/web/api/css_object_model/css_value_serialization/index.md

…ndex.md Co-authored-by: Estelle Weyl <[email protected]>

Josh-Cena · 2025-11-10T18:58:43Z

The more I read into the specs and do tests, the more I believe that serialization is a hot mess and no one knows exactly how it works. I think just covering the basic data types is the most we can do, and even then I'm unsure because obviously the CSSStyleSheet does not use the computed value but it's not the declared value either (because color values are resolved).

Josh-Cena

@estelle PTAL, thanks

estelle

looks good. Thank you. I just made a few grammar and linking suggestions. I also submitted a PR directly to your PR to add links to your guide from related CSS module landing pages. See Shrinivassab#1

estelle · 2025-11-13T01:30:59Z

files/en-us/web/api/css_object_model/css_value_serialization/index.md

+- {{domxref("CSSStyleDeclaration.cssText")}}
+- Accessing properties directly on {{domxref("CSSStyleDeclaration")}} objects (e.g., `element.style.backgroundColor`)
+
+Different APIs return `CSSStyleDeclaration` objects at different stages of [value processing](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing), which have slightly different serialization behaviors. For example, {{domxref("Window.getComputedStyle()")}} and {{domxref("HTMLElement.style")}} returns the [resolved value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#resolved_value) of properties, while {{domxref("CSSStyleRule.style")}} returns _more or less_ the [declared value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#declared_value).


Suggested change

Different APIs return `CSSStyleDeclaration` objects at different stages of [value processing](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing), which have slightly different serialization behaviors. For example, {{domxref("Window.getComputedStyle()")}} and {{domxref("HTMLElement.style")}} returns the [resolved value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#resolved_value) of properties, while {{domxref("CSSStyleRule.style")}} returns _more or less_ the [declared value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#declared_value).

Different APIs return `CSSStyleDeclaration` objects at different stages of [value processing](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing), which have slightly different serialization behaviors. For example, {{domxref("Window.getComputedStyle()")}} and {{domxref("HTMLElement.style")}} returns the [resolved value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#resolved_value) of properties, while {{domxref("CSSStyleRule.style")}} return _more or less_ the [declared value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#declared_value).

The subject is CSSStyleRule.style which is singular?

files/en-us/web/api/css_object_model/css_value_serialization/index.md

Co-authored-by: Estelle Weyl <[email protected]>

estelle

Thanks! 🎉

…41322) * docs: Add reference for CSS value serialization, especially colors Fixes #32734 Adds a new guide explaining how CSS values especially colors are serialized when accessed via JavaScript APIs like getComputedStyle() and getPropertyValue(). * Update files/en-us/web/api/css_object_model/serializing_css_values/index.md Co-authored-by: Joshua Chen <[email protected]> * Addressed PR comments * Rewrite * Update files/en-us/web/api/css_object_model/css_value_serialization/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/css_object_model/css_value_serialization/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/css_object_model/css_value_serialization/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/css_object_model/css_value_serialization/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/api/css_object_model/css_value_serialization/index.md Co-authored-by: Estelle Weyl <[email protected]> * Rewrite * Apply suggestions from code review Co-authored-by: Estelle Weyl <[email protected]> * Add guide links --------- Co-authored-by: Joshua Chen <[email protected]> Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: Estelle Weyl <[email protected]>

docs: Add reference for CSS value serialization, especially colors

84438aa

Fixes mdn#32734 Adds a new guide explaining how CSS values especially colors are serialized when accessed via JavaScript APIs like getComputedStyle() and getPropertyValue().

Shrinivassab requested a review from a team as a code owner September 28, 2025 23:03

Shrinivassab requested review from sideshowbarker and removed request for a team September 28, 2025 23:03

github-actions bot added the Content:WebAPI Web API docs label Sep 28, 2025

Merge branch 'main' into css-value-serialization

ad17c8f

github-actions bot added the size/m [PR only] 51-500 LoC changed label Sep 28, 2025

Josh-Cena requested review from estelle and removed request for sideshowbarker September 28, 2025 23:28

Josh-Cena requested changes Sep 28, 2025

View reviewed changes

Shrinivassab and others added 3 commits September 28, 2025 21:50

Update files/en-us/web/api/css_object_model/serializing_css_values/in…

eb3a19d

…dex.md Co-authored-by: Joshua Chen <[email protected]>

Addressed PR comments

0461c6a

Merge branch 'css-value-serialization' of https://github.com/Shriniva…

d1661fd

…ssab/content into css-value-serialization

Rewrite

391a84d

Josh-Cena requested a review from a team as a code owner October 10, 2025 21:50

Josh-Cena requested review from pepelsbey and removed request for a team October 10, 2025 21:50

estelle reviewed Oct 14, 2025

View reviewed changes

Shrinivassab and others added 4 commits October 14, 2025 19:00

Update files/en-us/web/api/css_object_model/css_value_serialization/i…

fc7f1c6

…ndex.md Co-authored-by: Estelle Weyl <[email protected]>

Update files/en-us/web/api/css_object_model/css_value_serialization/i…

cc3a9a8

…ndex.md Co-authored-by: Estelle Weyl <[email protected]>

Update files/en-us/web/api/css_object_model/css_value_serialization/i…

766657b

…ndex.md Co-authored-by: Estelle Weyl <[email protected]>

Update files/en-us/web/api/css_object_model/css_value_serialization/i…

3b829f8

…ndex.md Co-authored-by: Estelle Weyl <[email protected]>

Shrinivassab requested review from a team as code owners November 6, 2025 04:32

Shrinivassab requested review from sideshowbarker and removed request for a team November 6, 2025 04:32

Update files/en-us/web/api/css_object_model/css_value_serialization/i…

8c1dd71

…ndex.md Co-authored-by: Estelle Weyl <[email protected]>

sideshowbarker removed their request for review November 6, 2025 16:56

Josh-Cena added 2 commits November 10, 2025 12:16

Merge branch 'main' into css-value-serialization

d8040e9

Rewrite

fb9973c

Josh-Cena force-pushed the css-value-serialization branch from 3dc8b26 to fb9973c Compare November 10, 2025 18:57

Josh-Cena approved these changes Nov 10, 2025

View reviewed changes

Merge branch 'main' into css-value-serialization

8f991c4

estelle reviewed Nov 13, 2025

View reviewed changes

Josh-Cena and others added 2 commits November 12, 2025 22:41

Apply suggestions from code review

a7a4a39

Co-authored-by: Estelle Weyl <[email protected]>

Add guide links

c1db814

Josh-Cena requested a review from a team as a code owner November 17, 2025 17:47

Josh-Cena requested review from dipikabh and removed request for a team November 17, 2025 17:47

github-actions bot added the Content:CSS Cascading Style Sheets docs label Nov 17, 2025

estelle approved these changes Nov 17, 2025

View reviewed changes

estelle merged commit fdd310a into mdn:main Nov 17, 2025
9 checks passed

docs: Add reference for CSS value serialization, especially colors #41322

docs: Add reference for CSS value serialization, especially colors #41322

Uh oh!

Conversation

Shrinivassab commented Sep 28, 2025

Add reference for CSS value serialization, especially colors

Description

Motivation

Additional details

Related issues and pull requests

Uh oh!

github-actions bot commented Sep 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Josh-Cena left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Shrinivassab commented Sep 29, 2025

Uh oh!

Shrinivassab commented Sep 29, 2025

Uh oh!

Josh-Cena commented Oct 10, 2025

Uh oh!

estelle left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Josh-Cena commented Nov 10, 2025

Uh oh!

Josh-Cena left a comment

Choose a reason for hiding this comment

Uh oh!

estelle left a comment

Choose a reason for hiding this comment

Uh oh!

estelle Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Josh-Cena Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

estelle left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Sep 28, 2025 •

edited

Loading