que - height css responsive

CSS calc con inherit

Question

Me gustaría usar inherit con calc() esta manera:

#foo{
  animation-duration:10s;
}
#foo > .bar
{
  animation-duration:calc(inherit + 2s); /* =12s */
}

Pero no parece funcionar.

¿Son los navegadores errores o especificaciones?

Answer 1

La palabra clave inherit solo puede existir sola como valor en una declaración de propiedad. No se puede usar con ningún otro elemento como valor, porque es un valor en sí mismo. Esto significa que tampoco se puede usar con funciones como calc() . Ver CSS2.1 y css3-cascada .

Además, la función de calc() solo toma valores numéricos literales como números, dimensiones y porcentajes .

Entonces para decirlo simplemente, la especificación no permite el uso inherit esa manera.