Use of #rrggbbaa hex format for colors unnecessarily excludes older browsers

[cbirdsong]

Description

Colors are output as hex values with transparency (#rrggbbaa) when using the new opacity control¹:

<!-- wp:group {"style":{"color":{"background":"#cf2d2d9c"}}} -->
<div class="wp-block-group has-background" style="background-color:#cf2d2d9c"></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"color":{"background":"#ffc7f9b3"}}} -->
<div class="wp-block-group has-background" style="background-color:#ffc7f9b3"></div>
<!-- /wp:group -->

This format has less support than rgba() (~92% of recorded traffic compared to presumably almost 100%) and offers no tangible benefit over it. Absent that, rgba() should be preferred.

Additionally, rgba() is already what is generated for custom gradients:

<!-- wp:group {"style":{"color":{"gradient":"linear-gradient(135deg,rgba(202,247,129,0.53) 2%,rgba(114,207,126,0.78) 93%)"}}} -->
<div class="wp-block-group has-background" style="background:linear-gradient(135deg,rgba(202,247,129,0.53) 2%,rgba(114,207,126,0.78) 93%)"></div>
<!-- /wp:group -->

Simple color fills should behave the same way.

Step-by-step reproduction instructions

Set a color on a block, adjust the opacity, and look at the resulting markup.

Environment info

WordPress 6.0

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

Footnotes

1. And possibly other places I haven't noticed? ↩

[markhowellsmead]

See also #40943.

[aristath]

Personal opinion: I don't think there's anything wrong with colors defined like #rrggbbaa... 8-digit hex colors are supported by any and all browsers that WordPress supports. Gutenberg uses many modern CSS techniques such as calc(), :where(), CSS grids, flexbox and so on. None of them has 100% support... Flex has 96% support, while :where() is at 89.14% yet it's used everywhere - and rightly so.
We will never be at 100%, nor should we pursue such a thing if we really want to move forward and build for the next decade.

[cbirdsong]

WordPress’ only explicit list of browser support was intended to apply to the admin area, not the front end of the site. See this discussion on CSS authoring practices and browser support:

• Does :where() selector have sufficient browser support? #39621

However, the difference between those examples and this specific issue is that :where() and custom properties are (mostly) being used to solve problems with no existing easy solution¹, while #rrggbbaa‘s use provides no benefit in comparison to an older more well-supported color format. There is no trade-off being made. It is only exclusionary.

Footnotes

1. However, the implementation could be a lot better. It is best practice to supply fallback values when using modern CSS techniques, but there seems to be very little consideration of progressive enhancement in the CSS that ships with the editor. The end result of this is definitely problematic when considering how heavily :where() and custom properties are used. ↩