No-Comma Color Functions in CSS

CSS ushers in syntax improvements: no comma color function. Adam Argyle and Mathias Bynes' tweets sparked heated discussions, and this update improves the readability of CSS code. In the past, each color function required two forms (with transparency and without transparency), and the new syntax eliminated this redundancy and made it more in line with the overall CSS syntax specification.

Let's look at the comparison of code blocks in Mathias' tweet:

<code>/* 旧语法*/ rgb(0, 128, 255) rgba(0, 128, 255, 0.5) hsl(198, 38% 50%) hsla(198, 28%, 50%, 0.5)</code>

<code>/* 新语法*/ 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%)</code>

Some thoughts:

• The browser supports are good, and IE 11 only does not support it.
• If you need to be compatible with IE 11, you can use a preprocessor (or don't use the new syntax). Both preset-env and postcss-color-rgb plugins of PostCSS can implement conversions (strangely, postcss-color-rgb does not support HSL).
• Even if you don't like it, you can choose not to use the new syntax. It is unlikely that browser manufacturers will unsupport this important feature.
• The reason for migration is that new muscle memory, consistent code style, and new color functions (such as lab, lch, and color) only support new syntax.
• There is a mixed use of new and old syntax. For example, rgb(255, 0, 0, 0.5) is still valid.
• Sass support is tricky and requires some workarounds. Sass should support the new syntax as soon as possible. If it cannot be supported, this will become a factor that prevents developers from using Sass.
• Prettier (a code formatting tool) can perform syntax conversion, but it will not be done at the moment (Prettier's strategy is not to modify AST).
• Developer tools are expected to start displaying colors in this format, which will drive adoption of new syntax.
• Remember, hexadecimal color codes also have new formats.

The above is the detailed content of No-Comma Color Functions in CSS. For more information, please follow other related articles on the PHP Chinese website!