CSS calc à hériter

Je voudrais utiliser inherit avec calc() comme ceci:

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

Mais il ne semble pas fonctionner.

Est-il des navigateurs bug ou specs?

  • Ne fonctionne pas de cette façon ......
  • Semble que vous êtes hors de la chance. J'ai testé, si vous pouviez écrire calc(100% + 2s) mais la durée propriétés ne prenez pas les pourcentages. (Seulement 120% par lui-même ne fonctionne pas non plus.) Désolé. Bonne question!
  • Si le Moins c'est une option, vous pouvez faire @duration:10s; #foo {animation-duration:@duration;} #foo > .bar {animation-duration:@duration + 2s; }. Bien sûr, ce n'est pas exactement la même. Il y a aussi CSS Variables, mais c'est de la science fiction pour l'instant.
  • Salut, avez-vous trouvé une solution?
  • nothink en pur css
  • les secondes sont maintenant pris en charge dans calc depuis Firefox Quantum de mise à jour (nouveau Stylo moteur CSS)

InformationsquelleAutor Yukulélé | 2014-02-06
  1. 27

    La inherit mot-clé ne peut exister seul, comme une valeur dans une déclaration de propriété. Il ne peut pas être utilisé avec autre chose comme une valeur, parce que c'est une valeur en soi. Cela signifie qu'il ne peut pas être utilisée avec les fonctions comme calc() soit. Voir CSS2.1 et css3-cascade.

    En outre, la calc() fonction elle-même ne prend littérale des valeurs numériques tels que les nombres, les dimensions et les pourcentages.

    Pour dire les choses simplement, la spécification ne permet pas à l'aide de inherit de cette façon.

    • C'est vrai, et c'est une honte que le 100% n'est pas une option.
    InformationsquelleAutor BoltClock