calc() la fonction à l'intérieur d'un autre calc() dans le CSS
Comment puis-je utiliser un CSS calc fonction à l'intérieur d'un autre CSS calc fonction? Selon cette post c'est possible, mais il n'y a pas d'exemple de cela.
OriginalL'auteur Raghavendra Prasad | 2014-12-22
Vous devez vous connecter pour publier un commentaire.
Un exemple:
Mise à jour sur imbriquée calc avec css variables:
Ainsi, la spécialisation actuelle ainsi le prouve à l'aide de parenthèses à l'intérieur de calc() est imbriqué calc.
En savoir plus à propos de css variables ici.
(1% + 30px) est ce que imbriquée calc à l'intérieur de calc....
Ce n'était pas ce qui était demandé.
Cette réponse doit contenir
calc(100% - calc(1% + 30px));
(oucalc(100% - (calc(1% + 30px)));
si vous voulez être conformes aux spécifications), sinon il n'a pas répondu à la question.Mis à jour. Merci.
OriginalL'auteur
Je suis l'un des rédacteurs de l'Valeurs & Unités de spec, qui définit calc().
calc() devrait être emboîtables à l'intérieur de calc(). Il y a un oubli dans la grammaire, les définitions, pour un temps qui techniquement ne le permettaient pas, mais j'ai récemment résolu. Les implémentations n'ont pas pris encore, à ma connaissance (tho il ressemble à Chrome 51 et Firefox 48 aurez cette fixe, woo!).
Cela dit, il est zéro raison à nid calc() expressions normalement ils sont exactement identiques simplement à l'aide de parenthèses. La seule raison pour le faire est lorsque vous utilisez des propriétés personnalisées et variables.
OriginalL'auteur
La référence que vous avez cité n'est certes un peu déroutant.
Il est pas possible d'utiliser un
calc
fonction à l'intérieur d'un autrecalc
.De le specs ici: http://dev.w3.org/csswg/css-values/#calc-notation
Vous pouvez avoir
calc
expression à l'intérieur d'expressions, mais pas lecalc()
fonction elle-même.Et un exemple est donné dans cette ref pour les expressions imbriquées:
Et aussi pour de multiples
calc
pour de multiples propriétés:La syntaxe à partir de la spécification ci-dessus:
.
calc()
les appels de la fonction: w3.org/TR/css3-values/#calc-syntax bien sûr, c'était l'année dernière. Je ne sais pas s'il a jamais été mis en œuvre.Le spec-vous lié est de 30-Juil-2013. Les specs qui j'ai fait un lien sur le "dev" de 19-Dec-2014. Donc, je pense que la référence correcte serait de la spec-vous liés. Mais, même ce qui ne veut pas dire que
calc
peuvent être imbriquées. Peut-être que je ne suis pas à la recherche dur!Vous pouvez voir le
calc
production imbriquée dans une autre production... qui est imbriqué dans lecalc
de production. De toute façon, il s'avère que les implémentations de faire suivre ce qui est dans l'urgence donc je pense qu'ils ont juste changé la spécification de match.Yup, c'était juste un oubli dans la grammaire. Source: je suis la spécification de l'éditeur, et récemment, j'ai corrigé cela.
Regarde comme Internet Explorer 11 ne prend pas en charge imbriquée calcs par exemple, calc(((100% - calc((80 / 100) * (100% + 17px))) / 2) + 17px / 2).. Chrome n'a pas un problème.
OriginalL'auteur