Недавно я начал использовать метод calc (...) в CSS. Я быстро понял, что код, такой как: width: calc(100%-2), не будет работать, хотя добавление пробела до и после оператора - устранит проблему, и метод calc будет работать правильно.
После небольшого исследования я нашел несколько сообщений в блогах о том, что требуется пустое пространство, и многие даже указали на спецификацию (CSS3 8.1.1) который гласит:
Кроме того, пробелы требуются по обе стороны от + и - операторы. (Операторы * и/можно использовать без пробелов вокруг них.)
Теперь, очевидно, спецификация говорит нам, что эти операторы должны быть завернуты в белый пробел, но почему? Я читал далее в спецификации (через разделы 8.1.2-4), и если это объясняется в этих дополнительных частях, я не понимаю рассуждений.
Проще говоря, может кто-нибудь объяснить, почему было указано, что calc(100% - 1) или даже calc(100%/2) является приемлемым синтаксисом, но не calc(100%-1)?
Символ - является одним из допустимых символов в Идентах CSS. Судя по приведенной здесь резолюции , похоже, они хотели предотвратить синтаксические двусмысленности, которые могут возникнуть в результате использования - без пробелов, особенно с такими значениями ключевых слов, как min-content ( хотя значения ключевых слов AFAIK еще не разрешены внутри calc() - исправьте меня, если я ошибаюсь).
Однако не все согласны с этой резолюцией.
Mozilla Developer Network объясняет это довольно хорошо:
Примечание. Операторы
+и-всегда должны быть окружены пробелами. Например, операндcalc(50% -8px)будет анализироваться как процент, за которым следует отрицательная длина, недопустимое выражение, а операндcalc(50% - 8px)- это процент, за которым следует знак минус и длина. Более того,calc(8px + -50%)рассматривается как длина, за которой следует знак плюс и отрицательный процент.Операторы
*и/не требуют пробелов, но их добавление для согласованности разрешено и рекомендуется.
Я думаю, вы должны сначала рассмотреть, как CSS определяют длину. Длина определяется как необязательный знак, за которым следует модуль и необязательная единица измерения (хотя многие свойства действительно требуют этого):
<CSSlength> := [<sign>]<module>[<unit>]
Так, например, допустимые длины CSS:
-3px
100em
+10pc
0
91
5%
Определяя длину, подобную этой, механизм CSS анализирует следующее:
calc(100% -1px);
как длина, за которой следует другая длина. В этом случае это будет 100%, за которым следует -1px, что вообще не имеет смысла для calc(). Это также объясняется на странице документации MDN.
Чтобы поместить две длины в зависимости, вам нужно использовать отдельный оператор, поэтому, следуя приведенной выше логике, вам нужно использовать пробелы:
calc(100% - 1px);