web-dev-qa-db-fra.com

CSS3 calc (100% -88px) ne fonctionne pas dans Chrome

J'ai remarqué que mon utilisation de la fonction CSS3 calc() comme unité pour width ne fonctionne pas dans la dernière version de Chrome.

Dans les outils de développement Chrome Developer, la règle avec calc() a un barré à travers elle et un point d'exclamation dans un triangle jaune à gauche de celui-ci. Cela indique que la propriété ou la valeur n'est pas reconnue.

Comment le faire fonctionner dans les navigateurs modernes? Parce qu'il s'agit d'une valeur et non d'une propriété, où vont les préfixes de fournisseurs?

Mise à jour:

Quand je dis que cela ne fonctionne pas, je veux dire que Chrome Dev Tools dit qu'il ne reconnaît pas mon utilisation de celui-ci width: calc(100%-88px);. Comment puis-je savoir que ce n'est pas En raison de la barre barrée et de l'icône du triangle jaune à côté de la règle de style dans chrome dev tools.

cssgoogle-chromecss3
60
Irfan Mir

Le problème dans la question était dû au manque d'espace autour de l'opérateur de soustraction.

Notez que la grammaire nécessite des espaces autour des opérateurs binaires "+" et "-". Les opérateurs "*" et "/" ne nécessitent aucun espace.

https://www.w3.org/TR/css3-values/#calc-syntax

Je suppose que cela vise à clarifier la différenciation entre les opérateurs et les numéros signés.

Mauvais: calc(100%-88px)
Bon: calc(100% - 88px)

Comment puis-je savoir qu'il ne le reconnaît pas? En raison de la barre barrée et de l'icône du triangle jaune à côté de la règle de style dans chrome dev tools.

Une propriété qui est frappé dans lorsqu'il est affiché dans les outils de développement de Chrome peut être valide mais remplacé; cependant, une propriété barrée par et avec une icône de triangle d'avertissement à côté d'elle n'est pas valide.

Autres notes

  • Chrome a pris en charge calc() pour assez longtemps (confirmé sous OSX et Windows).
  • Chrome peut ne pas prendre en charge les unités de fenêtre tel que vh/vw dans calc(). À la fin de 2014, il y avait une activité sur la mise en œuvre de cela, mais le bogue associé est toujours ouvert.
  • Lors de mes tests, Safari prendra en charge calc() avec le préfixe -webkit Sous OSX mais pas Windows.
  • IE9 + prend en charge calc() sans préfixe de fournisseur.
  • FF prend en charge calc() sans préfixe de fournisseur.
155
Tim Medora

J'ai eu un peu de mal avec la propriété calc et seule l'approche ci-dessous a fonctionné.

-webkit-calc(~'100% - 40px'); // good: result 395px (in my application)

toutes les suggestions ci-dessus comme:

-webkit-calc(100% - 40px); // bad: result 60%

fini avec un mauvais calcul comme 60%.

J'espère que ça aide quelqu'un.

5
Tomasz Czechowski