28172 sujets

CSS et mise en forme, CSS3

Usage de la propriété calc( )

Bonjour a tous,

quelqu'un saurait-il m'expliquer l'avantage ( ou le désavantage ) à utiliser la propriété calc() plutôt qu'un simple pourcentage pour donner une valeur à une width.
J'ai trouver un sujet sur le forum qui dit de ne pas l'utiliser sans préciser pourquoi mais je n'ai rien trouvé dans les tutos de " Alsa " qui parle de cette propriété.

Merci Alsanautes de tous bords pour vos avis.
C'est un sparadrap recent , qui sert a recalculé une valeur en y mélangeant unités fixe et pourcentages par exemples. dans certains cas la regle box-sizing , qui passe d'un modele de boite a un autre peut-être une solution.

Les commentaires à coté sont utiles quelques mois plus tard ou lorsqu'un autre édite les feuilles de styles, de façon a savoir d’où vient le besoin de réajuster une taille là ou CSS n'y arrive pas naturellement.( IE permettait via expression d’insérer du javascript dans les styles et de faire plus qu'un simple calc() ).
Administrateur
Bonjour,

Calc() est une bénédiction Smiley cligne

Par exemple, seul un navigateur est capable de savoir ce que donne l'expression "100px + 2em". Aucune machine à calculer ne peut le faire car elle ne connaît pas le contexte.

Avec calc(), on laisse faire le navigateur.

Quelques exemples concrets :

1- calculs simples :

.content {
  width: calc(100px / 3); 
}

.content {
  width: calc(100% - 3em); 
}


2- Positionnements :

.content {
  background-position: calc(100% - 50px) calc(100% - 20px);
}

.content {
  top: calc(100px - 5rem);
}


3- Combinaisons avec d'autres propriétés :

img {
  top: calc(attr(height) / 2);
}


4- Combinaisons avec des variables CSS :

img {
  top: calc(var(--small-value) / 2);
}


Etc.

en fait les possibilités sont quasi infinies !

Le désavantage est la compatibilité encore ténue : IE9 mini et - surtout - Android 4.4 mini Smiley decu
Modifié par Raphael (15 May 2014 - 15:51)
Administrateur
eviouchka a écrit :
mais je n'ai rien trouvé dans les tutos de " Alsa " qui parle de cette propriété.

C'est prévu Smiley smile
Modifié par Raphael (15 May 2014 - 15:47)
thx Raphaël pour les exemples et le futur tuto Smiley biggrin

dommage que ce soit peu supporté ... y'a t'il réellement un intérêt alors à utiliser cette propriété s'il faut toujours ajouter un code pour les versions antérieures de navigateurs ?
Modifié par eviouchka (15 May 2014 - 16:07)
Administrateur
eviouchka a écrit :
dommage que ce soit peu supporté ... y'a t'il réellement un intérêt alors à utiliser cette propriété s'il faut toujours ajouter un code pour les versions antérieures de navigateurs ?

Pour l'instant c'est encore limité aux cas où l'on ne cible pas les mobiles et où on a déjà laissé tomber IE8, ce qui ne saurait tarder Smiley smile

Il ne faut pas non plus regretter que les standards évoluent plus vite que les navigateurs. Ce n'est pas une si mauvaise chose que cela.
Modernizr permet de détecter le support de calc en javascript. Le code en question:

var el = document.createElement("div");
var isCalcSupported;

el.style.cssText = "width: calc(2em);"; //adapter pour inclure les préfixes nécessaires
isCalcSupported = !!el.style.length;


De cette manière, un fallback peut facilement être mis en place...
Administrateur
Merci jacqueminv.

Le problème est que, même s'il est possible de détecter le support de calc(), c'est souvent loin d'être évident de proposer un fallback comparable.
Administrateur
Bonjour,

si Modernizr fait son boulot, c'est que JS est activé et on peut continuer en JS... La taille du code et les perfs risquent d'en prendre un coup par rapport à une solution pur CSS je suppose...
Salut,
eviouchka a écrit :
y'a t'il réellement un intérêt alors à utiliser cette propriété s'il faut toujours ajouter un code pour les versions antérieures de navigateurs ?

Oui, par exemple quand tu redéfinis la taille de police par défaut au niveau de l'élément racine pour être sûr qu'IE 9 à 11 calcule bien son équivalent en pixels.
html {
  font-size: 62.5%;
  /* On obtient bien un équivalent de 10 pixels, sauf sous IE à partir de la version 9 (qui pense que la taille de police obtenue est de 9 pixels et des poussières) */
  font-size: calc(1em * 0.625);
  /* L'astuce pour corriger le calcul sous IE 9 à 11 */
}

L'exemple d'utilisation de calc() ci-dessus permettra d'éviter de fâcheuses erreurs de calculs (et donc des bugs d'affichage potentiels) en cas d'utilisation de l'unité rem.
Administrateur
Victor BRITO a écrit :

Oui, par exemple quand tu redéfinis la taille de police par défaut au niveau de l'élément racine pour être sûr qu'IE 9 à 11 calcule bien son équivalent en pixels.
html {
  font-size: 62.5%;
  /* On obtient bien un équivalent de 10 pixels, sauf sous IE à partir de la version 9 (qui pense que la taille de police obtenue est de 9 pixels et des poussières) */
  font-size: calc(1em * 0.625);
  /* L'astuce pour corriger le calcul sous IE 9 à 11 */
}
.

Bonsoir Victor.

Dans quelles circonstances as-tu rencontré ce bug de IE9-11 ?
Je n'ai jamais rien remarqué de tel et la plupart des sites récents que j'ai créés sont basés sur le socle suivant :
html {
  font-size: 62.5%;
}
body {
  font-size: 1.4em;
}


... Or à ma connaissance, IE9-11 s'en sortent très bien ensuite avec les tailles en em ou rem.
Pour ma part, j'ai rencontré ce bug en effectuant une intégration pour laquelle j'ai décidé d'utiliser le rem pour fixer les tailles de police (avec un fallback en em, facilité par l'utilisation de Sass). J'y avais laissé la taille de police de body à 100 %. Sous IE 8 et les autres navigateurs, j'obtenais bien 10 pixels avec une taille de police à 62,5 % pour l'élément racine ; mais, sous IE 9 à 11, j'obtenais une taille de police de 9,93 pixels.

J'ai trouvé l'astuce que j'ai employée pour qu'IE 9 à 11 calculent bien dans le dépôt Github du développement front-end du Guardian. Par ailleurs, un ticket avait été ouvert à ce sujet (qui a été fermé depuis).
drazik a écrit :
Le navigateur n'arrondis pas une valeur comme 9.93px à 10px?

Firefox, par exemple, arrondit ; mais, IE, depuis la version 9, connaît le « sous-pixel ».

Pour revenir à ce bug d'IE 9 à 11 (et qui risque de perdurer si l'on en croit le message de l'équipe de développement d'IE pour le ticket dont j'ai précédemment rapporté le lien), il peut être également résolu comme suit :
html {
  font-size: 10px;
}

C'est une solution de facilité ; mais, malheureusement, une telle déclaration CSS empêchera l'agrandissement de la taille de police sous IE, y compris IE 11 (je parle bien du zoom texte, disponible depuis le menu qu'on affiche en appuyant sur Alt quand il est masqué par défaut sous IE 9+), même si l'on ne définit que des tailles de police en em ou rem.

J'ajouterai que si un tel bug peut passer inaperçu parce que l'œil ne distinguera pas spontanément une fonte de 10 pixels d'une autre de 9,93 pixels (d'où ta première réaction, Raphaël Smiley cligne ), il peut avoir un impact non négligeable dans un design élastique où toutes les dimensions de blocs sont exprimées en em ou en rem (c'est justement dans ce contexte que, lors de l'intégration dont je parlais plus haut, j'ai constaté une différence de rendu de la largeur de blocs sous IE 9 à 11).
Modifié par Victor BRITO (18 May 2014 - 23:26)
Victor BRITO a écrit :
html {
  font-size: 62.5%;
  /* On obtient bien un équivalent de 10 pixels, sauf sous IE à partir de la version 9 (qui pense que la taille de police obtenue est de 9 pixels et des poussières) */
  font-size: calc(1em * 0.625);
  /* L'astuce pour corriger le calcul sous IE 9 à 11 */
}

L'exemple d'utilisation de calc() ci-dessus permettra d'éviter de fâcheuses erreurs de calculs (et donc des bugs d'affichage potentiels) en cas d'utilisation de l'unité rem.

Vu que je code tout en rem (avec un falback pour IE8 en px à l'aide de SASS), j'ai récement implanté moi aussi cette solution pour mes projets.

Merci à Victor et à Raphaël (pour le code trouvé dans KNACSS).
Sujet clos
Aller à