Forget tabs – the new war is commas versus spaces: Web heads urged by browser devs to embrace modern CSS

Comma, comma, comma, comma, comma coloring ban. You come and go, you come and go...

The web is being reworked to display a rainbow of previously unavailable colors, but part of the transition demands abandoning commas for spaces when coding CSS color-space parameters.

Word of the new cruelty went out via Twitter on Thursday when Mathias Bynens, who works on Google's Chrome team, advised web developers to adopt "the modern comma-free CSS color syntax."

The reason, he explained, is that modern CSS color display functions, specifically lab(), lch(), and color(), don't work with commas. These functions provide different ways to express color values.

💡 In source code, stop using the old rgb()/hsl() CSS color syntax with commas.

Get used to the modern comma-free CSS color syntax, supported in all modern browsers.

Why? Upcoming new features such as lab(), lch(), and color() use the same syntax (and don’t work with commas). pic.twitter.com/CNVm1PeA7u

— Mathias Bynens (@mathias) April 23, 2020

CSS, short for Cascading Style Sheets, is a domain-specific declarative programming language for laying out web pages, usually in conjunction with HTML and JavaScript. It has used commas since its first appearance in the mid-1990s, and it continues to do so.

But CSS is evolving, and since 2016 there's been an effort spearheaded by Tab Atkins Jr, a developer on the Google Chrome team, and Elika Etamad (@fantasai), a member of W3C CSS Working Group and a Mozilla contributor, to get rid of unnecessary commas in CSS code related to color.

The rationale for doing so is consistency, though not everyone endorses the idea. Commas have a specific role in CSS.

"In CSS, functions are a just a way to group/name a syntax chunk, so they should work by the same rules that CSS grammar does in general: values are optional and re-orderable when possible, space-separated, and commas are used to separate *repetitions* only," Atkins wrote in a Twitter post.

The syntax for rgb() and rgba() violates this rule, he said. And in the color() function, there are different color spaces that can take a different number of values, making it difficult to know whether the final number refers to color or alpha (opacity).

Support for the comma-less syntax made its way into CSS Color Module Level 4, which became an official part of the CSS specification last year, and it's now being baked into various web browsers.

"Some parts of it have been implemented earlier than others: the comma-less syntaxes are widely supported now, limited forms of the color() function are supported in [WebKit], and the more advanced color functions (lab(), lch(), the rest of color() + @color-profile) will be coming to all browsers as they continue to improve their handling of wider and deeper color gamuts," explained Atkins via Twitter DM.

The color gamut refers to the range of available colors in a particular color space. One such color space is sRGB, used on the web to define colors in terms of red, green, and blue values ranging from 0 to 255.

There are other color spaces like Display-P3 that define a wider range of colors, about a third more than sRGB. Modern monitors can display these colors but web developers can't specify them in CSS using the traditional comma-separated syntax.

In a post earlier this month, Lea Verou, a doctoral student in computer science at MIT and member of the W3C CSS Working Group, described the situation thus:

"CSS right now cannot access these colors at all. Let me repeat: We have no access to one third of the colors in most modern monitors. And these are not just any colors, but the most vivid colors the screen can display. Our websites are washed out because monitor hardware evolved faster than CSS specs and browser implementations."

The CSS functions for displaying these more vivid colors are making their way from specification to browser. Apple's WebKit browser engine introduced support for Display-P3 in 2016, and was still the only browser engine to support it as of January 2020. But Safari, Chrome, and Firefox are working on their respective implementations.

Once the capability to display wide gamut color spaces arrives in browsers, space-separated, comma-less CSS will be required. Hence, the call to drop commas in CSS color code. ®