1

If we want two background images we write:

background-image: url("img_tree.gif"), url("paper.gif"); // There's a comma between them!

But to use two transforms we write:

transform: rotate(90deg) skew(20deg); // No comma between them!

We is there no comma between the multiple transforms? Many other css properties use commas to indicate several parameters in one property.

Poogy
  • 2,597
  • 7
  • 20
  • 35
  • 2
    Depends on the spec. Sometimes there is no "why". – Diodeus - James MacFarlane Mar 12 '18 at 19:12
  • in transform they are additif, we apply one and then the other so at the end it's ONLY one ... with background we have MANY background ... But at the end it is a syntax you have to follow and dont ask for the reason – Temani Afif Mar 12 '18 at 19:12
  • Related: [When a CSS property can have multiple values, are those values always separated by whitespaces?](https://stackoverflow.com/questions/22392420/when-a-css-property-can-have-multiple-values-are-those-values-always-separated) – BoltClock Mar 13 '18 at 02:08

1 Answers1

1

This is actually a very good observation. Shame on these people saying it is just because. The spec isn't some magical tablet like the 10 commandments, that just appears into existence. It is extensively debated by several members of the community (mediated by W3), until there is some sort of consensus. Then the developers (mostly browser developers I imagine) will take the specs and implement. The interesting part is that the debate is open and public. So not only you can participate by giving your opinion on upcoming specs, but you can also search back and find out all the arguments that led to a consensus: https://lists.w3.org/Archives/Public/www-style/2004Oct/

I haven't read the whole discussion, but I can imagine that an implementation without commas would be harder and less predictable, since each background holds a set of properties. So for example, on the background shorthand it would be impossible to say where one background declaration starts and the other one ends, since there are no required properties. Like background: red url(img.png);. Is that one bg or two? And this is definitely two: background: red, url(img.png);

That is just what pops up in my head, but if you dig into the discussion you will see that there are all sorts of considerations, like the effect on other APIs, like js, backwards compatibility, etc

Hugo Silva
  • 6,748
  • 3
  • 25
  • 42
  • Layered backgrounds weren't introduced until some time between 2002 and 2005 (at which time the Backgrounds and Borders modules were merged), so the background properties (not just the shorthand, but also background-position) had been well-defined to have whitespace-separated values for a number of years. In that specific case, the decision to use commas was a no-brainer. – BoltClock Mar 13 '18 at 02:16