Почему в методе Calc() должен быть окружен пробелом + или?

Недавно я начал использовать метод calc (...) в CSS. Я быстро понял, что код, такой как: width: calc(100%-2), не будет работать, хотя добавление пробела до и после оператора - устранит проблему, и метод calc будет работать правильно.

После небольшого исследования я нашел несколько сообщений в блогах о том, что требуется пустое пространство, и многие даже указали на спецификацию (CSS3 8.1.1) который гласит:

Кроме того, пробелы требуются по обе стороны от + и - операторы. (Операторы * и/можно использовать без пробелов вокруг них.)

Теперь, очевидно, спецификация говорит нам, что эти операторы должны быть завернуты в белый пробел, но почему? Я читал далее в спецификации (через разделы 8.1.2-4), и если это объясняется в этих дополнительных частях, я не понимаю рассуждений.

Проще говоря, может кто-нибудь объяснить, почему было указано, что calc(100% - 1) или даже calc(100%/2) является приемлемым синтаксисом, но не calc(100%-1)?

Ответ 1

Символ - является одним из допустимых символов в Идентах CSS. Судя по приведенной здесь резолюции , похоже, они хотели предотвратить синтаксические двусмысленности, которые могут возникнуть в результате использования - без пробелов, особенно с такими значениями ключевых слов, как min-content ( хотя значения ключевых слов AFAIK еще не разрешены внутри calc() - исправьте меня, если я ошибаюсь).

Однако не все согласны с этой резолюцией.

Ответ 2

Mozilla Developer Network объясняет это довольно хорошо:

Примечание. Операторы + и - всегда должны быть окружены пробелами. Например, операнд calc(50% -8px) будет анализироваться как процент, за которым следует отрицательная длина, недопустимое выражение, а операнд calc(50% - 8px) - это процент, за которым следует знак минус и длина. Более того, calc(8px + -50%) рассматривается как длина, за которой следует знак плюс и отрицательный процент.

Операторы * и / не требуют пробелов, но их добавление для согласованности разрешено и рекомендуется.

Ответ 3

Я думаю, вы должны сначала рассмотреть, как CSS определяют длину. Длина определяется как необязательный знак, за которым следует модуль и необязательная единица измерения (хотя многие свойства действительно требуют этого):

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

Так, например, допустимые длины CSS:

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

Определяя длину, подобную этой, механизм CSS анализирует следующее:

calc(100% -1px);

как длина, за которой следует другая длина. В этом случае это будет 100%, за которым следует -1px, что вообще не имеет смысла для calc(). Это также объясняется на странице документации MDN.

Чтобы поместить две длины в зависимости, вам нужно использовать отдельный оператор, поэтому, следуя приведенной выше логике, вам нужно использовать пробелы:

calc(100% - 1px);