Почему вычисляется (50% + 0) ошибка?

При тестировании некоторых новых макетов я обнаружил, что пишу в один момент

.test1 {width: calc(50% + 0);}

и, к моему удивлению, это не сработало. Убедившись, что у меня нет опечатки, я был вынужден сделать вывод, что браузер отклонил это как ошибку. Тогда я подумал, что это был недостаток в браузере, с которым я тестировал, но другой ведет себя одинаково!

Так что же это за это выражение, что неправильно? Где ошибка?

p {border:2px solid green}
.test1 {width:calc(50% + 0);}   /* wrong! */
.test2 {width:calc(50%);}       /* OK */
.test3 {width:calc(50% + 0px);} /* also OK */

<p class="test1">test 1</p>
<p class="test2">test 2</p>
<p class="test3">test 3</p>

Ответ 1

Это связано с Проверка типов

В + или -, убедитесь, что обе стороны имеют один и тот же тип, или что одна сторона является <number>, а другая - <integer>. Если обе стороны тот же тип, разрешение на этот тип. Если одна сторона является <number>, а другой - <integer>, разрешите <number>.

Если оператор не проходит вышеуказанные проверки, выражение инвалид.

Ваш текущий код имеет два значения, 50% - percentage, а 0 - integer/number. Он не подтверждает правила проверки типов.

Для комментария Poke:

Ссылка из Вычисленное значение

Если проценты не разрешены при вычисленном значении, это не разрешены в выражениях calc(), например. calc (100% - 100% + 1em) разрешает вычислять (0% + 1em), а не вычислять (1em). Если есть специальные правила вычисления процентов в значении (например, свойство высоты), они применяются всякий раз, когда выражение calc() содержит проценты.

Примечание. Таким образом, вычисленное значение выражения calc() может быть представленный либо как число, либо кортеж измерения, а процент.

Таким образом, можно сказать, что 50% + 10px является исключением для проверки типа и рассматривается в разделе вычисленного значения статьи.

Ответ 2

Это потому, что выражение (50% + 0) состоит из двух разных типов.

У вас может возникнуть соблазн подумать, что 50% - это процент, а 0 - целое число/число и не должен проверять правила проверки типов. Но это неверно. Не путайте его с помощью units. px, em, % - все units типа length dimension-token. Разрешены два разных units, но должны быть одного и того же type. Не допускаются два разных types.

W3C говорит об типах:

Математическое выражение имеет разрешенный тип, который является одним из <length>, <frequency>, <angle>, <time>, <number>, or <integer>. Разрешенные тип должен быть действительным для места размещения; в противном случае выражение недопустимо. Разрешенный тип выражения определяемый типами содержащихся в нем значений. <number-token> являются типа <number> or <integer>. Тип A <dimension-token> задается формулой его единица (см <length>, deg - <angle> и т.д.).

Левая часть вашего выражения: 50%, 50px, or 50em - это all units типа length, которые <dimension-token> s, а правая часть вашего выражения: 0 - это тип integer, который является <number-token>.

Как упоминалось @Manoj , операторы + или - специально ограничивают операнды одинаковыми типа, то есть либо length или time или number-token s.

Позже в приведенном выше сообщении:

В + или - убедитесь, что обе стороны имеют один и тот же тип или одна сторона - это <number>, а другая - <integer>. Если обе стороны тот же тип, разрешить этот тип....

Суммарно

50% + 0px → Both are of the same type i.e. 'length
50% + 0   → Left is 'length' type and the right is 'integer' type.

Ответ 3

50% (в процентах) и 0 (Int) - это два разных типа данных, которые похожи на то, как целое число (Int) и строка различаются, оба должны быть одного типа для выполнения вычисления.