Google Chrome Devtool RGBA 问题答案

【问题标题】：Google Chrome Devtool RGBA IssueGoogle Chrome Devtool RGBA 问题
【发布时间】：2021-01-24 13:18:45
【问题描述】：

过去几个月我一直在处理同样的问题。我用谷歌搜索过同样的问题，但我想以前没有人解决过这个问题。

以前当我更改十六进制颜色透明度时，例如#FFFFFF，Chrome devtools 为我提供了 RGBA 版本的选项，如 RGBA(255,255,255,10%) 但现在当我这样做时结果是 10% 白色透明度 ise rgb(255 255 255 / 10%)

如您所见，RGBA 现在消失了，devtool onşy 显示了奇怪的 rgb 类型版本。

以前有人发出过同样的问题吗？你知道如何解决它吗？

【问题讨论】：

这是一种新的 rgba 格式，devtools 最近开始使用。为什么会出现问题？
这能回答你的问题吗？ Chrome Dev Tools RGBA/HSL Conversion to some new format
@wOxxOm 这是一个问题，因为我通常使用 devtools 为块或背景找到完美的透明度选项。在此新更改之后，我无法从 devtool 复制/粘贴 rgba 选项。对于 UI 开发人员来说，这确实是一个愚蠢的更新。另外这次更新的原因是什么？你能给我解释一下吗？
@wOxxOm 我很同情他的挫败感，我也有这种挫败感。我知道有一个新规范，但新语法不适用于旧浏览器，我认为惩罚试图确保颜色（以及其他许多事情）仍然适用于旧浏览器的人是不正确的。

【解决方案1】：

打开 chrome 开发者 >> 打开颜色选择器 + shift

【讨论】：

【解决方案2】：

这是an intentional change in DevTools。基于逗号的语法现在被规范称为“遗留语法”。

? 在源代码中，停止使用带有逗号的旧 rgb()/hsl() CSS 颜色语法。

习惯所有现代浏览器都支持的现代无逗号 CSS 颜色语法。

为什么？即将推出的新功能（例如 lab()、lch() 和 color()）使用相同的语法（并且不能使用逗号）。

[...] 由于遗留原因，还存在一个 rgba() 函数，其语法和行为与 rgb() 相同。

【讨论】：