relnote(Fx111): color(), lab(), lch(), oklab(), oklch() support

[bsmth]

CSS color functions enabled behind a pref (layout.css.more_color_4.enabled) in Fx 111

Additions:

• color() includes @media query to detect color-gamut support.
• Examples added for lab(), lch(), oklab(), oklch()
• Explained ranges for values in color functional notation

Other:

• Changed use of https://bugzil.la/<number>) to {{bug(<number>)}}

Related issues and pull requests:

• Parent issue [CSS] Colors Level 4 lab() lch() color() #24395
• BCD relnote(Fx111): color(), lab(), lch(), oklab(), oklch() support browser-compat-data#19035

Bugzilla:

• color() https://bugzilla.mozilla.org/show_bug.cgi?id=1128204
• lab(), lch(), oklab(), oklch() https://bugzilla.mozilla.org/show_bug.cgi?id=1352757

TODO:

• The bug macro is deprecated, revert changes in this PR that touch this

[github-actions]

Preview URLs (7 pages)

• /en-US/docs/Mozilla/Firefox/Releases/111
• /en-US/docs/Web/CSS/@media/color-gamut
• /en-US/docs/Web/CSS/color_value/color
• /en-US/docs/Web/CSS/color_value/lab
• /en-US/docs/Web/CSS/color_value/lch
• /en-US/docs/Web/CSS/color_value/oklab
• /en-US/docs/Web/CSS/color_value/oklch

External URLs (3)

URL: /en-US/docs/Web/CSS/color_value/oklab
Title: oklab()

• https://bottosson.github.io/posts/oklab/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Mozilla/Firefox/Releases/111
Title: Firefox 111 for developers

• https://bugzil.la/1128204 (1 time) (Note! This may be a new URL 👀)
• https://bugzil.la/1352757 (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2023-03-07 08:43:42)

[estelle]

Hi @bsmth

Can we change all the id and id values to data attributes so the HTML reads:

<div data-color="<your current id>"

and all the CSS selectors read:

[data-color="<your current id>"]

We do want to teach people to use attribute selectors. We don't want to teach people to use ID selectors, especially ones based on appearance.

This fix can be a quick search/replace.

Alternatively, we could use the actual used value at the value of the data-color attribute, like so:

<div data-color="rgb(0 0 0 / 0.5)">, which isn't possible when using IDs. Maybe one day this attr() example will work, but we are not there yet. https://bugzilla.mozilla.org/show_bug.cgi?id=1448251

[bsmth]

Can we change all the id and id values to data attributes so the HTML reads:

<div data-color="<your current id>"

and all the CSS selectors read:

[data-color="<your current id>"]

Thanks, @estelle - done in 2a770c2

[estelle]

minor edits.

[bsmth]

Thanks @estelle 🙌🏻