Forget tabs – the new war is commas versus spaces: Web heads urged by browser devs to embrace modern CSS
(2020/04/24)
- Reference: 1587725346
- News link: https://www.theregister.co.uk/2020/04/24/no_comma_drama_css_devs/
- Source link:
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). [1]pic.twitter.com/CNVm1PeA7u — Mathias Bynens (@mathias) [2]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 [3]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.
Software dev bombshell: Programmers who use spaces earn MORE than those who use tabs [4]READ MORE
The rationale for doing so is consistency, though [5]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 [6]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 [7]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 [8]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 [9]a third more than sRGB. Modern monitors [10]can display these colors but web developers can't specify them in CSS using the traditional comma-separated syntax.
In [11]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 [12]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. ®
Sponsored: [13]How To Accelerate Brilliant Digital Experiences With Low-Code
[1] https://t.co/CNVm1PeA7u
[2] https://twitter.com/mathias/status/1253242715304857601?ref_src=twsrc%5Etfw
[3] https://github.com/w3c/csswg-drafts/issues/266#issuecomment-230898208
[4] https://www.theregister.co.uk/2017/06/16/spaces_vs_tabs/
[5] https://twitter.com/jensimmons/status/753664695563943936
[6] https://twitter.com/tabatkins/status/1253364375575883777?s=20
[7] https://www.w3.org/TR/css-color-4
[8] https://www.w3.org/TR/css-color-3/#rgb-color
[9] https://twitter.com/svgeesus/status/1220029106248716288
[10] https://webkit.org/blog-files/color-gamut/comparison.html
[11] http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
[12] https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
[13] https://go.theregister.co.uk/tl/1936/-8552/how-to-accelerate-brilliant-digital-experiences-with-low-code?td=wptl1936
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). [1]pic.twitter.com/CNVm1PeA7u — Mathias Bynens (@mathias) [2]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 [3]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.
Software dev bombshell: Programmers who use spaces earn MORE than those who use tabs [4]READ MORE
The rationale for doing so is consistency, though [5]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 [6]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 [7]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 [8]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 [9]a third more than sRGB. Modern monitors [10]can display these colors but web developers can't specify them in CSS using the traditional comma-separated syntax.
In [11]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 [12]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. ®
Sponsored: [13]How To Accelerate Brilliant Digital Experiences With Low-Code
[1] https://t.co/CNVm1PeA7u
[2] https://twitter.com/mathias/status/1253242715304857601?ref_src=twsrc%5Etfw
[3] https://github.com/w3c/csswg-drafts/issues/266#issuecomment-230898208
[4] https://www.theregister.co.uk/2017/06/16/spaces_vs_tabs/
[5] https://twitter.com/jensimmons/status/753664695563943936
[6] https://twitter.com/tabatkins/status/1253364375575883777?s=20
[7] https://www.w3.org/TR/css-color-4
[8] https://www.w3.org/TR/css-color-3/#rgb-color
[9] https://twitter.com/svgeesus/status/1220029106248716288
[10] https://webkit.org/blog-files/color-gamut/comparison.html
[11] http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
[12] https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
[13] https://go.theregister.co.uk/tl/1936/-8552/how-to-accelerate-brilliant-digital-experiences-with-low-code?td=wptl1936
The fight below \040
Jonathan Richards 1
> an effort ... by Tab Atkins Jr. ...to get rid of unnecessary commas ...
In the (61, 66, 139) corner, Tab vs. \054 in the (255,0,0) corner.
But is he a VT \013 or an HT \009?
Anonymous Coward
I've not done any CSS in years, but that new syntax looks far harder to read, the comma and space provides a nice break between the values, and hsl(198deg 28% 50% / 50%) is that 50% / 50% 100% ?, no idea if that's a calculation or 3 different values or what right off. If its 3 values, as space is the value separator, what is the / meaning?
Seems like attention...
whore.