Warum muss ein + oder - innerhalb der Calc() - Methode mit Leerzeichen umgeben sein?

Question

Kürzlich habe ich die Methode calc (...) in CSS verwendet. Ich habe schnell gelernt, dass Code wie: width: calc(100%-2) wird nicht funktionieren, obwohl das Hinzufügen von Leerraum vor und nach dem --Operator wird das Problem beheben und die Calc-Methode wird ordnungsgemäß funktionieren.

Nach einem wenig Forschung tun, fand ich mehr Blog-Posts verweisen, dass die Leerzeichen erforderlich sind, und viele haben sogar auf die Spezifikation hingewiesen (CSS3 8.1.1), die besagt:

Zusätzlich ist Leerzeichen erforderlich auf beide Seiten der + und - Betreiber. (Der * und/opera kann um sie herum ohne Leerzeichen verwendet werden.)

nun klar, die spec uns sagt, dass diese Operatoren in Leerzeichen gewickelt werden muss, aber warum? Ich habe weiter in der Spezifikation gelesen (durch Abschnitte 8.1.2-4) und wenn es in diesen zusätzlichen Teilen erklärt wird, verstehe ich die Argumentation nicht.

In einfachen Worten, könnte jemand erklären, warum es angegeben wurde, dass calc(100% - 1) oder sogar calc(100%/2) ist akzeptabel Syntax, aber nicht calc(100%-1)?

Answer 1

Das Zeichen - ist eines der zulässigen Zeichen in CSS-IDs. Gemessen an der Auflösung here, scheint es, dass sie syntaktische Ambiguitäten vermeiden wollten, die durch die Verwendung von - ohne Leerzeichen entstehen könnten, insbesondere mit Schlüsselwörtern wie min-content (obwohl AFAIK-Schlüsselwortwerte innerhalb calc() noch nicht erlaubt sind - korrigieren Sie mich, wenn ich bin falsch).

Not everyone agrees mit dieser Auflösung, obwohl.

Answer 2

The Mozilla Developer Network erklärt es ganz gut:

Hinweis: Die + und - Betreiber immer Leerzeichen umgeben sein muss. Der Operand von calc(50% -8px) zum Beispiel wird als Prozentsatz analysiert, gefolgt von einer negativen Länge, einem ungültigen Ausdruck, während der Operand calc(50% - 8px) ein Prozentwert ist, gefolgt von einem Minuszeichen und einer Länge. Darüber hinaus wird calc(8px + -50%) als eine Länge behandelt, gefolgt von einem Pluszeichen und einem negativen Prozentsatz.

Die Operatoren * und / benötigen keine Leerzeichen, aber aus Konsistenzgründen ist es zulässig und empfohlen.

Answer 3

Ich denke, Sie sollten zuerst überlegen, wie CSS eine Länge identifizieren.Eine Länge wird als ein optionales Vorzeichen definiert ist, gefolgt von einem Modul und einer optionalen Einheit (obwohl viele Eigenschaften, die es tatsächlich erforderlich ist):

<CSSlength> := [<sign>]<module>[<unit>] 

So zum Beispiel gültige CSS Längen sind:

-3px 
100em 
+10pc 
0 
91 
5% 

eine Länge wie diese definiert, analysiert die CSS-Engine des folgenden:

calc(100% -1px); 

als eine Länge von einer anderen Länge gefolgt. In diesem Fall wäre es 100% gefolgt von -1px, was überhaupt keinen Sinn macht zu calc(). Dies wird auch in der relativen MDN documentation page erklärt.

Um zwei Längen in Relation setzen Sie einen eindeutigen Operator verwenden müssen daher die obige Logik folgend, müssen Sie Leerzeichen verwenden:

calc(100% - 1px);