-1

Ex:calc(10px + 2px); is correct but calc(10px +2px); gives out an error or calc(10px - 2px); is correct but calc(10px -2px); gives out an error. However, this doesn't apply to other operators

Amr
  • 119
  • 1
  • 10
  • 3
    How does it otherwise know that the `-` is supposed to be a minus and not part of a negative number – Reyno Jul 23 '23 at 16:54
  • That's why I included the `+` operator example because it shouldn't matter in that case – Amr Jul 23 '23 at 16:55
  • 2
    Because the operation might get a little more complicated than `calc(10px +2px);`, like `calc(5px+-1px);` can't really work (it's `calc(5px + -1px);`? So it's always better to have whitespaces, even it looks nice. – Sally loves Lightning Jul 23 '23 at 17:05
  • 2
    @Amr - it doesn't matter in the case of `+` for technical reasons. It's just required for consistency with `-`. The CSSWG resolution is here: https://lists.w3.org/Archives/Public/www-style/2008Nov/0147.html - see the last resolution on the page. The discussion about the real reason why the hyphen is problematic begins here: https://lists.w3.org/Archives/Public/www-style/2008Mar/0173.html (it's not about negative numbers) – Alohci Jul 23 '23 at 22:37

1 Answers1

6

For the + operator, the operation might get a little more complicated than calc(10px + 2px);. I mean something like calc(5px + -1px); is actually more complicated, and it can't be calc(5px+-1px);.

For the - operator, how CSS is supposed to know whether the - is the minus operator or a part of a negative number? I mean logically though.

Also, the whitespaces make the code nice to read, for humans.

Learn more about the CSS calc() function in the documentation.

  • So is it just to look nice and parser constraints? Because unlike any other language, the whitespace don't really matter – Amr Jul 23 '23 at 17:23
  • 1
    @Amr Yes, that's it. – Sally loves Lightning Jul 23 '23 at 17:57
  • 2
    "*For the - operator, how CSS is supposed to know whether the - is the minus operator or a part of a negative number? I mean logically though.*" By using basic parsing rules, like 'is this symbol immediately preceded by another symbol'. – TylerH Jul 24 '23 at 14:17