CSS 中的无逗号颜色函数

最近关于此主题的几条推文在网上疯传，其中一条来自 Adam Argyle，另一条来自 Mathias Bynes。这是一个很好的变化，让 CSS 更清晰。以前，每个颜色函数实际上都需要两个函数，一个用于透明度，另一个没有，这消除了这种需求，并将语法 更符合 CSS 语法。

让我在这里重制 Mathias 推文中的代码块

/* Old Syntax */
rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)

/* New Syntax */
rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

想法

• 浏览器的 支持 非常不错：除了 IE 11 之外。
• 如果您需要支持 IE 11，您可以预处理它（或者不使用它）。PostCSS 的 preset-env 可以实现，此外还有一个非常具体的插件 postcss-color-rgb（奇怪的是它不支持 HSL）。
• 如果您不喜欢它，您根本不需要使用它。任何浏览器都不会撤销对如此重要功能的支持。
• 切换的原因是肌肉记忆和一致的代码库，因为新的颜色函数（例如，lab、lch 和 color）将 *仅* 支持这种新的语法。
• 存在一种新的和旧的混合形式。您可以将不透明度值传递给 rgb()，它仍然像 rgb(255, 0, 0, 0.5); 一样工作。
• 如果您在 Sass 中需要它（据称 很痛苦 需要支持），有一个 奇怪的解决方法。我猜 Sass 最终会支持它。如果他们做不到，这是一种会导致人们放弃项目的刺。
• Prettier 负责从间距和语法的角度清理您的代码，它 *可以* 在这里进行干预并转换语法，但它 不会（Prettier 的立场是不改变 AST）。
• 我想 DevTools 会开始使用这种格式显示颜色，这将推动采用。
• 请记住，即使是十六进制颜色代码也有 新的花哨格式。