La fonction calc() en CSS 3

Parmi les apports des nouvelles spécifications CSS on retrouve la fonction calc(), qui va apporter de (très) belles simplifications dans la résolution de cas pratiques. Pour l’instant, elle est supportée par les navigateurs récents pour la plupart des mises en application qu’on peut en faire.

Cette fonction est actuellement au stade de recommandation candidate

Cet article est un bref résumé, si vous souhaitez plus d’informations à propos de la fonction calc(), n’hésitez pas à consulter l’excellente présentation du sujet sur le site Alsacréations.

Que peut-on faire avec cette fonction CSS ?

Comme sa signature le laisse sous-entendre, tout simplement calculer le résultat d’opérations mathématiques.

Dans le cadre de l’utilisation des feuilles de style, le navigateur est chargé de présenter un document tel que son auteur l’a défini. A partir du moment où l’on souhaite agir dynamiquement sur cette présentation, en fonction d’une taille d’écran, pour faire un design adaptatif par exemple, le navigateur est le seul outil capable de calculer ce genre de chose.

Et donc, vous en rêviez, le W3C l’a fait avec la fonction calc() !

Exemples d’utilisation

Attention, il faut impérativement séparer l’opérateur des éléments utilisés dans l’opération, autrement la fonction calc() ne sera pas exécutée.

div {
  height: calc(20px-1em);
}

Ne fonctionnera pas, parce que l’opérateur est accolé aux opérandes.

A noter que l’on peut bien sûr effectuer des opérations indépendamment de l’unité de mesure utilisée. Encore une fois, le navigateur est très bien placé pour savoir de quoi on parle et faire des conversions “pré-opérationnelles” si c’est nécessaire.

Dimensions

Grâce à calc(), vous pouvez évidemment réaliser des opérations simples, telles que celle-ci, pour calculer des dimensions en fonction de la taille disponible :

div {
  width: calc(100% / 3);
}

Ou encore :

div {
  height: calc(20px - 1em);
}

Positions

Il devient très facile de positionner horizontalement un conteneur de façon “relative” :

div {
  position: relative;
  top: calc(50px - 1em);
}

Grilles

Imaginons que vous souhaitiez placer trois colonnes séparées chacune d’une gouttière de 1em. Vous pouviez déjà faire relativement simple grâce à des données en pourcentages et des classes CSS. Cela devient encore plus simplissime grâce à calc().

col > div {
  width: calc((100% / 3) - (1em - 1em / 3));
  float: left;
}

Vous pouvez également vous attaquer à des opérations plus complexes, dans lesquelles plusieurs fonctions calc() peuvent être imbriquées les unes dans les autres, parfois même en utilisant la fonction attr(), qui permet de récupérer la valeur d’un attribut HTML.

Cette fonction est vraiment une belle avancée qui permet de réaliser des choses que les intégrateurs rêvaient de faire depuis quelques années, sans devoir passer par du Javascript et des fonctions aux retours parfois aléatoires.