CSS: guide complet des fonctions calc ()

.main-content {
  /*  80px  100vh */
  height: calc(100vh - 80px);
}

Fonction Calc () et valeurs des propriétés CSS

.el {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20px);
  height:    calc(100vh - 20px);
  padding:   calc(1vw + 5px);
}

.el {
  margin: 10px calc(2vw + 5px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);
}

.el {
  background: #1E88E5 linear-gradient(
    to bottom,
    #1E88E5,
    #1E88E5 calc(50% - 10px),
    #3949AB calc(50% + 10px),
    #3949AB
  );
}

La fonction calc () est un outil pour travailler avec des propriétés numériques.

.el {
  /* ! */
  counter-reset: calc("My " + "counter");
}
.el::before {
  /* ! */
  content: calc("Candyman " * 3);
}

line-height: calc(1.2 * 1.2);

transform: rotate(calc(10deg * 5));

.el {
  /*   ,    */
  width: calc(20px);
}

Calc () ne peut pas être utilisé dans les requêtes multimédias

@media (max-width: 40rem) {
  /* 40rem   */
}

/*  ! */
@media (min-width: calc(40rem + 1px)) {
  /* ,  40rem */
}

Utilisation de différentes unités dans une seule expression

/*      */
width: calc(100% - 20px);

transform: rotate(calc(1turn + 45deg));

animation-delay: calc(1s + 15ms);

Comparaison de calc () avec les calculs du préprocesseur

$padding: 1rem;

.el[data-padding="extra"] {
  padding: $padding + 2rem; //  3rem;
  margin-bottom: $padding * 2; //  2rem; 
}

Divulgation de la signification des valeurs numériques utilisées en CSS

.el {
  /*   , */
  width: calc(100% / 7);

  /*   */
  width: 14.2857142857%;
}

[data-columns="7"] .col { width: calc(100% / 7); }
[data-columns="6"] .col { width: calc(100% / 6); }
[data-columns="5"] .col { width: calc(100% / 5); }
[data-columns="4"] .col { width: calc(100% / 4); }
[data-columns="3"] .col { width: calc(100% / 3); }
[data-columns="2"] .col { width: calc(100% / 2); }

Opérateurs mathématiques de la fonction calc ()

.el {
  /*  */
  margin: calc(10px + 10px);

  /*  */
  margin: calc(10px + 5);
}

.el {
  /*  */
  margin: calc(30px / 3);

  /*  */
  margin: calc(30px / 10px);

  /*  (   ) */
  margin: calc(30px / 0);
}

.el {
  /*  */
  margin: calc(10px * 3);

  /*  */
  margin: calc(3 * 10px);

  /*  */
  margin: calc(30px * 3px);
}

L'importance des espaces

.el {
  /*  */
  font-size: calc(3vw + 2px);

  /*  */
  font-size: calc(3vw+2px);

  /*  */
  font-size: calc(3vw - 2px);

  /*  */
  font-size: calc(3vw-2px);
}

.el {
  /*  */
  width: calc(
    100%     /   3
  );
}

.el {
  /*  */
  width: calc (100% / 3);
}

Constructions imbriquées: calc (calc ())

.el {
  width: calc(
    calc(100% / 3)
    -
    calc(1rem * 2)
  );
}

.el {
  width: calc(
   (100% / 3)
    -
   (1rem * 2)
  );
}

.el {
  width: calc(100% / 3 - 1rem * 2);
}

.el {
  /* ,   , */
  width: calc(100% + 2rem / 2);

  /*     ,    */
  width: calc((100% + 2rem) / 2);
}

Propriétés CSS personnalisées et calc ()

html {
  --spacing: 10px;
}

.module {
  padding: calc(var(--spacing) * 2);
}

html {
  --spacing: 10px;
  --spacing-L: var(--spacing) * 2;
  --spacing-XL: var(--spacing) * 3;
}

.module[data-spacing="XL"] {
  padding: calc(var(--spacing-XL));
}

<div style="--index: 1;"> ... </div>
<div style="--index: 2;"> ... </div>
<div style="--index: 3;"> ... </div>
div {
  /*     HTML (   ) */
  animation-delay: calc(var(--index, 1) * 0.2s);
}

Affectation d'unités à des propriétés personnalisées après avoir déclaré ces propriétés

html {
  --importantNumber: 2;
}

.el {
  /*    ,  ,        */
  padding: calc(var(--importantNumber) * 1rem);
}

Travailler avec des fleurs

html {
  --H: 100;
  --S: 100%;
  --L: 50%;
}

.el {
  background: hsl(
    calc(var(--H) + 20),
    calc(var(--S) - 10%),
    calc(var(--L) + 30%)
  )
}

Vous ne pouvez pas combiner calc () et attr ()

<div data-color="red">...</div>
div {
  /*    */
  color: attr(data-color);
}

div::before {
  content: attr(data-color);
}

<div class="grid" data-columns="7" data-gap="2">...</div>
.grid {
  display: grid;

  /*         */
  grid-template-columns: repeat(attr(data-columns), 1fr);
  grid-gap: calc(1rem * attr(data-gap));
}

<div class="grid" style="--columns: 7; --gap: 2rem;">...</div>
.grid {
  display: grid;

  /* ! */
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-gap: calc(var(--gap));
}

Outils du navigateur

Prise en charge du navigateur

.el {
  width: 92%; /*   */
  width: calc(100% - 2rem);
}

• Le navigateur Firefox sous la version 59 ne prend pas en charge calc()les fonctions utilisées pour définir la couleur. Par exemple: color: hsl(calc(60 * 2), 100%, 50%).
• IE 9-11 ne rendra pas l'ombre spécifiée par la propriété box-shadowsi elle est utilisée pour déterminer l'une des valeurs calc().
• Ni IE 9-11 ni Edge ne prennent en charge la conception de la vue width: calc()lorsqu'ils sont appliqués aux cellules du tableau.

Exemples de vie

• Je calc()pour créer la classe d'assistance pour les domaines de la gestion: .full-bleed { width: 100vw; margin-left: calc(50% — 50vw); }. Je peux dire que c'est calc()dans mon top 3 des fonctionnalités CSS les plus utiles.
• J'ai utilisé cette fonction pour allouer de l'espace pour un "pied de page" fixe de la page.
• calc() . , font-size, . font-size — calc() line-height. ( , calc() , , , rem em. , ).
• , . . — : .margin { width: calc( (100vw — var(--content-width)) / 2); }.
• calc() - , . : .drop-cap { --drop-cap-lines: 3; font-size: calc(1em * var(--drop-cap-lines) * var(--body-line-height)); }.
• , .
• , padding vw/vh.
• Je demande calc()à contourner les restrictions background-position. Cela est particulièrement vrai pour les restrictions sur l'ajustement des positions de changement de couleur dans les dégradés. Par exemple, cela peut être décrit comme suit: "positionnez la position du changement de couleur, sans atteindre 0.75emle bas".