html - etiquetas - ¿Por qué tengo que especificar un identificador de unidad(por ejemplo, ''px'') al pasar 0 como el único argumento en la función calc()?

meta tags ejemplos

Question

El Módulo de Valores y Unidades de CSS Nivel 3 establece:

... para longitudes de cero, el identificador de la unidad es opcional (es decir, se puede representar sintácticamente como el <number> ''0'').

Esta es la razón por la que la mayoría de nosotros eliminamos el identificador de la unidad cuando tratamos con 0s, ya que 0px , 0em , 0% y así sucesivamente, todos evaluamos a la misma longitud.

La misma documentación también indica que la función calc() :

... se puede usar siempre que se permitan los valores <length> , <frequency> , <angle> , <time> , <number> o <integer> . Los componentes de una expresión calc() pueden ser valores literales, expresiones attr() o calc() , o valores de <percentage> que se resuelven en uno de los tipos anteriores.

El problema aquí es que las últimas versiones de Chrome, Firefox, Opera e Internet Explorer tratan a calc(0) como una expresión no válida. El 0 aquí es un valor que se resuelve en un tipo <number> (como se nos ha informado desde el primer fragmento de código que cité en esta publicación).

Si intentamos y validamos el width: calc(0) través del propio Validador de CSS del W3C , se nos presenta el siguiente error:

Error de valor: ancho calc(0) no es un valor de ancho: calc(0)

Sin embargo, si intentamos y validamos el width: 1 , en cambio, nos da el siguiente error que parece contradecir este error:

Valor Error: ancho solo 0 puede ser una longitud. Debes poner una unidad después de tu número: 1

Ejemplo

En este ejemplo, se aplica un borde rojo de 1px a cada elemento de code . En un intento de anular el ancho del borde, el primero tiene calc(0) especificado como el ancho del borde, y el último tiene calc(0px) .

code {
  display: inline-block;
  padding: 2px;
  
  border: 1px solid red;
}

code:first-of-type {
  border-width: calc(0);
}

code:last-of-type {
  border-width: calc(0px);
}

<code>border-width: calc(0);</code>
<code>border-width: calc(0px);</code>

Para aquellos que usan navegadores que no admiten la función calc() CSS, aquí hay una imagen del resultado que veo en Chrome (v39):

Si observamos esto en el Inspector de elementos de Chrome, veremos que calc(0) es considerado inválido:

¿Hay alguna razón detrás de por qué calc(0) se trata como una expresión no válida? ¿El número 0 no es un valor que se considera "literal"?

Answer 1

Es básicamente lo que dicen @Dave y @BoltClock:

La sección 8.1.2 de esa especificación dice que el tipo resuelto de la expresión matemática calc(0) está determinado por los tipos de los valores que contiene, que para un NÚMERO token como 0 es un <número> o <integer>. Ninguno de estos tipos es válido como valor de width , que toma un <length> o <percentage>, por lo que la expresión no es válida.

Pero si usa 0 como valor, se puede analizar como <length>, según la sección 5 de la especificación que citó.

calc(0) no es sintácticamente (o léxicamente, como vemos) equivalente a 0 , por lo que la sección 5 no se aplica a él.

¿O estaba haciendo una pregunta filosófica acerca de por qué la especificación fue escrita así?